原文地址：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

前端

Lotus Domino HTTP响应拆分漏洞

Google Chrome Theora解码器资源管理错误漏洞

IT之家APP 聚合了各种it新闻

Allaire ColdFusion 4.5.1缓存文件请求拒绝服务漏洞

Way-Board远程文件泄露漏洞

Flutter 入门与实战（十三）：底部弹窗如何实现多项选择？

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

结论