Set up initial manifest v3 support

.eslintrc.json

@@ -156,6 +156,40 @@
                 "node": true,
                 "webextensions": false
             }
+        },
+        {
+            "files": [
+                "ext/mixed/js/core.js",
+                "ext/mixed/js/yomichan.js",
+                "ext/mixed/js/environment.js",
+                "ext/mixed/js/japanese.js",
+                "ext/mixed/js/audio-system.js",
+                "ext/mixed/js/cache-map.js",
+                "ext/mixed/js/dictionary-data-util.js",
+                "ext/mixed/js/object-property-accessor.js",
+                "ext/bg/js/anki.js",
+                "ext/bg/js/audio-uri-builder.js",
+                "ext/bg/js/clipboard-monitor.js",
+                "ext/bg/js/database.js",
+                "ext/bg/js/deinflector.js",
+                "ext/bg/js/dictionary-database.js",
+                "ext/bg/js/json-schema.js",
+                "ext/bg/js/mecab.js",
+                "ext/bg/js/options.js",
+                "ext/bg/js/profile-conditions.js",
+                "ext/bg/js/request-builder.js",
+                "ext/bg/js/simple-dom-parser.js",
+                "ext/bg/js/text-source-map.js",
+                "ext/bg/js/translator.js",
+                "ext/bg/js/backend.js",
+                "ext/bg/js/background-main.js"
+            ],
+            "env": {
+                "browser": false,
+                "serviceworker": true,
+                "es2017": true,
+                "webextensions": true
+            }
         }
     ]
 }

dev/data/manifest-variants.json

