Is it supported to make a browser extension using flutter/rinf?

[chenghang6]

I want to make a extension for Chrome/Firefox/Safari using flutter/rinf.
Is it supported? Thanks.

[chenghang6]

Tested with a simple extension following this guide: https://itnext.io/building-a-chrome-extension-with-flutter-a-step-by-step-guide-ea7260c0c452. Success without rinf.
Then add rinf following https://rinf.cunarist.com/applying-template/.
Build with:

rinf wasm --release
flutter build web --web-renderer html --csp

Failed to init wasm:
await initializeRust(assignRustSignal);

[temeddix]

To answer your first question, Rinf does not target browser extensions, so it's hard to say would Rinf work or not. Maybe it might, maybe it will not. Please share your experiences.

The second issue looks like an issue related to CSP with Flutter apps. Rinf does insert a JavaScript tag into HTML, so this can be the cause. However deeper debugging seems to be required.

[chenghang6]

Thanks for response!
How can I help with deeper debugging?

[chenghang6]

// load_web.dart

  // Use the default JavaScript path unless provided.
  final path = jsLibPath ?? 'pkg/hub.js';

  final fullUrl = baseHref.resolve(path);
  final scriptElement = ScriptElement();
  scriptElement.type = 'module';
  scriptElement.innerHtml = '''
import init, * as wasmBindings from "$fullUrl";
globalThis.wasmBindings = wasmBindings;
await init();
rinfBindings.completeRinfLoad();
delete rinfBindings.completeRinfLoad;
''';
  document.head!.append(scriptElement);

A workaround for this error:
Extract the above piece of js code to a standalone js script file, then include it in app's index.html.

Wasm inited, but then ran into another error:

// hub.js

    imports.wbg.__wbg_eval_1bab7c4fbae3b3d6 = function() { return handleError(function (arg0, arg1) {
        const ret = eval(getStringFromWasm0(arg0, arg1));
        return ret;
    }, arguments) };

[temeddix]

Congratulations on the progress :) that error looks like some browser policy to me

[chenghang6]

Basically, Chrome extension manifest v3 forbids all kinds of dynamic imports/evals.

// manifest.json with minimum content security policy for extension pages

{
    "name": "example",
    "short_name": "example",
    "description": "A new Flutter project.",
    "content_security_policy": {
        "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
    },
    "cross_origin_opener_policy": {
        "value": "same-origin"
    },
    "cross_origin_embedder_policy": {
        "value": "require-corp"
    },
    "manifest_version": 3,
    "version": "1.0.0",
    "action": {
        "default_popup": "index.html",
        "default_icon": "icons/Icon-192.png"
    }
}