Set up initial manifest v3 support (#605)

4 files changed, 141 insertions, 38 deletions

diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index fb11ba2e..322d9400 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -47,6 +47,7 @@ class Backend {
         this._mecab = new Mecab();
         this._mediaUtility = new MediaUtility();
         this._clipboardReader = new ClipboardReader({
+            // eslint-disable-next-line no-undef
             document: (typeof document === 'object' && document !== null ? document : null),
             pasteTargetSelector: '#clipboard-paste-target',
             imagePasteTargetSelector: '#clipboard-image-paste-target',
@@ -551,43 +552,7 @@ class Backend {
     }
 
     _onApiInjectStylesheet({type, value}, sender) {
-        if (!sender.tab) {
-            return Promise.reject(new Error('Invalid tab'));
-        }
-
-        const tabId = sender.tab.id;
-        const frameId = sender.frameId;
-        const details = (
-            type === 'file' ?
-            {
-                file: value,
-                runAt: 'document_start',
-                cssOrigin: 'author',
-                allFrames: false,
-                matchAboutBlank: true
-            } :
-            {
-                code: value,
-                runAt: 'document_start',
-                cssOrigin: 'user',
-                allFrames: false,
-                matchAboutBlank: true
-            }
-        );
-        if (typeof frameId === 'number') {
-            details.frameId = frameId;
-        }
-
-        return new Promise((resolve, reject) => {
-            chrome.tabs.insertCSS(tabId, details, () => {
-                const e = chrome.runtime.lastError;
-                if (e) {
-                    reject(new Error(e.message));
-                } else {
-                    resolve();
-                }
-            });
-        });
+        return this._injectStylesheet(type, value, sender);
     }
 
     async _onApiGetStylesheetContent({url}) {
@@ -1772,4 +1737,88 @@ class Backend {
             });
         });
     }
+
+    _injectStylesheet(type, value, target) {
+        if (isObject(chrome.tabs) && typeof chrome.tabs.insertCSS === 'function') {
+            return this._injectStylesheetMV2(type, value, target);
+        } else if (isObject(chrome.scripting) && typeof chrome.scripting.insertCSS === 'function') {
+            return this._injectStylesheetMV3(type, value, target);
+        } else {
+            return Promise.reject(new Error('insertCSS function not available'));
+        }
+    }
+
+    _injectStylesheetMV2(type, value, target) {
+        return new Promise((resolve, reject) => {
+            if (!target.tab) {
+                reject(new Error('Invalid tab'));
+                return;
+            }
+
+            const tabId = target.tab.id;
+            const frameId = target.frameId;
+            const details = (
+                type === 'file' ?
+                {
+                    file: value,
+                    runAt: 'document_start',
+                    cssOrigin: 'author',
+                    allFrames: false,
+                    matchAboutBlank: true
+                } :
+                {
+                    code: value,
+                    runAt: 'document_start',
+                    cssOrigin: 'user',
+                    allFrames: false,
+                    matchAboutBlank: true
+                }
+            );
+            if (typeof frameId === 'number') {
+                details.frameId = frameId;
+            }
+
+            chrome.tabs.insertCSS(tabId, details, () => {
+                const e = chrome.runtime.lastError;
+                if (e) {
+                    reject(new Error(e.message));
+                } else {
+                    resolve();
+                }
+            });
+        });
+    }
+
+    _injectStylesheetMV3(type, value, target) {
+        return new Promise((resolve, reject) => {
+            if (!target.tab) {
+                reject(new Error('Invalid tab'));
+                return;
+            }
+
+            const tabId = target.tab.id;
+            const frameId = target.frameId;
+            const details = (
+                type === 'file' ?
+                {origin: chrome.scripting.StyleOrigin.AUTHOR, files: [value]} :
+                {origin: chrome.scripting.StyleOrigin.USER,   css: value}
+            );
+            details.target = {
+                tabId,
+                allFrames: false
+            };
+            if (typeof frameId === 'number') {
+                details.target.frameIds = [frameId];
+            }
+
+            chrome.scripting.insertCSS(details, () => {
+                const e = chrome.runtime.lastError;
+                if (e) {
+                    reject(new Error(e.message));
+                } else {
+                    resolve();
+                }
+            });
+        });
+    }
 }
diff --git a/ext/bg/js/native-simple-dom-parser.js b/ext/bg/js/native-simple-dom-parser.js
index 4e0d89ea..c1752bc4 100644
--- a/ext/bg/js/native-simple-dom-parser.js
+++ b/ext/bg/js/native-simple-dom-parser.js
@@ -17,6 +17,8 @@
 
 class NativeSimpleDOMParser {
     constructor(content) {
+        // TODO : Remove
+        // eslint-disable-next-line no-undef
         this._document = new DOMParser().parseFromString(content, 'text/html');
     }
 
diff --git a/ext/mixed/js/core.js b/ext/mixed/js/core.js
index 72ab7474..aa894e01 100644
--- a/ext/mixed/js/core.js
+++ b/ext/mixed/js/core.js
@@ -304,7 +304,12 @@ function promiseTimeout(delay, resolveValue) {
 }
 
 function promiseAnimationFrame(timeout=null) {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
+        if (typeof cancelAnimationFrame !== 'function' || typeof requestAnimationFrame !== 'function') {
+            reject(new Error('Animation not supported in this context'));
+            return;
+        }
+
         let timer = null;
         let frameRequest = null;
         const onFrame = (time) => {
@@ -318,12 +323,14 @@ function promiseAnimationFrame(timeout=null) {
         const onTimeout = () => {
             timer = null;
             if (frameRequest !== null) {
+                // eslint-disable-next-line no-undef
                 cancelAnimationFrame(frameRequest);
                 frameRequest = null;
             }
             resolve({time: timeout, timeout: true});
         };
 
+        // eslint-disable-next-line no-undef
         frameRequest = requestAnimationFrame(onFrame);
         if (typeof timeout === 'number') {
             timer = setTimeout(onTimeout, timeout);
diff --git a/ext/sw.js b/ext/sw.js
new file mode 100644
index 00000000..1b377ae0
--- /dev/null
+++ b/ext/sw.js
@@ -0,0 +1,45 @@
+/*
+ * 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/cache-map.js',
+    '/mixed/js/dictionary-data-util.js',
+    '/mixed/js/object-property-accessor.js',
+    '/bg/js/anki.js',
+    '/bg/js/audio-downloader.js',
+    '/bg/js/clipboard-monitor.js',
+    '/bg/js/clipboard-reader.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/media-utility.js',
+    '/bg/js/options.js',
+    '/bg/js/profile-conditions.js',
+    '/bg/js/request-builder.js',
+    '/bg/js/native-simple-dom-parser.js',
+    '/bg/js/text-source-map.js',
+    '/bg/js/translator.js',
+    '/bg/js/backend.js',
+    '/bg/js/background-main.js'
+);