Investigate @samrum/vite-plugin-web-extension

[vintprox]

https://github.com/samrum/vite-plugin-web-extension

I think it's a good starting point for compatible and lean Web Extension development.

[vintprox]

Vite is using Rollup bundler under the hood and has better DX than Webpack.

[vintprox]

Installation looks good to me.

$ npm init @samrum/vite-plugin-web-extension@latest

@samrum/create-vite-plugin-web-extension

✔ Project name: … drhgsim
✔ Manifest version: › Manifest V2 & v3
✔ Framework: › Svelte
✔ Add TypeScript? › Yes

Scaffolding project in /home/vintprox/drhgsim...

Done. Now run:

  cd drhgsim
  npm install
  npm run build
  npm run serve:chrome

Refer to the README.md file in your project for more usage notes

I would really love the combination of Svelte and TypeScript in here.

[vintprox]

Results of vulnerability audit:

$ npm audit
# npm audit report

async  <2.6.4
Severity: high
Prototype Pollution in async - https://github.com/advisories/GHSA-fwr7-v2mv-hh25
fix available via `npm audit fix --force`
Will install web-ext@5.1.0, which is a breaking change
node_modules/async
  @devicefarmer/adbkit-monkey  *
  Depends on vulnerable versions of async
  node_modules/@devicefarmer/adbkit-monkey
    @devicefarmer/adbkit  *
    Depends on vulnerable versions of @devicefarmer/adbkit-monkey
    Depends on vulnerable versions of node-forge
    node_modules/@devicefarmer/adbkit
      web-ext  >=5.2.0
      Depends on vulnerable versions of @devicefarmer/adbkit
      node_modules/web-ext

node-forge  <=1.2.1
Severity: high
Open Redirect in node-forge - https://github.com/advisories/GHSA-8fr3-hfg3-gpgp
Prototype Pollution in node-forge debug API. - https://github.com/advisories/GHSA-5rrq-pxf6-6jx5
URL parsing in node-forge could lead to undesired behavior. - https://github.com/advisories/GHSA-gf8q-jrpm-jvxq
Improper Verification of Cryptographic Signature in `node-forge` - https://github.com/advisories/GHSA-2r2c-g63r-vccr
Improper Verification of Cryptographic Signature in node-forge - https://github.com/advisories/GHSA-x4jg-mjrx-434g
Improper Verification of Cryptographic Signature in node-forge - https://github.com/advisories/GHSA-cfm4-qjh2-4765
fix available via `npm audit fix --force`
Will install web-ext@5.1.0, which is a breaking change
node_modules/node-forge

5 vulnerabilities (1 moderate, 4 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

2 packages here are installed through the outdated dependency chain. Here's the tree of things depending on old versions of async and node-forge:

$ npm list async
vite-web-extension@1.0.0 /home/vintprox/rep/drhgsim
└─┬ web-ext@6.8.0
  ├─┬ @devicefarmer/adbkit@2.11.3
  │ └─┬ @devicefarmer/adbkit-monkey@1.0.1
  │   └── async@0.2.10
  └─┬ zip-dir@2.0.0
    └── async@3.2.3

$ npm list node-forge
vite-web-extension@1.0.0 /home/vintprox/rep/drhgsim
└─┬ web-ext@6.8.0
  └─┬ @devicefarmer/adbkit@2.11.3
    └── node-forge@0.10.0

The deal breaker here may be topmost dependency called web-ext. However, the scope of problem is narrow enough to leave it as-is. It's because everything is branching from @devicefarmer/adbkit, which is:

A pure Node.js client for the Android Debug Bridge.

So, it can be safely ignored.

[vintprox]

npm run dev command can be used to continuously watch for changes, build various pages, and host them on local HTTP server.

npm run watch command is almost the same, with an exception that content scripts work in full capacity, and it doesn't require hosting on localhost - web extension file protocol is used instead.

serve:firefox and serve:chrome npm scripts can be used to implant the built extension into the new instance of browser.

You basically need to run these both in two separate terminals:

$ npm run watch

$ npm run serve:firefox

[vintprox]

It seems to support "Manifest V2 & V3" hybrid mode (broader browser support). So far,it proved to be type-safe.

[vintprox]

Directory structure of the boilerplate:

+ drhgsim 🗨 Root project directory
|
|-+ dist 🗨 Extension's files after build, ready to be supplied to the browser
|
|-+ public 🗨 Public static files
| |
| |-+ icons 🗨 Icons for web extension
|
|-+ src 🗨 Source code directory
| |
| |-+ assets 🗨 Integral resources
| |
| |-+ entries 🗨 Entry points for web extension, linked via manifest
| | |
| | |-+ background 🗨 Background script
| | |
| | |-+ contentScript 🗨 Content script that's injected into websites we visit
| | |
| | |-+ options 🗨 Options page
| | |
| | |-+ popup 🗨 Popup in address bar menu
| |
| |-+ lib 🗨 Common components used in extension