Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using WebAssembly in chrome extension

I have a chrome extension that includes a complicated function comp_func(data) which takes a lot of CPU by performing many bitwise operations. Because of that, I'm trying to use WebAssembly.

I've tried to follow several tutorials, for example this one and this one.

The first link says:

fetch('simple.wasm').then(response =>   response.arrayBuffer() ).then(bytes =>   WebAssembly.instantiate(bytes, importObject) ).then(results => {   results.instance.exports.exported_func(); }); 

but I get an error:

Uncaught (in promise) TypeError: WebAssembly Instantiation: Import #0 module="env" error: module is not an object or function

I've tried a lot to use this approach, but it didn't work. I can't understand how to use WebAssembly that is loaded from the .wasm file.

So I've tried an easier approach: The second link says to put this line in the html file:

<script src="index.js"></script> 

and then just use the exported function:

var result = _roll_dice(); 

BUT, I'm in an extension so I only have a background.html file. So I'm looking for a way to access the Module which was loaded in the background file. And things get complicated, because the function comp_func(data) is called from a Worker.

This is what I've tried so far:

If I call chrome.extension.getBackgroundPage() I can access the Module but I can't send it to the Worker:

Failed to execute 'postMessage' on 'Worker': # could not be cloned.

And if I try to stringify it first:

Uncaught TypeError: Converting circular structure to JSON

(I tried to un-circular it, didn't work...)

And I can't call chrome.extension.getBackgroundPage() from the Worker because I can't access chrome API from there.

So my questions are:

  1. Did someone try to load .wasm file in chrome extension and succeed? The second approach (loading the js file) sounds simpler but if you have a working example for this approach it would be great.

or 2. How to access the Module that has been loaded in background.html (from the second example)?

or 3. How to pass the functions that I needed from the js file to the Worker (via postMessage)?

To summarize, did someone try to use WebAssembly in a chrome extension and survive to tell?

EDIT: I eventually left the approach of WebAssembly. I also posted this question at bugs-chromium, and after few month got an answer. Not sure if this is really working, but maybe this, along with the marked answer, will help someone.

like image 363
nogmos Avatar asked Apr 02 '18 12:04

nogmos


People also ask

How do I enable Wasm in Chrome?

Google Chrome Web Assembly is not supported by Chrome browser version 51 to 60 by default but Can be enabled via the #enable-webassembly flag.

Is WebAssembly supported in all browsers?

WebAssembly Now Supported across All Browsers.

Why does my browser not support WebAssembly?

The browser does not support WebAssembly error can arise in outdated browser versions or because that feature isn't enabled. You can fix this Chrome error by enabling the feature in Google's flagship browser.

Is WebAssembly low-level?

WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web.


1 Answers

I've been fiddling with WebAssembly recently, and found a way to make it work. Here are the script files:

main.js

chrome.browserAction.onClicked.addListener(function(tab) {  chrome.tabs.executeScript(null, {file: "content_script.js"}); }); 

content_script.js

  var importObject = { imports: { imported_func: arg => console.log(arg) } };   url = 'data:application/wasm;base64,' + "AGFzbQEAAAABCAJgAX8AYAAAAhkBB2ltcG9ydHMNaW1wb3J0ZWRfZnVuYwAAAwIBAQcRAQ1leHBvcnRlZF9mdW5jAAEKCAEGAEEqEAAL";   WebAssembly.instantiateStreaming(fetch(url), importObject)   .then(obj => obj.instance.exports.exported_func()); 

The data URL belongs to the common tutorial wasm sample (simple.wasm), which writes 42 on the console.


PS. If it seems like cheating or bad practice to you, this content_script.js also works:
var importObject = {    imports: {     imported_func: function(arg) {     console.log(arg);     }    }  };  var response = null; var bytes = null; var results = null;   var wasmPath = chrome.runtime.getURL("simple.wasm"); fetch(wasmPath).then(response =>     response.arrayBuffer()     ).then(bytes =>        WebAssembly.instantiate(bytes, importObject)         ).then(results => {         results.instance.exports.exported_func();   }); 

Only if you include the code files in the web_accessible_resources section in manifest.json, though:

    ...     "web_accessible_resources": [      "content_script.js",      "main.js",      "simple.wasm"     ],     ... 

Github: https://github.com/inflatablegrade/Extension-with-WASM

It can also be made compatible with Manifest V3.

like image 52
Nautilus Avatar answered Oct 04 '22 16:10

Nautilus