feat: upgrade to Manifest V3 (#101)

Co-authored-by: Marcus <[email protected]>

Author: AprilSylph

.eslintrc.json

@@ -1,12 +1,14 @@
 {
   "env": {
     "browser": true,
-    "es2021": true,
-    "webextensions": true
+    "es2021": true
   },
   "extends": [
     "semistandard"
   ],
+  "globals": {
+    "chrome": "readonly"
+  },
   "parserOptions": {
     "ecmaVersion": 12
   },
@@ -19,8 +21,5 @@
         "no-extend-native": "off"
       }
     }
-  ],
-  "ignorePatterns": [
-    "*.min.js"
   ]
 }

.github/workflows/publish.yml

@@ -29,7 +29,6 @@ jobs:
         env:
           WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }}
           WEB_EXT_API_SECRET: ${{ secrets.WEB_EXT_API_SECRET }}
-          WEB_EXT_ID: ${{ secrets.WEB_EXT_ID }}
   chrome:
     name: Chrome
     runs-on: ubuntu-latest

dev/copy-libs.sh

@@ -20,8 +20,7 @@
     "web-ext": "^7.12.0"
   },
   "dependencies": {
-    "normalize.css": "^8.0.1",
-    "webextension-polyfill": "^0.12.0"
+    "normalize.css": "^8.0.1"
   },
   "webExt": {
     "sourceDir": "src/",

package-lock.json

@@ -1,12 +1,13 @@
-browser.browserAction.onClicked.addListener(() => browser.runtime.openOptionsPage());
+chrome.action.onClicked.addListener(() => chrome.runtime.openOptionsPage());
 
 const handledRequests = new Map();
 
-browser.webRequest.onBeforeRequest.addListener(({ method, requestBody, requestId, timeStamp, url }) => {
+chrome.webRequest.onBeforeRequest.addListener(({ method, requestBody, requestId, timeStamp, url }) => {
   if (handledRequests.has(requestId)) {
     return;
   } else {
     handledRequests.set(requestId, timeStamp);
+    chrome.storage.session.set({ [requestId]: timeStamp });
   }
 
   if (['POST', 'PUT'].includes(method) === false) { return; }
@@ -26,7 +27,7 @@ browser.webRequest.onBeforeRequest.addListener(({ method, requestBody, requestId
   const isPrivateAnswer = state === undefined && isPrivate === true && layout.some(({ type }) => type === 'ask');
 
   if (hasContent && (isAsk || isPrivateAnswer)) {
-    browser.storage.local.set({ [timeStamp]: { recipient, content, layout } });
+    chrome.storage.local.set({ [timeStamp]: { recipient, content, layout } });
   }
 }, {
   urls: [
@@ -38,11 +39,12 @@ browser.webRequest.onBeforeRequest.addListener(({ method, requestBody, requestId
   'requestBody'
 ]);
 
-browser.webRequest.onBeforeRequest.addListener(({ method, requestBody, requestId, timeStamp }) => {
+chrome.webRequest.onBeforeRequest.addListener(({ method, requestBody, requestId, timeStamp }) => {
   if (handledRequests.has(requestId)) {
     return;
   } else {
     handledRequests.set(requestId, timeStamp);
+    chrome.storage.session.set({ [requestId]: timeStamp });
   }
 
   if (method !== 'POST') { return; }
@@ -53,7 +55,7 @@ browser.webRequest.onBeforeRequest.addListener(({ method, requestBody, requestId
   const parsedData = JSON.parse(decodedData);
   const { question, recipient } = parsedData;
 
-  browser.storage.local.set({
+  chrome.storage.local.set({
     [timeStamp]: {
       recipient,
       content: [{ type: 'text', text: question, formatting: [] }],
@@ -67,11 +69,12 @@ browser.webRequest.onBeforeRequest.addListener(({ method, requestBody, requestId
   'requestBody'
 ]);
 
-browser.webRequest.onBeforeRequest.addListener(({ documentUrl, method, requestBody: { formData }, requestId, timeStamp, url }) => {
+chrome.webRequest.onBeforeRequest.addListener(({ documentUrl, method, requestBody: { formData }, requestId, timeStamp, url }) => {
   if (handledRequests.has(requestId)) {
     return;
   } else {
     handledRequests.set(requestId, timeStamp);
+    chrome.storage.session.set({ [requestId]: timeStamp });
   }
 
   if (method !== 'POST') { return; }
@@ -86,7 +89,7 @@ browser.webRequest.onBeforeRequest.addListener(({ documentUrl, method, requestBo
     recipientUrl = `${protocol}//${pathname.replace('/ask_form/', '')}/`;
   }
 
-  browser.storage.local.set({
+  chrome.storage.local.set({
     [timeStamp]: {
       recipientUrl,
       content: formData['post[one]'].map(text => ({ type: 'text', text, formatting: [] })),
@@ -100,12 +103,15 @@ browser.webRequest.onBeforeRequest.addListener(({ documentUrl, method, requestBo
   'requestBody'
 ]);
 
-browser.webRequest.onErrorOccurred.addListener(async ({ requestId }) => {
-  if (handledRequests.has(requestId)) {
-    const timeStamp = handledRequests.get(requestId);
-    const { [timeStamp]: item } = await browser.storage.local.get(timeStamp.toString());
+chrome.webRequest.onErrorOccurred.addListener(async ({ requestId }) => {
+  const timeStamp =
+    handledRequests.get(requestId) ??
+    await chrome.storage.session.get(requestId).then(({ [requestId]: timeStamp }) => timeStamp);
+
+  if (timeStamp) {
+    const { [timeStamp]: item } = await chrome.storage.local.get(timeStamp.toString());
     item.error = true;
-    browser.storage.local.set({ [timeStamp]: item });
+    chrome.storage.local.set({ [timeStamp]: item });
   }
 }, {
   urls: [
@@ -116,12 +122,15 @@ browser.webRequest.onErrorOccurred.addListener(async ({ requestId }) => {
   ]
 });
 
-browser.webRequest.onCompleted.addListener(async ({ requestId, statusCode }) => {
-  if (/[45]\d\d/.test(statusCode) && handledRequests.has(requestId)) {
-    const timeStamp = handledRequests.get(requestId);
-    const { [timeStamp]: item } = await browser.storage.local.get(timeStamp.toString());
+chrome.webRequest.onCompleted.addListener(async ({ requestId, statusCode }) => {
+  const timeStamp =
+    handledRequests.get(requestId) ??
+    await chrome.storage.session.get(requestId).then(({ [requestId]: timeStamp }) => timeStamp);
+
+  if (/[45]\d\d/.test(statusCode) && timeStamp) {
+    const { [timeStamp]: item } = await chrome.storage.local.get(timeStamp.toString());
     item.error = true;
-    browser.storage.local.set({ [timeStamp]: item });
+    chrome.storage.local.set({ [timeStamp]: item });
   }
 }, {
   urls: [
@@ -132,10 +141,10 @@ browser.webRequest.onCompleted.addListener(async ({ requestId, statusCode }) =>
   ]
 });
 
-browser.storage.onChanged.addListener(async (changes, areaName) => {
-  const storageObject = await browser.storage[areaName].get();
+chrome.storage.onChanged.addListener(async (changes, areaName) => {
+  const storageObject = await chrome.storage[areaName].get();
   const storageKeys = Object.keys(storageObject).sort((a, b) => a - b);
   const keysToRemove = storageKeys.splice(0, storageKeys.length - 512);
 
-  if (keysToRemove.length > 0) browser.storage[areaName].remove(keysToRemove);
+  if (keysToRemove.length > 0) chrome.storage[areaName].remove(keysToRemove);
 });

package.json

@@ -1,5 +1,5 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Outbox for Tumblr",
   "version": "1.0.4",
 
@@ -10,7 +10,7 @@
     "128": "icons/128.png"
   },
 
-  "browser_action": {
+  "action": {
     "default_icon": {
       "16": "icons/16.png",
       "48": "icons/48.png",
@@ -19,27 +19,30 @@
   },
 
   "background": {
-    "scripts": [ "lib/browser-polyfill.min.js", "background.js" ],
-    "persistent": true
+    "service_worker": "background.js",
+    "scripts": [ "background.js" ]
   },
   "homepage_url": "https://github.com/AprilSylph/Outbox-for-Tumblr#readme",
   "permissions": [
     "storage",
-    "webRequest",
+    "webRequest"
+  ],
+  "host_permissions": [
     "*://*.tumblr.com/*"
   ],
-  "optional_permissions": [
+  "optional_host_permissions": [
     "<all_urls>"
   ],
   "options_ui": {
     "page": "outbox.html",
     "open_in_tab": true
   },
 
-  "minimum_chrome_version": "80",
+  "minimum_chrome_version": "121",
   "browser_specific_settings": {
     "gecko": {
-      "strict_min_version": "74.0a1"
+      "id": "{ff20bd71-d65d-439f-b48a-c12627f3f2a3}",
+      "strict_min_version": "128.0"
     }
   }
 }

src/background.js

@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="lib/npf.css">
     <link rel="stylesheet" href="outbox.css">
     <link rel="stylesheet" href="https://assets.tumblr.com/fonts/favorit/stylesheet.css">
-    <script src="lib/browser-polyfill.min.js"></script>
     <script type="module" src="outbox.js"></script>
     <script type="module" src="lib/navigation.js"></script>
   </head>

src/lib/browser-polyfill.min.js

@@ -21,7 +21,7 @@ const onDeleteButtonClicked = ({ currentTarget }) => {
 
   const articleElement = currentTarget.closest('article');
   const { timestamp } = articleElement.dataset;
-  browser.storage.local.remove(timestamp);
+  chrome.storage.local.remove(timestamp);
 };
 
 const constructItem = ([timestamp, { recipient, recipientUrl, error, content, layout }]) => {
@@ -84,7 +84,7 @@ const constructItem = ([timestamp, { recipient, recipientUrl, error, content, la
 };
 
 const updateExportDownload = () => {
-  browser.storage.local.get()
+  chrome.storage.local.get()
     .then(storageObject => {
       const storageKeys = Object.keys(storageObject);
       mainElement.dataset.showLimitWarning = storageKeys.length >= 512;
@@ -151,15 +151,15 @@ const onImportInputChanged = async ({ currentTarget }) => {
     if (!keysAreValid) throw new Error('Imported data contains invalid keys.');
     if (!valuesAreValid) throw new Error('Imported data contains invalid values.');
 
-    await browser.storage.local.set(storageObject);
+    await chrome.storage.local.set(storageObject);
   } catch (exception) {
     window.alert(exception.toString());
   } finally {
     currentTarget.value = currentTarget.defaultValue;
   }
 };
 
-browser.storage.local.get()
+chrome.storage.local.get()
   .then(storageObject => Object.entries(storageObject).sort(([a], [b]) => a - b).reverse())
   .then(items => mainElement.append(...items.map(constructItem)))
   .catch(exception => {
@@ -171,7 +171,7 @@ browser.storage.local.get()
   })
   .finally(() => mainElement.setAttribute('aria-busy', false));
 
-browser.storage.onChanged.addListener(onStorageChanged);
+chrome.storage.onChanged.addListener(onStorageChanged);
 updateExportDownload();
 
 importInput.addEventListener('change', onImportInputChanged);