Chrome 插件

Chrome 插件是扩展 Chrome 功能的小程序。 Google Chrome 具有标准化的 API，插件可以通过该 API 在浏览器中执行各种任务。

在日常生活中，我们使用浏览器插件来执行各种任务，例如广告和跟踪器拦截、语法纠正和翻译。这些扩展是使用 JavaScript 编写的，并使用 Chrome 扩展 API 与浏览器交互。由于 Flutter Web 项目是用 JavaScript 编译的，因此我们可以通过一些小调整使用 Flutter 构建 Chrome 扩展。

步骤

要使用 Flutter 创建 Chrome 扩展程序，我们需要执行以下步骤：

1、创建flutter web 项目

首先创建一个 flutter web 项目，然后需要编辑 project>web>index.html文件。从 index.html 文件中删除所有不必要的元标记，并向 <html> 元素添加显式宽度和高度。具体的修改后的index.html 如下所示：

xml 复制代码

<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>

上面的代码中，我们看到重定向到标签中的 main.dart.js 脚本。

xml 复制代码

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

2、为 Flutter Web 配置`manifest.json`文件

编辑 project > web > manifest.json 文件，该文件包含所有应用程序配置，旨在为我们的 Flutter Web 应用程序提供渐进式 Web 应用程序 (PWA) 功能（要详细了解如何使用 Flutter 构建 PWA，请查看这篇文章。）。

因此Chrome 浏览器还需要 manifest.json 文件来注册扩展程序。因此，要使插件能够正常地工作，请删除 manifest.json 文件中的内容，并用以下代码替换它们。

json 复制代码

{  
"name": "sample chrome extension",  
"description": "demo",  
"version": "1.0.0",  
"content_security_policy": {  
"extension_pages": "script-src 'self' ; object-src 'self'"  
},  
"action": {  
"default_popup": "index.html",  
"default_icon": "icons/Icon-192.png"  
},  
"manifest_version": 3  
}

在文件的action字段中，将设置为默认的弹出页面。这样，当您点击浏览器顶部栏中的扩展程序图标时，就会弹出该页面。

3、处理内容安全策略，使我们的 Chrome 扩展程序真正在浏览器环境中运行

内容安全策略 (CSP) 是浏览器中的一个安全层，可保护用户免受跨站点脚本和数据注入攻击。通常，浏览器信任来自服务器的内容。跨站点脚本滥用这种信任并在浏览器中运行恶意代码。

使用 CSP，开发人员可以在 HTTP 标头中指定可信域。支持 CSP 的浏览器将仅执行来自该特定域的脚本，并忽略内联脚本和事件处理 HTML 属性。

查看 manifest.json 文件中的 CSP。这里，我们将script-src和object-src定义为self。因此，浏览器不会执行内联脚本和来自其他来源的脚本。在开发者模式下，您会收到 CSP 错误。

4、将可选的后台脚本添加到我们的 Flutter Chrome 扩展中

后台脚本是基于事件的程序，可对浏览器中的某些事件做出反应。这些脚本对于 Chrome 扩展来说是可选的。如果您正在扩展中开发某些需要执行后台代码的功能，那么自定义后台脚本会派上用场。

要将后台脚本添加到 Flutter Chrome 扩展程序，请在目录中添加一个新文件background.js。在您的 manifest.json 文件中注册后台脚本，填下一下代码：

css 复制代码

 "background": {
    "service_worker": "background.js"
  },

要了解关于后台脚本的详情，请查看Chrome 开发者文档。

6、构建 Flutter Web 项目

Flutter Web 项目构建使用两种的渲染模式。

1、HTML 渲染器

使用 HTML 元素、CSS、Canvas 元素和 SVG 元素的组合。

2、CanvasKit渲染器

使用Skia作为渲染引擎并绘制像素完美的小部件。 CanvasKit 渲染器会增加应用程序的下载大小约 2 MB。

如果我们在使用 flutter build web 命令构建 Flutter Web 项目时未指定渲染器，Flutter 将在移动浏览器中使用 HTML 渲染的 Web 应用程序和 CanvasKit 渲染的桌面浏览器中的 Web 应用程序。

但是，Chrome 扩展程序不支持 CanvasKit 渲染的应用 。因此，请在构建时添加 --web-renderer html 标志以仅生成 HTML 呈现的应用程序。

Flutter Web 的另一个问题是构建输出中动态生成的代码。此行为会导致浏览器中出现 CSP 错误。要禁用动态生成的代码，请在 Flutter 构建命令中使用 --csp 标志。

因此，要使用 Flutter 制作优化的 Chrome 扩展，构建命令应该如下所示。

css 复制代码

flutter build web - web-renderer html - csp

7、 Chrome 插件实际使用

本地安装

构建完成后，我们进入chrome://extensions/page。我们从右上角打开开发者模式。打开后，我们点击左上角的Load Unpacked按钮。从这里我们选择 project > build > web 文件夹。

上架到 Chrome 商店

这里主要要注册一个Chrome 开发者，具体可以查看在 Chrome 应用商店中发布一文

结尾

更多的创建和发布自定义 Chrome 应用和扩展程序内容，具体可以点击下方链接 support.google.com/chrome/a/an...

Flutter 写 Chrome 插件