原文地址：yayocoding.blogspot.com/2021/07/how…

原文作者：yayocoding.blogspot.com/

发布时间：2021年7月8日

如何用 Flutter 2.2.3 创建 Google Chrome 扩展程序
我们将学习如何用Flutter创建一个Google Chrome扩展。本文中的Flutter版本是Flutter 2.2.3。

我们将从默认项目开始，即我们都知道的计数器应用程序。

首先，我们将打开index.html文件，搜索标签<script>，因为我们将删除里面的所有内容。我们不需要这个脚本，因为我们不需要PWA功能。

删除之前的代码后，我们要在<body>标签中添加一个新的脚本。它将看起来像这样。

<body>

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

</body>
复制代码

注意：如果你想了解更多关于manifest.json的信息，你可以访问这个网站。欢迎来到manifest 3.

{
  "name": "flutter_chrome_extension",
  "description": "flutter_chrome_extension",
  "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
}
复制代码

现在我们要用下一个命令来创建网络应用。

flutter build web --web-renderer html --csp
复制代码

然后我们将打开Chrome浏览器，进入chrome://extensions/我们将点击Load unpacked，并选择路由../build/web/。这个路由是在上一个步骤中生成的。

我们可以看到，扩展程序被成功添加。

但是有一个问题，如果我们点击扩展，我们只能看到一个很小的正方形。

我们回到文件index.html，在<html>标签中添加尺寸。

<html style="height: 600px; width: 350px">
复制代码

我们再次生成网络应用程序并重新加载扩展。现在它可以正常工作了。

结论

使用Flutter可以非常容易地创建谷歌浏览器扩展。你可以在Github上找到本文的源代码

你可以在youtube上观看视频教程，记得激活英文字幕。

www.youtube.com/watch?v=7U5…

www.deepl.com 翻译

文章版权归作者所有，未经允许请勿转载。

THE END

前端

多家厂商Wget/Curl NTLM用户名处理溢出漏洞

N8CMS ‘index.php ‘多个输入验证漏洞

新手小白必须知道的 Linux 基础: 常用命令 (1)

机器学习2-线性回归

Red Hat Linux SysVInit权限许可和访问控制漏洞

TensorFlow拟合曲线问题及易错坑点

[Flutter翻译]如何用Flutter 2.2.3创建Chrome扩展插件

结论