Add webextension-polyfill

Add webextension-polyfill [1]. This polyfill allows using the standard
Promise-based WebExtension API on Google Chrome.

[1] https://github.com/mozilla/webextension-polyfill

Author: msmolens

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
+### Added
+- Add webextension-polyfill.
 
 ## [1.2.0] - 2021-09-18
 ### Added

README.md

@@ -71,6 +71,7 @@ npm install
 - [ESLint](https://eslint.org/): Static analyzer.
 - [Prettier](https://prettier.io/): Code formatter.
 - [web-ext](https://github.com/mozilla/web-ext): Command line tool for web extensions.
+- [webextension-polyfill](https://github.com/mozilla/webextension-polyfill): WebExtension `browser` API polyfill.
 
 #### Testing
 - [Jest](https://jestjs.io/): Testing framework.

attributions.txt

@@ -36,9 +36,9 @@
     "@testing-library/user-event": "^13.2.1",
     "@tsconfig/svelte": "^2.0.1",
     "@types/faker": "^5.5.8",
-    "@types/firefox-webext-browser": "^82.0.1",
     "@types/jest": "^27.0.1",
     "@types/lodash-es": "^4.17.5",
+    "@types/webextension-polyfill": "^0.8.0",
     "@typescript-eslint/eslint-plugin": "^4.31.0",
     "@typescript-eslint/parser": "^4.31.0",
     "babel-jest": "^27.1.1",
@@ -47,11 +47,10 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-svelte3": "^3.2.1",
     "faker": "^5.5.3",
-    "install": "^0.13.0",
     "jest": "^27.1.1",
     "lodash-es": "^4.17.21",
-    "mockzilla": "^0.9.0",
-    "mockzilla-webextension": "^0.9.0",
+    "mockzilla": "^0.12.0",
+    "mockzilla-webextension": "^0.13.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-url": "^10.1.3",
@@ -70,7 +69,7 @@
     "ts-jest": "^27.0.5",
     "tslib": "^2.3.1",
     "typescript": "^4.1.6",
-    "webextension-polyfill-ts": "^0.26.0"
+    "webextension-polyfill": "^0.8.0"
   },
   "dependencies": {},
   "webExt": {

package-lock.json

@@ -66,7 +66,6 @@ export default [{
       title: 'Treetop'
     }),
   ],
-  external: ['firefox-webext-browser']
 }, {
   input: 'src/options/main.ts',
   output: {
@@ -159,5 +158,4 @@ export default [{
       verbose: true
     })
   ],
-  external: ['firefox-webext-browser']
 }];

package.json

@@ -1,4 +1,4 @@
-import { browser } from 'webextension-polyfill-ts';
+import browser from 'webextension-polyfill';
 
 import { createContextMenus } from './menus';
 import { openTreetop, openWelcome } from './open';

rollup.config.js

@@ -1,4 +1,4 @@
-import { browser } from 'webextension-polyfill-ts';
+import browser, { Menus } from 'webextension-polyfill';
 
 /**
  * Create context menus.
@@ -9,7 +9,7 @@ export const createContextMenus = (): void => {
   const origin = browser.runtime.getURL('');
 
   const commonMenuParams: {
-    contexts: browser.menus.ContextType[];
+    contexts: Menus.ContextType[];
     documentUrlPatterns: string[];
   } = {
     contexts: ['link'],

src/background_script/init.ts

@@ -1,12 +1,12 @@
-import { browser } from 'webextension-polyfill-ts';
+import browser, { Action, Runtime, Tabs } from 'webextension-polyfill';
 
 /**
  * Open the welcome page when the extension is installed.
  */
 export const openWelcome = ({
   reason,
   temporary,
-}: browser.runtime._OnInstalledDetails): void => {
+}: Runtime.OnInstalledDetailsType): void => {
   if (temporary || reason !== 'install') {
     return;
   }
@@ -29,15 +29,15 @@ export const openWelcome = ({
  *     Shift: Open in new tab
  */
 export const openTreetop = (
-  _tab: browser.tabs.Tab,
-  info: browser.browserAction.OnClickData | undefined
+  _tab: Tabs.Tab,
+  info: Action.OnClickData | undefined
 ): void => {
   if (!info) {
     return;
   }
 
   const url = browser.runtime.getURL('treetop.html');
-  const params: browser.tabs._CreateCreateProperties = { url };
+  const params: Tabs.CreateCreatePropertiesType = { url };
 
   const ctrl =
     info.modifiers.includes('Ctrl') || info.modifiers.includes('Command');

src/background_script/menus.ts

@@ -1,4 +1,4 @@
-import { browser } from 'webextension-polyfill-ts';
+import browser from 'webextension-polyfill';
 
 /**
  * Set default options.