Chrome ExtensionのbackgroundからWebAssemblyを呼び出す

ソース付き最小構成の記事が見当たらなかったので追加。

chrome拡張の background 内から WebAssembly を実行するサンプルを纏めました。

githubはコチラ

フォルダ構成

execwasm
 └ src
   └ crate    // rust
     └ src
       └ lib.rs
       └ utils.rs
     └ Cargo．toml
   └ img
     └ kani_128.png
   └ js
     └ background.html
   └ manifest.json
 └ package.json
 └ webpack.config.js

使い方

ビルド

 $ npm install
 $ npm run build

ビルドすると、 dist フォルダが生成され、フォルダ内に chrome拡張機能インストール時に必要な manifest.json が格納されています。

Chrome Extension に登録

Chromeのメニューから [その他のツール] > [拡張機能]　を選択し、Chromeをデベロッパーモードに切り替えてから、 パッケージ化されていない拡張機能を読み込む ボタンを押してフォルダ dist を選択すれば、インストール完了です。

実行

インスールした直後に、自動的に background.js が実行され、そこから rust lib.rs の関数 greet() が呼び出されます。

src/crate/src/lib.rs

#[wasm_bindgen]
pub fn greet() -> String {
    alert("Hello, from Rust!");
    "from_Rust!".to_string()
}

まず、インストール直後に、alert() が実行され、ポップアップが表示されたと思います。

次に、「background.html」をクリックし、 console でログを見てみましょう。

表示されたログから、 background.js で、 Rust-api greet() を呼出し、戻値を受け取り表示している事が確認出来ます。

※ rust ソースコード lib.rs の関数 greet() の最終行 "from_Rust!".to_string() が関数の戻り値（ String 型）です。

ポイント

webpack で @wasm-tool/wasm-pack-plugin を使用している為、 npm run build コマンド一発で rust のビルドも自動的に行われます。
manifest には、 "content_security_policy" の設定が必要です。これを定義する事で、background で実行できる様になります。

その他

参考サイト
https://stackoverflow.com/questions/48523118/wasm-module-compile-error-in-chrome-extension