Switch to webextension polyfill

2025-12-18 18:12:42 +00:00
parent 69e97ae211
commit f3799ccafd
5 changed files with 81 additions and 94 deletions
--- a/README.md
+++ b/README.md
@@ -1,21 +1,24 @@
 <div align="center">
 <img width="128" src="/src/assets/img/logo.svg" alt="logo"/>
-<h1> Chrome Extension Boilerplate with<br/>SolidJS + Vite + TypeScript + Manifest V3 + Hot Relaod</h1>
+<h1> WebExtension Boilerplate with<br/>SolidJS + Vite + TypeScript + Manifest V3 + Hot Reload</h1>

 ![](https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=typescript&logoColor=white)
 ![](https://badges.aleen42.com/src/vitejs.svg)
+
 <!-- ![GitHub action badge](https://github.com/fuyutarow/solid-chrome-extension-template/actions/workflows/build.yml/badge.svg) -->

 <!-- > This project is listed in the [Awesome Vite](https://github.com/vitejs/awesome-vite) -->

 </div>

-
 ## Intro <a name="intro"></a>
-This boilerplate is made for creating chrome extensions using SolidJS and Typescript.
+
+This boilerplate is made for creating web extensions using SolidJS and Typescript.
+
 > The focus was on improving the build speed and development experience with Vite.

 ## Features <a name="features"></a>
+
 - [SolidJS](https://www.solidjs.com/)
 - [TypeScript](https://www.typescriptlang.org/)
 - [Jest](https://jestjs.io/)
@@ -23,31 +26,32 @@ This boilerplate is made for creating chrome extensions using SolidJS and Typesc
 - [SASS](https://sass-lang.com/)
 - [ESLint](https://eslint.org/)
 - [Prettier](https://prettier.io/)
- [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)
+- [WebExtension Manifest Version 3](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Manifest_v3)
 - Hot Reload (Live reload)

 ## Installation <a name="installation"></a>

 ### Procedures <a name="procedures"></a>
+
 1. Clone this repository.
-2. Change `name` and `description` in package.json => **Auto synchronize with manifest** 
+2. Change `name` and `description` in package.json => **Auto synchronize with manifest**
 3. Run `yarn` or `npm i` (check your node version >= 16)
 4. Run `yarn dev` or `npm run dev`
-5. Load Extension on Chrome
-   1. Open - Chrome browser
-   2. Access - chrome://extensions
+5. Load Extension on your browser
+   1. Open - Chrome/Firefox/Edge browser
+   2. Access - chrome://extensions (Chrome/Edge) or about:debugging (Firefox)
   3. Check - Developer mode
   4. Find - Load unpacked extension
   5. Select - `dist` folder in this project (after dev or build)
 6. If you want to build in production, Just run `yarn build` or `npm run build`.

 ## Screenshots <a name="screenshots"></a>
+
 <img width="957" alt="image" src="https://user-images.githubusercontent.com/14998939/182227580-31e390cd-386b-426a-adba-e8a31a2f303d.png">

-
 ## Documents <a name="documents"></a>
+
 - [Vite Plugin](https://vitejs.dev/guide/api-plugin.html)
- [ChromeExtension](https://developer.chrome.com/docs/extensions/mv3/)
+- [WebExtensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
 - [Rollup](https://rollupjs.org/guide/en/)
 - [Rollup-plugin-chrome-extension](https://www.extend-chrome.dev/rollup-plugin)
-
--- a/package.json
+++ b/package.json
@@ -1,54 +1,54 @@
 {
-    "name": "solid-chrome-extension-template",
-    "displayName": "Solid Chrome Extension Template",
-    "version": "0.202212.1",
-    "description": "Chrome Extension boilerplate with SolidJS + Vite + ManifestV3",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/fuyutarow/solid-chrome-extension-template.git"
-    },
-    "scripts": {
-        "dev": "vite build -w",
-        "build": "vite build",
-        "lint": "eslint . --fix -c .eslintrc --ext js,ts --ignore-pattern='!.*'",
-        "dev:nodemon": "nodemon",
-        "build:noemit": "tsc --noEmit && vite build",
-        "test": "jest"
-    },
-    "type": "module",
-    "dependencies": {
-        "solid-js": "^1.6.2"
-    },
-    "devDependencies": {
-        "@crxjs/vite-plugin": "2.0.0-beta.7",
-        "@types/chrome": "0.0.203",
-        "@types/jest": "^29.2.3",
-        "@types/node": "18.11.10",
-        "@typescript-eslint/eslint-plugin": "5.45.0",
-        "@typescript-eslint/parser": "5.45.0",
-        "autoprefixer": "^10.4.13",
-        "babel-preset-solid": "^1.6.2",
-        "eslint": "8.29.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsx-a11y": "6.6.1",
-        "eslint-plugin-prettier": "4.2.1",
-        "eslint-plugin-solid": "^0.9.1",
-        "eslint-plugin-tailwindcss": "^3.7.1",
-        "fs-extra": "11.1.0",
-        "jest": "^29.3.1",
-        "jest-environment-jsdom": "^29.3.1",
-        "nodemon": "2.0.20",
-        "postcss": "^8.4.19",
-        "prettier": "2.8.0",
-        "sass": "1.56.1",
-        "ts-jest": "^29.0.3",
-        "ts-loader": "9.4.2",
-        "ts-node": "10.9.1",
-        "typescript": "4.9.3",
-        "vite": "3.2.4",
-        "vite-plugin-solid": "^2.4.0",
-        "vite-plugin-windicss": "^1.8.8"
-    }
-}
+  "name": "solid-webextension-template",
+  "displayName": "Solid WebExtension Template",
+  "version": "0.202212.1",
+  "description": "WebExtension boilerplate with SolidJS + Vite + ManifestV3",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fuyutarow/solid-chrome-extension-template.git"
+  },
+  "scripts": {
+    "dev": "vite build -w",
+    "build": "vite build",
+    "lint": "eslint . --fix -c .eslintrc --ext js,ts --ignore-pattern='!.*'",
+    "dev:nodemon": "nodemon",
+    "build:noemit": "tsc --noEmit && vite build",
+    "test": "jest"
+  },
+  "type": "module",
+  "dependencies": {
+    "solid-js": "^1.6.2"
+  },
+  "devDependencies": {
+    "@crxjs/vite-plugin": "2.0.0-beta.7",
+    "webextension-polyfill": "^0.10.0",
+    "@types/jest": "^29.2.3",
+    "@types/node": "18.11.10",
+    "@typescript-eslint/eslint-plugin": "5.45.0",
+    "@typescript-eslint/parser": "5.45.0",
+    "autoprefixer": "^10.4.13",
+    "babel-preset-solid": "^1.6.2",
+    "eslint": "8.29.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-solid": "^0.9.1",
+    "eslint-plugin-tailwindcss": "^3.7.1",
+    "fs-extra": "11.1.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "nodemon": "2.0.20",
+    "postcss": "^8.4.19",
+    "prettier": "2.8.0",
+    "sass": "1.56.1",
+    "ts-jest": "^29.0.3",
+    "ts-loader": "9.4.2",
+    "ts-node": "10.9.1",
+    "typescript": "4.9.3",
+    "vite": "3.2.4",
+    "vite-plugin-solid": "^2.4.0",
+    "vite-plugin-windicss": "^1.8.8"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,9 +15,6 @@ importers:
      '@crxjs/vite-plugin':
        specifier: 2.0.0-beta.7
        version: 2.0.0-beta.7
-      '@types/chrome':
-        specifier: 0.0.203
-        version: 0.0.203
      '@types/jest':
        specifier: ^29.2.3
        version: 29.5.14
@@ -99,6 +96,9 @@ importers:
      vite-plugin-windicss:
        specifier: ^1.8.8
        version: 1.9.4(vite@3.2.4(@types/node@18.11.10)(sass@1.56.1)(terser@5.44.1))
+      webextension-polyfill:
+        specifier: ^0.10.0
+        version: 0.10.0

 packages:

@@ -481,9 +481,6 @@ packages:
  '@types/babel__traverse@7.28.0':
    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}

-  '@types/chrome@0.0.203':
-    resolution: {integrity: sha512-JlQNebwpBETVc8U1Rr2inDFuOTtn0lahRAhnddx1dd0S5RrLAFJEEsyIu7AXI14mkCgSunksnuLGioH8kvBqRA==}
-
  '@types/eslint-scope@3.7.7':
    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}

@@ -493,18 +490,9 @@ packages:
  '@types/estree@1.0.8':
    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}

-  '@types/filesystem@0.0.36':
-    resolution: {integrity: sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA==}
-
-  '@types/filewriter@0.0.33':
-    resolution: {integrity: sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g==}
-
  '@types/graceful-fs@4.1.9':
    resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}

-  '@types/har-format@1.2.16':
-    resolution: {integrity: sha512-fluxdy7ryD3MV6h8pTfTYpy/xQzCFC7m89nOH9y94cNqJ1mDIDPut7MnRHI3F6qRmh/cT2fUjG1MLdCNb4hE9A==}
-
  '@types/istanbul-lib-coverage@2.0.6':
    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}

@@ -3142,6 +3130,9 @@ packages:
    resolution: {integrity: sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==}
    engines: {node: '>=10.13.0'}

+  webextension-polyfill@0.10.0:
+    resolution: {integrity: sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==}
+
  webidl-conversions@7.0.0:
    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
    engines: {node: '>=12'}
@@ -3793,11 +3784,6 @@ snapshots:
    dependencies:
      '@babel/types': 7.28.5

-  '@types/chrome@0.0.203':
-    dependencies:
-      '@types/filesystem': 0.0.36
-      '@types/har-format': 1.2.16
-
  '@types/eslint-scope@3.7.7':
    dependencies:
      '@types/eslint': 9.6.1
@@ -3810,18 +3796,10 @@ snapshots:

  '@types/estree@1.0.8': {}

-  '@types/filesystem@0.0.36':
-    dependencies:
-      '@types/filewriter': 0.0.33
-
-  '@types/filewriter@0.0.33': {}
-
  '@types/graceful-fs@4.1.9':
    dependencies:
      '@types/node': 18.11.10

-  '@types/har-format@1.2.16': {}
-
  '@types/istanbul-lib-coverage@2.0.6': {}

  '@types/istanbul-lib-report@3.0.3':
@@ -6869,6 +6847,8 @@ snapshots:
      glob-to-regexp: 0.4.1
      graceful-fs: 4.2.11

+  webextension-polyfill@0.10.0: {}
+
  webidl-conversions@7.0.0: {}

  webpack-sources@3.3.3: {}
--- a/src/pages/content/components/Demo/app.tsx
+++ b/src/pages/content/components/Demo/app.tsx
@@ -1,6 +1,7 @@
 import logo from "@src/assets/img/logo.svg";
 import "@src/styles/index.css";
 import styles from "./App.module.css";
+import browser from "webextension-polyfill";

 const App = () => {
  return (
@@ -8,7 +9,7 @@ const App = () => {
      <div class={styles.App}>
        <header class={styles.header}>
          <img
-            src={chrome.runtime.getURL(logo)}
+            src={browser.runtime.getURL(logo)}
            class={styles.logo}
            alt="logo"
          />
--- a/src/pages/devtools/index.ts
+++ b/src/pages/devtools/index.ts
@@ -1,5 +1,7 @@
+import browser from "webextension-polyfill";
+
 try {
-  chrome.devtools.panels.create(
+  browser.devtools.panels.create(
    "Dev Tools",
    "icon-34.png",
    "src/pages/panel/index.html"