chrome拡張スターターのwebextension-toolboxの設定メモ

※2025年はすでに非推奨 デフォルトでマニュフェストがv2でだるいので止めたほうがいいと思った。

概要

github.com

これを使うと、chrome拡張機能の雛形を生成してくれる。

そのときの設定のつまずきポイントをメモした。

設定のつまづきポイント

1. vendor指定忘れがち
2. app/ディレクトリ作り忘れる(私が設定ミスっただけかもしれない)
3. TypeScriptでかける用意する
4. manifestをv2 からv3に対応

vendor指定忘れがち

  "scripts": {
    "dev": "webextension-toolbox dev chrome",
    "build": "webextension-toolbox build chrome"
  },

manifest.jsonがないと言われる。

エラー内容

> webextension-toolbox dev chrome
/node_modules/webextension-toolbox/src/utils/get-extension-info.js:22
    throw new Error('You need to provide a valid \'manifest.json\'')
    ^

Error: You need to provide a valid 'manifest.json'

よくわからないため、Errorがもっと出るように、

node_modules/webextension-toolbox/src/utils/get-extension-info.js:22

を開いてエラーが出るようにする。

Error: Error: Cannot find module 'app/manifest.json'

解決策

app/を作った。

typescriptを入れる

webextension-toolbox/webextension-toolbox: Small CLI toolbox for cross-browser WebExtension development

manifest.json v3対応

  "background" [1]: {
    "service_worker": "scripts/background.js"
  }
}

[1] "background" must contain at least one of [scripts, page]
    at Object.validate

ということで、manifest v2のバリデーションがかかっている。

issueを見た。

github.com

ということで、対応されているはず。

一旦、package.jsonの中身を変更した。

  "devDependencies": {
    "webextension-toolbox": "github:webextension-toolbox/webextension-toolbox#main"
  }

すると、

> webextension-toolbox dev chrome

node:internal/modules/esm/resolve:265
    throw new ERR_MODULE_NOT_FOUND(
          ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 

となった。

node_modules配下の`webextension-toolbox/dist/がないのでだめっぽかった。

ということで、　cdして、npm run buildした。

結果

build通った。