vite rollup-pluginでChrome拡張内のJSのみから参照されているイメージをどうするか

背景

vite+rollup-plugin-chrome-extensionを用いてChrome拡張を作っていた

拡張を作っていく中でJSのみから参照されるイメージ（SVG）がビルド後のディレクトリに含まれていないことに気付いて調べた

調査した結果

公式ドキュメントから

Untitled – Extend Chrome

What about the assets? Like images, icons, or CSS files?

HTMLに表示されているイメージは自動でweb_accessible_resourcesに追加されるのと配信用のディレクトリに自動でコピーされる

が、JSで呼び出しているものは別途プラグインが必要とのこと

調べてみると

typescript + vite + reactを使ったChrome拡張機能の土台を作って検証してみた

この中でrollup-plugin-copyを使用すればOKそう

ということで使ってみた

インストール

yarn add rollup-plugin-copy

vite.config.ts

 export default defineConfig({
-  plugins: [react(), chromeExtension({ manifest })],
+  plugins: [
+    react(),
+    chromeExtension({ manifest }),
+    copy({
+      verbose: true,
+      hook: 'writeBundle',
+      targets: [
+        {
+          src: 'images/sign_language_black_24dp.svg',
+          dest: 'dist/images'
+        }
+      ],
+    }),
+  ],
 });

上記でイメージの配信用ディレクトリへのコピーはできたがweb_accessible_resourcesには自動で設定が追加されなかった

完全にworkaroundだがビルド後にスクリプトを挟んでweb_accessible_resourcesに追加するという処理を追加した…

package.json

"build": "tsc && vite build && node script/patch_manifest.js",

script/patch_manifest.js

const fs = require('fs');

const manifest = JSON.parse(fs.readFileSync('dist/manifest.json'));
const resources = manifest.web_accessible_resources.map(item => item.resources).flat();

const patchedManifest = {
  ...manifest,
  web_accessible_resources: [
    {
      matches: [
        "<all_urls>"
      ],
      resources: [...resources, "images/sign_language_black_24dp.svg"],
      use_dynamic_url: true
    }
  ]
}

fs.writeFileSync('dist/manifest.json',JSON.stringify(patchedManifest, null, 2));

このworkaroundの処理自体が他の問題も解決しているが

今回のスコープで言うと

Chrome拡張のJSのみで参照されている”images/sign_language_black_24dp.svg”をweb_accessible_resourcesにも追加する

ということを行っている

これで無事Chrome拡張を動作させることが可能となった

背景

調査した結果

関連記事

Profile

Account

RSS