Fix compatibility

Author: mantou132

Diff for: .github/workflows/build-release.yml

@@ -14,7 +14,7 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: 14.x
+        node-version: 18.x
 
     - run: yarn
     - run: yarn --cwd functions

Diff for: .github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: 14.x
+        node-version: 18.x
 
     - run: yarn
     - run: yarn --cwd functions

Diff for: package.json

@@ -6,7 +6,7 @@
     "lint": "tsc --noEmit && eslint --ext .ts --fix src/",
     "test": "vitest",
     "build": "vite build",
-    "watch": "yarn build --watch",
+    "watch": "cross-env NODE_ENV=development yarn build --watch",
     "serve": "web-ext --config web-ext.config.js run --start-url open.spotify.com",
     "serve:chromium": "yarn run serve -- -t chromium",
     "start": "concurrently npm:watch npm:serve:chromium",

Diff for: public/_locales/en/messages.json

@@ -226,7 +226,7 @@
   },
 
   "pageEditorAddLyrics2": {
-    "message": "upload",
+    "message": "choose",
     "description": "Paste or upload lyrics"
   },
 

Diff for: public/_locales/zh/messages.json

@@ -176,7 +176,7 @@
   },
 
   "pageEditorAddLyrics2": {
-    "message": "上传"
+    "message": "选择"
   },
 
   "pageEditorAddLyrics3": {

Diff for: src/background.ts

@@ -158,16 +158,20 @@ browser.runtime.onInstalled.addListener(({ reason }) => {
   }
 });
 
-if (!isFirefox) {
-  browser.scripting.registerContentScripts([
-    {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      world: 'MAIN',
-      id: 'page',
-      runAt: 'document_start',
-      matches: browser.runtime.getManifest().content_scripts![0].matches,
-      js: [isRateTest ? 'page/rate.js' : 'page/index.js'],
-    },
-  ]);
+if (isProd && !isFirefox) {
+  browser.scripting
+    .registerContentScripts([
+      {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        world: 'MAIN',
+        id: 'page',
+        runAt: 'document_start',
+        matches: browser.runtime.getManifest().content_scripts![0].matches,
+        js: [isRateTest ? 'page/rate.js' : 'page/index.js'],
+      },
+    ])
+    .catch(() => {
+      //
+    });
 }

Diff for: src/content.ts

@@ -1,6 +1,6 @@
 import { runtime } from 'webextension-polyfill';
 
-import { Message, Event, isFirefox, isRateTest } from './common/constants';
+import { Message, Event, isFirefox, isRateTest, isProd } from './common/constants';
 
 runtime.onMessage.addListener((msg: Message) => {
   window.postMessage(msg, '*');
@@ -30,7 +30,7 @@ window.addEventListener('message', ({ data }) => {
   }
 });
 
-if (isFirefox) {
+if (!isProd || isFirefox) {
   // Firefox CSP Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1267027
   const script = document.createElement('script');
   script.src = runtime.getURL(isRateTest ? 'page/rate.js' : 'page/index.js');

Diff for: src/options/index.ts

@@ -1,6 +1,7 @@
 // https://bugs.chromium.org/p/chromium/issues/detail?id=390807
 import '@webcomponents/webcomponentsjs';
 import { render, html } from '@mantou/gem/lib/element';
+import { kebabToCamelCase } from '@mantou/gem/lib/utils';
 
 import { isWebApp } from '../common/constants';
 import { fontStyle } from '../common/font';
@@ -43,4 +44,18 @@ if (!isWebApp) {
   window.addEventListener('error', (e) => {
     captureException(e);
   });
+} else {
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=390807
+  // hack content script custom element
+  Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
+    value: function attachInternals() {
+      return {
+        states: {
+          has: (v: string) => kebabToCamelCase(v) in this.dataset,
+          add: (v: string) => (this.dataset[kebabToCamelCase(v)] = ''),
+          delete: (v: string) => delete this.dataset[kebabToCamelCase(v)],
+        },
+      };
+    },
+  });
 }

Diff for: src/page/editor/app.ts

@@ -319,7 +319,8 @@ export class EditorApp extends GemElement<State> {
         .button:hover {
           opacity: 1;
         }
-        .text-button:hover {
+        .text-button:hover,
+        .title a:hover {
           border-bottom: 1px solid;
         }
         table {