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

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 に登録

スクリーンショット 2020-07-28 1.55.46.png

実行

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

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

スクリーンショット 2020-07-28 2.02.58.png
スクリーンショット 2020-07-28 2.04.47.png

表示されたログから、 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

广告
将在 10 秒后关闭
bannerAds