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]: mozilla/webextension-polyfill#329

.eslintrc.yaml

@@ -1,7 +1,6 @@
 env:
   browser: true
-  es2021: true
-  node: true
+  webextensions: true
 
 extends:
   - "eslint:recommended"

jsconfig.json

@@ -4,5 +4,5 @@
 		"target": "ESNext",
 		"checkJs": true
 	},
-	"include": ["src/**/*.js"]
+	"include": ["src/**/*.js", "src/**/*.ts"]
 }

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"
 	}
 }

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" });
 });

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;
+	}
+}

src/libs/caching.js

@@ -1,23 +1,22 @@
 import { debug, error } from "./logging";
-import { storage } from "webextension-polyfill";
 /**
  * Appends an entry to the "pronounsCache" object in local storage.
  *
  * @param {string} account The account ID
  * @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: {} };
 	}
 
 	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 {

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 = {};

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();