Merge branch 'develop' into 'main'

.github/workflows/auto-release.yml

@@ -16,12 +16,12 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Use Node.js v12
-        uses: actions/setup-node@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: '12'
+          node-version-file: '.nvmrc'
 
       - uses: bahmutov/npm-install@v1
 
@@ -47,7 +47,7 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Conventional Changelog Action
         id: changelog

.nvmrc

@@ -0,0 +1 @@
+v18

README.md

@@ -31,7 +31,8 @@ Chrome 브라우저의 확장 앱입니다. 아직 미완성이라 사용이 불
 - 티켓팅할 사이트에 접속합니다.
 - 툴바에 해당 앱의 아이콘을 클릭하면 타이머가 나타납니다.
 - 날짜와 시간을 입력합니다.
-- 타이머 종료 후 실행할 코드를 입력합니다. (추후 코드를 직접 입력하지 않고 자동으로 생성되게 변경될 예정입니다. 기능 추가 후 코드 입력 창은 없어지거나 기능이 축소될 예정입니다.)
+- KTX 또는 SRT 중 하나를 선택한 뒤 실행 버튼을 클릭합니다.
+  - 커스텀 코드 입력은 보안 정책 이슈로 지원을 종료하였습니다. (`v1.6.0`까지 지원)
 - 기다립니다.
 
 > Chrome 웹 스토어 : https://bit.ly/3hjbElk
@@ -70,7 +71,9 @@ const timer = new TicketingTimer('ktx')
 timer.start('2020-09-08 07:00:00') // 날짜 입력
 ```
 
-#### 커스텀
+#### 커스텀 (deprecated)
+
+보안 정책 이슈로 제거되었습니다. `v1.6.0`까지 사용 가능합니다.
 
 ```js
 const timer = new TicketingTimer(() => {

package.json

@@ -19,26 +19,27 @@
   "homepage": "https://github.com/divlook/ticketing-timer#readme",
   "license": "MIT",
   "scripts": {
-    "dev": "webpack-dev-server --mode development",
+    "dev": "webpack serve --mode development",
     "build": "webpack --mode production",
-    "build.github": "yarn build --output-path dist",
-    "build.chrome": "yarn build --env-mode chrome",
+    "build.github": "yarn build --env output-path=dist",
+    "build.chrome": "yarn build --env env-mode=chrome",
     "start": "npx serve -l 9000 build"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/polyfill": "^7.11.5",
     "@babel/preset-env": "^7.11.5",
-    "@types/chrome": "^0.0.128",
+    "@types/chrome": "^0.0.283",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.1.0",
     "core-js": "3",
     "css-loader": "^4.2.2",
+    "ejs-loader": "^0.5.0",
     "highlight.js": "^10.4.1",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^5.6.3",
     "mini-css-extract-plugin": "^0.11.0",
     "moment": "^2.27.0",
     "moment-locales-webpack-plugin": "^1.2.0",
@@ -48,9 +49,9 @@
     "sass": "^1.26.10",
     "sass-loader": "^10.0.2",
     "style-loader": "^1.2.1",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0",
     "worker-loader": "^3.0.2"
   }
-}
+}

src/chrome/background.js

@@ -4,7 +4,7 @@
  * @see https://developer.chrome.com/extensions/background_pages
  */
 
