add back webextension polyfill

Author: nobkd

bun.lock

@@ -6,6 +6,7 @@
       "dependencies": {
         "leaflet": "^1.9.4",
         "leaflet-fullscreen": "^1.0.2",
+        "webextension-polyfill": "^0.12.0",
       },
       "devDependencies": {
         "npm-run-all": "^4.1.5",
@@ -267,6 +268,8 @@
 
     "validate-npm-package-license": ["[email protected]", "", { "dependencies": { "spdx-correct": "^3.0.0", "spdx-expression-parse": "^3.0.0" } }, "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew=="],
 
+    "webextension-polyfill": ["[email protected]", "", {}, "sha512-97TBmpoWJEE+3nFBQ4VocyCdLKfw54rFaJ6EVQYLBCXqCIpLSZkwGgASpv4oPt9gdKCJ80RJlcmNzNn008Ag6Q=="],
+
     "which": ["[email protected]", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "which": "./bin/which" } }, "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ=="],
 
     "which-boxed-primitive": ["[email protected]", "", { "dependencies": { "is-bigint": "^1.1.0", "is-boolean-object": "^1.2.1", "is-number-object": "^1.1.1", "is-string": "^1.1.1", "is-symbol": "^1.1.1" } }, "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA=="],

package.json

@@ -28,7 +28,8 @@
   },
   "dependencies": {
     "leaflet": "^1.9.4",
-    "leaflet-fullscreen": "^1.0.2"
+    "leaflet-fullscreen": "^1.0.2",
+    "webextension-polyfill": "^0.12.0"
   },
   "release-it": {
     "git": {

src/bg/action.js

@@ -1,3 +1,5 @@
+import { tabs, browserAction, /*webNavigation*/ } from 'webextension-polyfill'
+
 import { getHostname, invertHostState } from './utils/storage.js'
 //import { matcher as mapsUrlMatcher, runtimeMapUrl } from './bg';
 
@@ -19,15 +21,15 @@ async function actionClick(tab) {
 
   /*
     // TODO: try to only reload necessary parts!!!
-    let frames = (await browser.webNavigation.getAllFrames({ tabId: tab.id })) ?? [];
+    let frames = (await webNavigation.getAllFrames({ tabId: tab.id })) ?? [];
 
     if (
         frames.some((frame) => {
             frame.url.match(replacedUrlMatcher) || frame.url.match(mapsUrlMatcher);
         })
     )
     */
-  browser.tabs.reload(tab.id, { bypassCache: true })
+  tabs.reload(tab.id, { bypassCache: true })
 }
 
-browser.browserAction.onClicked.addListener(actionClick)
+browserAction.onClicked.addListener(actionClick)

src/bg/bg.js

@@ -1,3 +1,5 @@
+import { runtime, webRequest, tabs, windows } from 'webextension-polyfill'
+
 import { disabledHosts, getHostname } from './utils/storage.js'
 import { updateActiveTabIcon } from './utils/actionIcon.js'
 import domainEnds from './utils/domainEnds.json' with { type: 'json' }
@@ -7,7 +9,7 @@ export const matcher = new RegExp(
   // TODO: fix regex to fit more patterns
   `^(https?:\/\/)?(maps\.google\.(${gLocales})\/maps.*\?.*output=embed|(www\.)?google\.(${gLocales})\/maps\/embed.*\?)`
 )
-export const runtimeMapUrl = browser.runtime.getURL('map.html')
+export const runtimeMapUrl = runtime.getURL('map.html')
 
 /**
  * Checks if `frames` send a request to Maps.
@@ -29,7 +31,7 @@ function redirect(req) {
 }
 
 // Listens to web requests from frames, redirects when fitting `matcher`
-browser.webRequest.onBeforeRequest.addListener(
+webRequest.onBeforeRequest.addListener(
   redirect,
   {
     urls: ['<all_urls>'],
@@ -39,13 +41,13 @@ browser.webRequest.onBeforeRequest.addListener(
 )
 
 // listen to tab URL changes
-browser.tabs.onUpdated.addListener(updateActiveTabIcon)
+tabs.onUpdated.addListener(updateActiveTabIcon)
 
 // listen to tab switching
-browser.tabs.onActivated.addListener(updateActiveTabIcon)
+tabs.onActivated.addListener(updateActiveTabIcon)
 
 // listen for window switching
-browser.windows.onFocusChanged.addListener(updateActiveTabIcon)
+windows.onFocusChanged.addListener(updateActiveTabIcon)
 
 // update icon at startup
 updateActiveTabIcon()

src/bg/utils/actionIcon.js

@@ -1,3 +1,5 @@
+import { browserAction, tabs } from 'webextension-polyfill'
+
 import { disabledHosts, getHostname } from './storage.js'
 
 /**
@@ -7,7 +9,7 @@ import { disabledHosts, getHostname } from './storage.js'
 export function updateIcon(hostname) {
   let disabled = disabledHosts.includes(hostname)
 
-  browser.browserAction.setIcon({
+  browserAction.setIcon({
     path: !disabled ? {
       48: '/icons/48-icon.png',
       96: '/icons/96-icon.png',
@@ -22,7 +24,7 @@ export function updateIcon(hostname) {
  * Async function to update the icon of the currently active tab. Uses `updateIcon` internally
  */
 export async function updateActiveTabIcon() {
-  let browserTabs = await browser.tabs.query({ active: true, currentWindow: true })
+  let browserTabs = await tabs.query({ active: true, currentWindow: true })
 
   let tab = browserTabs[0]
   if (tab && tab.url) {

src/bg/utils/storage.js

@@ -1,11 +1,13 @@
+import { storage } from 'webextension-polyfill'
+
 import { updateIcon } from './actionIcon.js'
 
 export const KEY_DISABLED_HOSTS = 'disabled_hosts'
 
 // Listens to changes on the storage. Updates disabled hosts list, if stored list changes
 /** @type {string[]} */
 export let disabledHosts = await getDisabledHosts()
-browser.storage.local.onChanged.addListener((changes) => {
+storage.local.onChanged.addListener((changes) => {
   if (KEY_DISABLED_HOSTS in changes) {
     disabledHosts = changes[KEY_DISABLED_HOSTS].newValue ?? []
   }
@@ -16,7 +18,7 @@ browser.storage.local.onChanged.addListener((changes) => {
  * @returns {Promise<string[]>} List of disabled hostnames
  */
 async function getDisabledHosts() {
-  return (await browser.storage.local.get(KEY_DISABLED_HOSTS))[KEY_DISABLED_HOSTS] ?? []
+  return (await storage.local.get(KEY_DISABLED_HOSTS))[KEY_DISABLED_HOSTS] ?? []
 }
 
 /**
@@ -31,7 +33,7 @@ export async function invertHostState(hostname) {
     disabledHosts.push(hostname)
   }
 
-  await browser.storage.local.set({
+  await storage.local.set({
     [KEY_DISABLED_HOSTS]: disabledHosts,
   })
 

src/options/options.js

@@ -1,3 +1,5 @@
+import { storage } from 'webextension-polyfill'
+
 import {
   KEY_DISABLED_HOSTS,
   disabledHosts,
@@ -78,7 +80,7 @@ function getIndex(button) {
   return index
 }
 
-browser.storage.local.onChanged.addListener((changes) => {
+storage.local.onChanged.addListener((changes) => {
   if (KEY_DISABLED_HOSTS in changes) {
     buildEntries()
   }