Использование WebAssembly в расширении Chrome
У меня есть расширение Chrome, которое включает сложную функцию comp_func(data), которая требует много ресурсов процессора, выполняя множество побитовых операций. Из-за этого я пытаюсь использовать WebAssembly.
Я пробовал следовать нескольким руководствам, например это one и это one.
Первая ссылка говорит:
fetch('simple.wasm').then(response =>
response.arrayBuffer()
).then(bytes =>
WebAssembly.instantiate(bytes, importObject)
).then(results => {
results.instance.exports.exported_func();
});
но я получаю сообщение об ошибке:
Uncaught (in promise) TypeError: WebAssembly Instantiation: Import #0 module = "env" error: module is not an object or function
Я много пробовал использовать этот подход, но он не работал. Я не могу понять, как использовать WebAssembly, загруженный из файла .wasm.
Итак, я попробовал более простой подход: Вторая ссылка говорит, что нужно поместить эту строку в html-файл:
<script src = "index.js"></script>
а затем просто используйте экспортированную функцию:
var result = _roll_dice();
НО, я в расширении, поэтому у меня есть только файл background.html.
Итак, я ищу способ получить доступ к модулю, который был загружен в фоновом файле.
И все становится сложнее, потому что функция comp_func(data) вызывается из Рабочий.
Вот что я пробовал до сих пор:
Если я позвоню chrome.extension.getBackgroundPage(), я могу получить доступ к модулю
но я не могу отправить его Рабочему:
Failed to execute 'postMessage' on 'Worker': # could not be cloned.
И если я попробую сначала записать stringify:
Uncaught TypeError: Converting circular structure to JSON
(Я попытался разобрать его, не сработало ...)
И я не могу вызвать chrome.extension.getBackgroundPage() из Worker, потому что я не могу получить оттуда доступ к Chrome API.
Итак, мои вопросы:
- Кто-то устал загружать файл
.wasmв расширении chrome, и он работал? Второй подход (загрузка файлаjs) звучит проще, но если у вас есть рабочий пример для этого подхода, это будет здорово.
или 2. как получить доступ к модулю, который был загружен в background.html (из второго примера)?
или 3. как передать нужные мне функции из js файла в Worker (через postMessage)?
Подводя итог, кто-то пытался использовать WebAssembly в расширении Chrome и выжил, чтобы сказать?
РЕДАКТИРОВАТЬ: В конце концов я отказался от подхода WebAssembly. Я также разместил этот вопрос на жуки-хром, и через несколько месяцев получил ответ. Не уверен, что это действительно работает, но, возможно, это, вместе с отмеченным ответом, кому-то поможет.
Ты хоть представляешь, как я могу убедиться, что расширения не могут запускать wasm?
Вы можете спросить на crbug.com и / или Chromium-Extensions-Объявление.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Недавно я возился с WebAssembly и нашел способ заставить его работать. Вот файлы сценария:
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.info(arg) } };
url = 'data:application/wasm;base64,' + "AGFzbQEAAAABCAJgAX8AYAAAAhkBB2ltcG9ydHMNaW1wb3J0ZWRfZnVuYwAAAwIBAQcRAQ1leHBvcnRlZF9mdW5jAAEKCAEGAEEqEAAL";
WebAssembly.instantiateStreaming(fetch(url), importObject)
.then(obj => obj.instance.exports.exported_func());
URL-адрес данных принадлежит общему образцу wasm учебника (simple.wasm), который записывает 42 на консоли.
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.info(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();
});
Только если вы включите файлы кода в раздел web_accessible_resources в manifest.json, однако:
...
"web_accessible_resources": [
"content_script.js",
"main.js",
"simple.wasm"
],
...
Github: https://github.com/inflatablegrade/Extension-with-WASM
Я думаю, возможно, расширения еще не могут запускать wasm. Что касается части обмена сообщениями: 1) с помощью chrome API можно передавать только простые данные, то есть числа, строки, логические значения, массивы и объекты, которые состоят из таких простых данных, 2) Рабочие также могут передавать несколько конкретных типов, 3) функции не подлежат передаче.