Is it able to develop a Chrome extension(manifest v3) using frb? #2376

chenghang6 · 2024-10-29T02:18:03Z

chenghang6
Oct 29, 2024

I tried to turn my flutter app which using frb into a Chrome extension following this article: https://itnext.io/building-a-chrome-extension-with-flutter-a-step-by-step-guide-ea7260c0c452.
I modified manifest.json and index.html as below, and compile it with:

flutter_rust_bridge_codegen build-web --release
flutter build web --web-renderer html --csp

manifest.json

{
    "name": "extension sample",
    "description": "sample",
    "version": "1.0.0",
    "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"
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "icons/Icon-192.png"
    },
    "manifest_version": 3
}

index.html

<!DOCTYPE html>
<html style="height: 600px; width: 300px">

<head>
  <meta charset="UTF-8" />
  <title>chromextension</title>
</head>

<body>
  <script src="main.dart.js" type="application/javascript"></script>
</body>

</html>

There is no problem when running with:
flutter run -d chrome --web-header=Cross-Origin-Opener-Policy=same-origin --web-header=Cross-Origin-Embedder-Policy=require-corp

But after loaded into Chrome as an extension, it ran into an error immediately when clicking extension button:

core_patch.dart:279 Uncaught Error: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'".

    at new Function (<anonymous>)
    at _web.dart:15:3
    at aih.a (async_patch.dart:303:19)
    at aih.$2 (async_patch.dart:328:23)
    at ahA.$1 (async_patch.dart:279:19)
    at Ph.ai_ (zone.dart:1661:46)
    at Ph.xA (zone.dart:1660:5)
    at ad5.$0 (future_impl.dart:128:29)
    at Object.rS (future_impl.dart:890:13)
    at af.nj (future_impl.dart:657:7)

It failed at the very beginning when initing RustLib.
await RustLib.init();

fzyzcjy · 2024-10-29T07:04:29Z

fzyzcjy
Oct 29, 2024
Maintainer

Firstly, I wonder whether we can disable that unsafe-eval protection (e.g. by specifying CORS header etc). I am not a web expert so not sure whether we can do that.

Secondly, maybe debug to find which line of code causes trouble. For example, you can do console.error in rust code here and there, and bisect to know which line of code gets stuck.

0 replies

chenghang6 · 2024-10-29T08:12:35Z

chenghang6
Oct 29, 2024
Author

Added an error log in my init function. It's not called, no console output.

use anyhow::{Ok, Result};
use log::info;
use web_sys::console;

fn log_message(message: &str) {
    console::error_1(&message.into());
}

#[flutter_rust_bridge::frb(init)]
pub fn init_app() -> Result<()> {
    log_message("hello");

    // Default utilities - feel free to customize
    flutter_rust_bridge::setup_default_user_utils();
    Ok(())
}

0 replies

chenghang6 · 2024-10-29T08:20:27Z

chenghang6
Oct 29, 2024
Author

Added some logs in rust_lib_xxx.js generated by frb codegen.
But the error didn't show after the whole function was executed.
Where can I add more logs?

1 reply

fzyzcjy Oct 29, 2024
Maintainer

Maybe try to add print here and there in flutter_rust_bridge's Dart code.

chenghang6 · 2024-10-29T09:49:35Z

chenghang6
Oct 29, 2024
Author

at _web.dart:15:3
Just found that the call stack already shows it's _web.dart:15 which is in frb_dart(frb_dart\lib\src\wasm_module_web.dart):

/// {@macro flutter_rust_bridge.internal}
Future<void> initializeWasmModule({required String root}) async {
  _ensureCrossOriginIsolated();

  final script = web.HTMLScriptElement()..src = '$root.js';
  web.document.head!.append(script);

  await script.onLoad.first;  // line 15

  jsEval('window.wasm_bindgen = wasm_bindgen'); // Or here?

  await _jsWasmBindgen('${root}_bg.wasm').toDart;
}

19 replies

chenghang6 Oct 31, 2024
Author

FRB tries to importScripts("chrome-extension://kcdianfnlfcaopcmlebjmjojplkkdann/pkg/rust_lib_xxxx.js") into web workers.
"importScripts" violates Chrome extension CSP policy.

There are many dynamic imports/evals in FRB. An architecture view is needed to enable support for Chrome extension v3 development.
All we've done is guessing here and guessing there, maybe by luck we can make it work, but can't use it in production.

fzyzcjy Oct 31, 2024
Maintainer

All we've done is guessing here and guessing there, maybe by luck we can make it work, but can't use it in production.

No, IMHO we are not guessing, but engineering to work around (or fix) each issue. I say "guess" not because I am guessing (instead of doing science), but because I do not want to say something with too strong assertions, which does not look polite. If everything works, then it just works and there is usually no worry about in-production issues. Indeed I think it may not be hard for an expert on frontend to fix all these things - but I guess both of us are more Flutter devs than Web devs ;) - so we may need a bit searching and testing.

fzyzcjy Oct 31, 2024
Maintainer

But yes, I agree if dynamic imports/evals is forbidden, then frb needs some refactors before it can be used. That's why I say above, is there a way to allow such dynamic import/eval?

chenghang6 Oct 31, 2024
Author

But yes, I agree if dynamic imports/evals is forbidden, then frb needs some refactors before it can be used. That's why I say above, is there a way to allow such dynamic import/eval?

Yes, that's what I meant, sorry for seemed unpolite.
We need to know clearly what Chrome extension manifest v3 forbids and make some rules if planning to support it, or even we make it work now, new code in the future may break it.

fzyzcjy Oct 31, 2024
Maintainer

It's OK, no worries!

We need to know clearly what Chrome extension manifest v3 forbids

Good point. Indeed I am wondering whether it is because of the specific webpage you are targeting that causes this, instead of the limitation of extension.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is it able to develop a Chrome extension(manifest v3) using frb? #2376

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 20 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Is it able to develop a Chrome extension(manifest v3) using frb? #2376

chenghang6 Oct 29, 2024

Replies: 4 comments · 20 replies

fzyzcjy Oct 29, 2024 Maintainer

chenghang6 Oct 29, 2024 Author

chenghang6 Oct 29, 2024 Author

fzyzcjy Oct 29, 2024 Maintainer

chenghang6 Oct 29, 2024 Author

chenghang6 Oct 31, 2024 Author

fzyzcjy Oct 31, 2024 Maintainer

fzyzcjy Oct 31, 2024 Maintainer

chenghang6 Oct 31, 2024 Author

fzyzcjy Oct 31, 2024 Maintainer

chenghang6
Oct 29, 2024

Replies: 4 comments 20 replies

fzyzcjy
Oct 29, 2024
Maintainer

chenghang6
Oct 29, 2024
Author

chenghang6
Oct 29, 2024
Author

fzyzcjy Oct 29, 2024
Maintainer

chenghang6
Oct 29, 2024
Author

chenghang6 Oct 31, 2024
Author

fzyzcjy Oct 31, 2024
Maintainer

fzyzcjy Oct 31, 2024
Maintainer

chenghang6 Oct 31, 2024
Author

fzyzcjy Oct 31, 2024
Maintainer