web-dev-qa-db-fra.com

en utilisant WebAssembly dans chrome

J'ai une extension chrome qui inclut une fonction compliquée comp_func(data) qui prend beaucoup de CPU en effectuant de nombreuses opérations au niveau du bit. Pour cette raison, j'essaie d'utiliser WebAssembly.

J'ai essayé de suivre plusieurs tutoriels, par exemple this one et this one.

Le premier lien dit:

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

mais je reçois une erreur:

Non capturé (promis) TypeError: WebAssembly Instanciation: Importation # 0 module = "env" erreur: le module n'est pas un objet ou une fonction

J'ai beaucoup essayé d'utiliser cette approche, mais cela n'a pas fonctionné. Je ne comprends pas comment utiliser WebAssembly qui est chargé à partir du fichier .wasm.

J'ai donc essayé une approche plus facile: Le deuxième lien dit de mettre cette ligne dans le fichier html:

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

puis utilisez simplement la fonction exportée:

var result = _roll_dice();

MAIS, je suis en extension donc je n'ai qu'un fichier background.html. Je cherche donc un moyen d'accéder au module qui a été chargé dans le fichier d'arrière-plan. Et les choses se compliquent, parce que la fonction comp_func(data) est appelée à partir d'un Worker .

Voici ce que j'ai essayé jusqu'à présent:

Si j'appelle chrome.extension.getBackgroundPage() je peux accéder au module mais je ne peux pas l'envoyer au travailleur:

Impossible d'exécuter 'postMessage' sur 'Worker': # n'a pas pu être cloné.

Et si j'essaie de stringify d'abord:

TypeError non capturé: conversion d'une structure circulaire en JSON

(J'ai essayé de l'annuler, ça n'a pas marché ...)

Et je ne peux pas appeler chrome.extension.getBackgroundPage() depuis le Worker car je ne peux pas accéder à l'API chrome à partir de là.

Donc mes questions sont :

  1. Quelqu'un s'est-il fatigué de charger le fichier .wasm Dans l'extension chrome et cela a fonctionné? La deuxième approche (chargement du fichier js) est plus simple mais si vous avez un exemple de travail pour cette approche, ce sera génial.

ou 2. comment accéder au module qui a été chargé dans background.html (dans le deuxième exemple)?

ou 3. comment passer les fonctions dont j'avais besoin du fichier js au Worker (via postMessage)?

Pour résumer, quelqu'un a-t-il essayé d'utiliser WebAssembly dans l'extension chrome et a survécu?

[~ # ~] edit [~ # ~] : J'ai finalement quitté l'approche de WebAssembly. J'ai également posté cette question à bugs-chrome , et après quelques mois, j'ai obtenu une réponse. Je ne sais pas si cela fonctionne vraiment, mais peut-être que cela, avec la réponse marquée, aidera quelqu'un.

javascriptgoogle-chrome-extensionweb-workerwebassembly
17
Nagmon

J'ai joué avec WebAssembly récemment et j'ai trouvé un moyen de le faire fonctionner. Voici les fichiers de script:

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());

L'URL de données appartient à l'exemple de didacticiel courant de wasm (simple.wasm), qui écrit 42 sur la console.

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();
  });

Seulement si vous incluez les fichiers de code dans la section web_accessible_resources dans manifest.json, cependant:

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