From efd00031617e52f5aa066592ebb3a9b6ed04e14e Mon Sep 17 00:00:00 2001 From: nachtjasmin Date: Wed, 5 Jul 2023 15:01:24 +0200 Subject: [PATCH] Remove the polyfill dependency It looks like that the polyfill is no longer required for Manifest v3. [^1] However, for a better developer experience, we keep the TypeScript definitions and use a little workaround for the global "browser" namespace. [^1]: https://github.com/mozilla/webextension-polyfill/issues/329 --- .eslintrc.yaml | 3 +-- package-lock.json | 15 +++++++-------- package.json | 4 +--- src/background/worker.js | 14 ++++++-------- src/browser-workaround.d.ts | 11 +++++++++++ src/libs/caching.js | 11 +++++------ src/libs/settings.js | 4 +--- src/options/options.js | 9 ++++----- 8 files changed, 36 insertions(+), 35 deletions(-) create mode 100644 src/browser-workaround.d.ts diff --git a/.eslintrc.yaml b/.eslintrc.yaml index 22312cb..3452962 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -1,7 +1,6 @@ env: browser: true - es2021: true - node: true + webextensions: true extends: - "eslint:recommended" diff --git a/package-lock.json b/package-lock.json index ce6c22c..317ffb4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,11 +5,9 @@ "packages": { "": { "name": "protoots", - "dependencies": { - "webextension-polyfill": "^0.10.0" - }, "devDependencies": { "@sprout2000/esbuild-copy-plugin": "1.1.8", + "@types/webextension-polyfill": "^0.10.1", "esbuild": "0.17.19", "eslint": "^8.42.0", "eslint-config-prettier": "^8.8.0", @@ -822,6 +820,12 @@ "integrity": "sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw==", "dev": true }, + "node_modules/@types/webextension-polyfill": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/@types/webextension-polyfill/-/webextension-polyfill-0.10.1.tgz", + "integrity": "sha512-Sdg+E2F5JUbhkE1qX15QUxpyhfMFKRGJqND9nb1C0gNN4NR7kCV31/1GvNbg6Xe+m/JElJ9/lG5kepMzjGPuQw==", + "dev": true + }, "node_modules/@types/yauzl": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz", @@ -6870,11 +6874,6 @@ "node": ">= 8" } }, - "node_modules/webextension-polyfill": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/webextension-polyfill/-/webextension-polyfill-0.10.0.tgz", - "integrity": "sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==" - }, "node_modules/webidl-conversions": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", diff --git a/package.json b/package.json index 0a062ac..e2763cd 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ }, "devDependencies": { "@sprout2000/esbuild-copy-plugin": "1.1.8", + "@types/webextension-polyfill": "^0.10.1", "esbuild": "0.17.19", "eslint": "^8.42.0", "eslint-config-prettier": "^8.8.0", @@ -27,8 +28,5 @@ }, "webExt": { "sourceDir": "dist/" - }, - "dependencies": { - "webextension-polyfill": "^0.10.0" } } diff --git a/src/background/worker.js b/src/background/worker.js index e3a96f6..1542e6b 100644 --- a/src/background/worker.js +++ b/src/background/worker.js @@ -1,14 +1,12 @@ -import { action, permissions, tabs } from "webextension-polyfill"; - -action.onClicked.addListener(async (tab) => { +browser.action.onClicked.addListener(async (tab) => { const u = new URL(tab.url); const perms = { origins: [`${u.origin}/*`] }; - const hasPermissions = await permissions.contains(perms); + const hasPermissions = await browser.permissions.contains(perms); if (!hasPermissions) { - await permissions.request(perms); - await tabs.reload(tab.id); + await browser.permissions.request(perms); + await browser.tabs.reload(tab.id); } - action.setPopup({ popup: "options/options.html" }); - action.setTitle({ title: "Configure ProToots" }); + browser.action.setPopup({ popup: "options/options.html" }); + browser.action.setTitle({ title: "Configure ProToots" }); }); diff --git a/src/browser-workaround.d.ts b/src/browser-workaround.d.ts new file mode 100644 index 0000000..c353009 --- /dev/null +++ b/src/browser-workaround.d.ts @@ -0,0 +1,11 @@ +// This file is used to have IntelliSense enabled automatically for the global "browser" namespace. + +import module = require("@types/webextension-polyfill"); +export = module; +export as namespace browser; + +declare global { + interface Window { + browser: typeof module; + } +} diff --git a/src/libs/caching.js b/src/libs/caching.js index e4f3689..818b2fc 100644 --- a/src/libs/caching.js +++ b/src/libs/caching.js @@ -1,5 +1,4 @@ import { debug, error } from "./logging"; -import { storage } from "webextension-polyfill"; /** * Appends an entry to the "pronounsCache" object in local storage. * @@ -7,9 +6,9 @@ import { storage } from "webextension-polyfill"; * @param {string} pronouns The pronouns to cache. */ export async function cachePronouns(account, pronouns) { - let cache = {}; + let cache = { pronounsCache: {} }; try { - cache = await storage.local.get(); + cache = await browser.storage.local.get(); } catch { // Ignore errors and use an empty object as fallback. cache = { pronounsCache: {} }; @@ -17,7 +16,7 @@ export async function cachePronouns(account, pronouns) { cache.pronounsCache[account] = { acct: account, timestamp: Date.now(), value: pronouns }; try { - await storage.local.set(cache); + await browser.storage.local.set(cache); debug(`${account} cached`); } catch (e) { error(`${account} could not been cached: `, e); @@ -28,10 +27,10 @@ export async function getPronouns() { const fallback = { pronounsCache: {} }; let cacheResult; try { - cacheResult = await storage.local.get(); + cacheResult = await browser.storage.local.get(); if (!cacheResult.pronounsCache) { //if result doesn't have "pronounsCache" create it - await storage.local.set(fallback); + await browser.storage.local.set(fallback); cacheResult = fallback; } } catch { diff --git a/src/libs/settings.js b/src/libs/settings.js index e8704c6..fd36436 100644 --- a/src/libs/settings.js +++ b/src/libs/settings.js @@ -1,10 +1,8 @@ -import { storage } from "webextension-polyfill"; - let settings; export async function getSettings() { try { - settings = await storage.sync.get(); + settings = await browser.storage.sync.get(); } catch { // Enable the logging automatically if we cannot determine the user preference. settings = {}; diff --git a/src/options/options.js b/src/options/options.js index 7e7446f..189be94 100644 --- a/src/options/options.js +++ b/src/options/options.js @@ -1,10 +1,9 @@ // @ts-nocheck -import { storage } from "webextension-polyfill"; import { error } from "../libs/logging"; function saveOptions(e) { e.preventDefault(); - storage.sync.set({ + browser.storage.sync.set({ logging: document.querySelector("#logging").checked, statusVisibility: document.querySelector("#status").checked, notificationVisibility: document.querySelector("#notification").checked, @@ -32,12 +31,12 @@ function restoreOptions() { error(`Error: ${err}`); } - const getting = storage.sync.get(); + const getting = browser.storage.sync.get(); getting.then(setCurrentChoice, onError); } async function defaultOptions() { - await storage.sync.set({ + await browser.storage.sync.set({ logging: false, statusVisibility: true, notificationVisibility: true, @@ -50,7 +49,7 @@ async function defaultOptions() { document.addEventListener("DOMContentLoaded", restoreOptions); document.querySelector("form").addEventListener("submit", saveOptions); document.querySelector("#resetbutton").addEventListener("click", async () => { - await storage.local.clear(); + await browser.storage.local.clear(); }); document.querySelector("#defaultSettings").addEventListener("click", async () => { await defaultOptions();