DenoでChrome拡張機能のプロジェクトテンプレートを作りました

Denoを使ったChrome拡張機能のプロジェクトテンプレートを作成したので紹介です。

概ね次のようなことが達成できています。

• denoツール以外の依存関係無し。
• Manifest V3
• Typescriptサポート
• 主要なグローバル変数の型安全サポート
• Javascriptファイルへのビルド
• VSCodeの設定諸々

かなり簡素ですが、必要最低限は揃っていると思います。

前提

Deno:v1.29.1で動作確認しています。

え？Denoをまだ入れていない？
こちらから秒でインストールできますよ！
https://deno.land/manual@v1.29.1/getting_started/installation

ビルド方法

deno task build

アウトプット先は/distにしています。このファイルをchromeで読み込んでください。

ビルドにはこんなスクリプトを用意しました。

deno.jsonc

{
  "tasks": {
    "build": "rm -rf ./dist/ && cp -r ./public ./dist && deno bundle ./src/content.ts ./dist/content.js & deno bundle ./src/background.ts ./dist/background.js"
  }
}

処理ごとに分解するとこんな感じです

rm -rf ./dist/ # distディレクトリリセット
cp -r ./public ./dist # public内容をdistにコピー
deno bundle ./src/content.ts ./dist/content.js # content.tsをcontent.jsにバンドル
deno bundle ./src/background.ts ./dist/background.js # background.tsをbackground.jsにバンドル

chrome extensionの最小構成はmanifest.jsonとjsファイルがあれば良いので、jsファイルをdeno bundleで作ります。

主要なグローバル変数の型安全サポート

主に以下のグローバル変数の型安全が効くようになっています。

• chrome
• DocumentやElement等のWeb標準型

型の設定はこちらに定義しています。

deno.jsonc

{
  "compilerOptions" :  {
    "lib": [ "dom" ,  "dom.iterable" ,  "dom.asynciterable" ,  "deno.ns" ],
    "types": [
      "https://unpkg.com/chrome-types@0.1.153/index.d.ts"
    ]
  }
}

libで指定しているのはdenoの標準ライブラリです。DOM等は標準でサポートされています。
chromeはnpmのchrome-typesを利用しています。
なので本来ならnpm:chrome-typesで型解決できるはずなのですが、残念ながらdeno bundleはまだnpmに対応していないようです。
今回見つけたnpm参照の回避策は urlでコードがそのまま参照できる https://unpkg.com を利用しました。
この手は他でも使えそうです。

VSCode設定

別途deno拡張も必要です。

以下の設定を有効にしてあります。

• Deno有効化
• Lint有効化
• フォーマット自動保存有効化

設定ファイルはこんな感じです。

.vscode\settings.json

{
  "deno.enable": true,
  "deno.lint": true,
  "editor.formatOnSave": true,
  "[typescript]": { "editor.defaultFormatter": "denoland.vscode-deno" }
}

フォーマットの設定はこちら

deno.jsonc

{
  "fmt": {
    "files": {
      "include": ["src/"],
      "exclude": ["src/testdata/"]
    },
    "options": {
      "useTabs": false,
      "lineWidth": 80,
      "indentWidth": 2,
      "singleQuote": true,
      "proseWrap": "always"
    }
  }
}

直近の不満点・改善点

• ビルドファイルのマッピングが分かりづらい
• フロント周りのサポートが無い

まだまだたたき台程度なので改善点はもっと出ると思いますが、気になるところは適宜改善していきます。