@@ -1,6 +1,6 @@
 {
     "manifest": {
-        "manifest_version": 2,
+        "manifest_version": 3,
         "name": "Yomichan",
         "version": "20.8.24.0",
         "description": "Japanese dictionary with Anki integration",
@@ -28,8 +28,7 @@
             "default_popup": "bg/context.html"
         },
         "background": {
-            "page": "bg/background.html",
-            "persistent": true
+            "service_worker": "sw.js"
         },
         "content_scripts": [
             {
@@ -70,8 +69,7 @@
         "sandbox": {
             "pages": [
                 "bg/template-renderer.html"
-            ],
-            "content_security_policy": "sandbox allow-scripts; script-src 'self' 'unsafe-eval'; object-src 'self'"
+            ]
         },
         "permissions": [
             "<all_urls>",
@@ -103,7 +101,9 @@
             "fg/float.html",
             "bg/template-renderer.html"
         ],
-        "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+        "content_security_policy": {
+            "sandbox": "sandbox allow-scripts; script-src 'self' 'unsafe-eval'; object-src 'self'"
+        },
         "applications": {
             "gecko": {
                 "id": "[email protected]",

ext/fg/js/popup.js

@@ -51,6 +51,11 @@ class Popup extends EventDispatcher {
         this._container = this._frame;
         this._shadow = null;
 
+        // chrome.tabs.injectCSS fails on manifest v3 with error:
+        // Cannot access contents of the page. Extension manifest must request permission to access the respective host.
+        // Manually override position to workaround the stylesheet not being available.
+        this._frame.style.setProperty('position', 'fixed', 'important');
+
         this._fullscreenEventListeners = new EventListenerCollection();
     }
 

ext/manifest.json

@@ -1,5 +1,5 @@
 {
-    "manifest_version": 2,
+    "manifest_version": 3,
     "name": "Yomichan",
     "version": "20.8.24.0",
     "description": "Japanese dictionary with Anki integration",
@@ -27,8 +27,7 @@
         "default_popup": "bg/context.html"
     },
     "background": {
-        "page": "bg/background.html",
-        "persistent": true
+        "service_worker": "sw.js"
     },
     "content_scripts": [
         {
@@ -69,8 +68,7 @@
     "sandbox": {
         "pages": [
             "bg/template-renderer.html"
-        ],
-        "content_security_policy": "sandbox allow-scripts; script-src 'self' 'unsafe-eval'; object-src 'self'"
+        ]
     },
     "permissions": [
         "<all_urls>",
@@ -102,7 +100,9 @@
         "fg/float.html",
         "bg/template-renderer.html"
     ],
-    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+    "content_security_policy": {
+        "sandbox": "sandbox allow-scripts; script-src 'self' 'unsafe-eval'; object-src 'self'"
+    },
     "applications": {
         "gecko": {
             "id": "[email protected]",

ext/sw.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2020  Yomichan Authors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+self.importScripts(
+    '/mixed/lib/wanakana.min.js',
+    '/mixed/js/core.js',
+    '/mixed/js/yomichan.js',
+    '/mixed/js/environment.js',
+    '/mixed/js/japanese.js',
+    '/mixed/js/audio-system.js',
+    '/mixed/js/cache-map.js',
+    '/mixed/js/dictionary-data-util.js',
+    '/mixed/js/object-property-accessor.js',
+    '/bg/js/anki.js',
+    '/bg/js/audio-uri-builder.js',
+    '/bg/js/clipboard-monitor.js',
+    '/bg/js/database.js',
+    '/bg/js/deinflector.js',
+    '/bg/js/dictionary-database.js',
+    '/bg/js/json-schema.js',
+    '/bg/js/mecab.js',
+    '/bg/js/options.js',
+    '/bg/js/profile-conditions.js',
+    '/bg/js/request-builder.js',
+    '/bg/js/simple-dom-parser.js',
+    '/bg/js/text-source-map.js',
+    '/bg/js/translator.js',
+    '/bg/js/backend.js',
+    '/bg/js/background-main.js'
+);

test/test-sw.js

@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2020  Yomichan Authors
+ * Author: Yomichan Authors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const {JSDOM} = require('jsdom');
+const {VM} = require('../dev/vm');
+const assert = require('assert');
+
+
+function getAllHtmlScriptPaths(fileName) {
+    const domSource = fs.readFileSync(fileName, {encoding: 'utf8'});
+    const dom = new JSDOM(domSource);
+    const {window} = dom;
+    const {document} = window;
+    try {
+        const scripts = document.querySelectorAll('script');
+        return [...scripts].map(({src}) => src);
+    } finally {
+        window.close();
+    }
+}
+
+
+function main() {
+    try {
+        // Verify that sw.js scripts match background.html scripts
+        const rootDir = path.join(__dirname, '..');
+        const extDirName = 'ext';
+        const extDir = path.join(rootDir, extDirName);
+
+        const scripts = getAllHtmlScriptPaths(path.join(extDir, 'bg', 'background.html'));
+        const importedScripts = [];
+
+        const importScripts = (...scripts2) => {
+            importedScripts.push(...scripts2);
+        };
+
+        const vm = new VM({importScripts});
+        vm.context.self = vm.context;
+        vm.execute(['sw.js']);
+
+        vm.assert.deepStrictEqual(scripts, importedScripts);
+
+        // Verify that eslint config lists files correctly
+        const expectedSwRulesFiles = scripts.filter((src) => !src.startsWith('/mixed/lib/')).map((src) => `${extDirName}${src}`);
+        const eslintConfig = JSON.parse(fs.readFileSync(path.join(rootDir, '.eslintrc.json'), {encoding: 'utf8'}));
+        const swRules = eslintConfig.overrides.find((item) => (
+            typeof item.env === 'object' &&
+            item.env !== null &&
+            item.env.serviceworker === true
+        ));
+        assert.ok(typeof swRules !== 'undefined');
+        assert.ok(Array.isArray(swRules.files));
+        assert.deepStrictEqual(swRules.files, expectedSwRulesFiles);
+    } catch (e) {
+        console.error(e);
+        process.exit(-1);
+        return;
+    }
+    process.exit(0);
+}
+
+
+if (require.main === module) { main(); }