Flutter for web - 如何使用 Chrome Api？

Question

我正在创建我的第一个 Flutter Web 应用程序。我需要使用 Chrome api。例如我需要使用它：

chrome.runtime.onInstalled.addListener

   or

   chrome.tabs...

但不幸的是我没有找到任何相关信息。

可以吗？

Answer 1

是的，

chrome.*

API 是 JavaScript，就像所有其他 Web API 一样，因此您可以使用 Dart 的 JS 支持。

这意味着使用 Dart 的

js

库。

例如，您可以绑定一个类似这样的函数（未经测试，没有任何类型注释，只是一个示例）

@JS('chrome.runtime.onInstalled.addListener')
external void addInstalledListener(Function callback);

编辑： 如果您宁愿引入依赖项而不是自己构建依赖项，则可以使用类似

chrome.dart

的内容。

import 'package:chrome/chrome_app.dart' as chrome;

void main() {
  chrome.runtime.getPlatformInfo().then((Map m) {
    print(m.toString());
  });
}

Answer 2

您可以在 pub.dev 上使用

chrome_extension

包：https://pub.dev/packages/chrome_extension 这是一个绑定到所有

chrome.*

API 的类型化 Dart。

所有 API 均可用，并且都是从 Chrome IDL 文件生成的。

使用

chrome.tabs.*

API 的示例

import 'package:chrome_extension/tabs.dart';

void main() async {
  var tab =
      await chrome.tabs.query(QueryInfo(active: true, currentWindow: true));
}

使用

chrome.runtime.*

API 的示例

import 'package:chrome_extension/runtime.dart';

void main() async {
  chrome.runtime.onInstalled.listen((e) {
    print('OnInstalled: ${e.reason}');
  });
}