-chrome.browserAction.onClicked.addListener(onClickBrowserAction)
+chrome.action.onClicked.addListener(onClickBrowserAction)
 
 /**
  * @param { tabs.Tab } tab https://developer.chrome.com/extensions/tabs#type-Tab

src/chrome/content-script.js

@@ -1,13 +1,8 @@
 import { messageType } from '@/chrome/constant'
+import App from '@/components/app'
+import { getBestZIndexAmongChild } from '@/utils/dom'
 
-/**
- * Chrome Content Script
- *
- * @see https://developer.chrome.com/extensions/devguide
- * @see https://developer.chrome.com/extensions/content_scripts
- */
-
-injectScript(chrome.extension.getURL('chrome/inject.js'), 'body')
+init()
 
 chrome.runtime.onMessage.addListener((request) => {
     window.postMessage({
@@ -16,18 +11,44 @@ chrome.runtime.onMessage.addListener((request) => {
     })
 })
 
-/**
- * injectScript - Inject internal script to available access to the `window`
- *
- * @param  {type} file_path Local path of the internal script.
- * @param  {type} tag The tag as string, where the script will be append (default: 'body').
- * @see    {@link https://gist.github.com/devjin0617/3e8d72d94c1b9e69690717a219644c7a}
- * @see    {@link http://stackoverflow.com/questions/20499994/access-window-variable-from-content-script}
- */
-function injectScript(file_path, tag) {
-    var node = document.getElementsByTagName(tag)[0]
-    var script = document.createElement('script')
-    script.setAttribute('type', 'text/javascript')
-    script.setAttribute('src', file_path)
-    node.appendChild(script)
+async function init() {
+    const rootEl = document.createElement('div')
+    const shadowRoot = rootEl.attachShadow({ mode: 'open' })
+    const styleLink = document.createElement('link')
+
+    rootEl.dataset.name = messageType
+    styleLink.setAttribute('rel', 'stylesheet')
+    styleLink.setAttribute('href', chrome.runtime.getURL('styles/chrome/content-script.css'))
+    shadowRoot.appendChild(styleLink)
+    document.body.appendChild(rootEl)
+
+    const app = await App({ mode: 'modal' })
+    const state = {
+        isMounted: false,
+    }
+
+    window.addEventListener('message', (e) => {
+        const data = e.data
+
+        if (data.type !== messageType) {
+            return
+        }
+
+        if (data.request?.action === 'toggle') {
+            if (!state.isMounted) {
+                state.isMounted = true
+
+                shadowRoot.appendChild(app.el)
+            }
+
+            if (app.state.show) {
+                app.methods.hide()
+            } else {
+                app.methods.show()
+                getBestZIndexAmongChild(document.body).then((bestZIndex) => {
+                    app.methods.setZIndex(bestZIndex + 1)
+                })
+            }
+        }
+    })
 }

src/chrome/manifest.json

@@ -1,5 +1,6 @@
 {
-    "manifest_version": 2,
+    "$schema": "https://json.schemastore.org/chrome-manifest",
+    "manifest_version": 3,
     "name": "Ticketing Timer",
     "version": "1.0.0",
     "description": "티켓팅을 위한 앱입니다.",
@@ -12,16 +13,19 @@
     "content_scripts": [
         {
             "matches": ["<all_urls>"],
-            "css": ["styles/chrome/inject.css"],
             "js": ["chrome/content-script.js"]
         }
     ],
-    "web_accessible_resources": ["chrome/inject.js"],
+    "web_accessible_resources": [
+        {
+            "resources": ["styles/*"],
+            "matches": ["<all_urls>"]
+        }
+    ],
     "background": {
-        "scripts": ["chrome/background.js"],
-        "persistent": false
+        "service_worker": "chrome/background.js"
     },
-    "browser_action": {
+    "action": {
         "default_title": "클릭하면 타이머가 나타납니다."
     }
 }

src/components/app/index.js

@@ -13,7 +13,6 @@ import {
 } from '@/components/app/dom'
 import template from '@/components/app/template'
 import { codeHighlight } from '@/plugins/highlight'
-import { createCode } from '@/utils'
 import { renderTemplate, createArticle } from '@/utils/dom'
 import {
     onSubmit,
@@ -26,6 +25,7 @@ import {
     onAnimationend,
 } from '@/utils/dom.event'
 import { indentLine, outdentLine } from '@/utils/dom.textarea'
+import * as callbacks from '@/callbacks'
 
 /**
  * @typedef State
@@ -121,6 +121,10 @@ async function App(props = {}) {
     initApp()
     setInitialValue()
 
+    requestAnimationFrame(() => {
+        updatePreviewCode(select.ticketingType.value)
+    })
+
     return {
         get el() {
             return el
@@ -139,8 +143,6 @@ async function App(props = {}) {
         consoleSection.clear()
 
         const ticketingType = select.ticketingType.value
-        const isCustom = ticketingType === 'custom'
-        const typeOrCallback = isCustom ? completeTicketing : ticketingType
 
         if (!input.date.value) {
             consoleSection.add(createArticle('날짜를 입력해주세요.'))
@@ -154,7 +156,7 @@ async function App(props = {}) {
 
         const datetime = [input.date.value, ' ', input.time.value].join('')
 
-        timer = new TicketingTimer(typeOrCallback, {
+        timer = new TicketingTimer(ticketingType, {
             onReject,
             onStart,
             onStop,
@@ -168,10 +170,6 @@ async function App(props = {}) {
         timer?.stop()
     }
 
-    function completeTicketing() {
-        consoleSection.add(createArticle('타이머가 종료되었습니다.'))
-    }
-
     function resetTicketing(e) {
         e?.preventDefault()
         stopTicketing()
@@ -190,24 +188,6 @@ async function App(props = {}) {
      */
     function setPlaying(playing) {
         state.playing = !!playing
-        editor.textarea.disabled = state.playing
-
-        if (editor.textarea.value && state.playing) {
-            try {
-                runCode = createCode(editor.textarea.value)
-                return
-            } catch (error) {
-                console.error(error)
-                consoleSection.clear()
-                consoleSection.add(createArticle('에러가 발생하였습니다.'))
-                createArticle(error?.message, (article) => {
-                    consoleSection.add(article)
-                })
-                stopTicketing()
-            }
-        }
-
-        runCode = null
     }
 
     function onReject() {
@@ -260,10 +240,7 @@ async function App(props = {}) {
     }
 
     function onTypeChanged(e) {
-        const isCustom = e.target.value === 'custom'
-
-        editor.textarea.disabled = !isCustom
-        editor.textarea.parentElement.style.display = !isCustom ? 'none' : null
+        updatePreviewCode(e.target.value)
     }
 
     function onTypingEditor(e) {
@@ -390,6 +367,22 @@ async function App(props = {}) {
             el.classList.remove(className)
         }
     }
+
+    /**
+     * @param {'ktx' | 'srt'} ticketingType
+     */
+    function updatePreviewCode(ticketingType) {
+        const code = (() => {
+            try {
+                return callbacks[ticketingType].toString()
+            } catch {
+                return ''
+            }
+        })()
+
+        editor.textarea.value = code
+        codeHighlight(editor.preview, code)
+    }
 }
 
 export default App

src/components/app/template.js

@@ -15,14 +15,13 @@ function template() {
 
                         <p>
                             <select data-id="ticketing-type">
-                                <option value="custom">Custom</option>
                                 <option value="ktx">KTX</option>
                                 <option value="srt">SRT</option>
                             </select>
                         </p>
 
                         <div class="tta-editor-container">
-                            <textarea rows="10" data-id="editor" placeholder="여기에 코드를 입력해주세요."></textarea>
+                            <textarea rows="10" data-id="editor" readonly></textarea>
                             <code data-id="editor-preview" class="hljs javascript"></code>
                         </div>