如何使用Flutter构建Chrome扩展？

sf6xfgos 于 2023-09-28 发布在 Go

关注(0)|答案(1)|浏览(98)

我接触到使用Flutter框架创建Chrome扩展的想法。虽然我有Flutter应用程序开发的经验，但我对Chrome扩展程序的世界相当陌生。我听说可以使用Flutter构建Chrome扩展，但我不确定所涉及的步骤。

我努力

老实说，我在这方面是白手起家。我还没有尝试任何东西，因为我不知道从哪里开始。我的Flutter知识相当扎实，但我不确定如何将其用于构建Chrome扩展。
我也看了the official documentation。但我找不到任何资源。

具体来说，我不确定：

如何构建Flutter项目以用作Chrome扩展？具体而言：需要对项目文件（例如 * index.html ， manifest.json *）进行哪些修改才能启用扩展功能？

google-chrome

来源：https://stackoverflow.com/questions/76883562/how-can-i-build-a-chrome-extension-using-flutter

1条答案

按热度按时间

ax6ht2ek1#

请确保您拥有最新版本的Flutter。*
要向使用先前版本的Flutter创建的现有项目添加Web支持，请从项目的顶层目录运行以下命令 *：

flutter create --platforms web .

设置

1.修改 index.html：

导航到web/index.html文件以删除任何不支持的脚本：

在<body>标记中插入以下<script>标记：

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

设置扩展视图维度：

通过修改 * web/index.html * 中的起始<html>标记，为扩展视图定义固定尺寸：

<html style="height: 600px; width: 350px">

修改后的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>

2.修改 manifest.json：

将web/manifest.json文件的内容替换为相应的扩展配置，包括名称、描述、版本、内容安全策略、默认弹出窗口和图标：

{
    "name": "extension demo",
    "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
}

构建扩展

使用HTML渲染器和--csp标志生成Flutter Web构建，以禁用动态代码生成：

flutter build web --web-renderer html --csp

（每次更改代码时，都应该重新构建扩展）。

安装并测试扩展

打开Chrome，在URL地址栏中输入chrome://extensions。
启用开发者模式。
单击“Load unpacked”并选择<flutter_project_dir>/build/web文件夹。（再次选择build/web文件夹）

扩展程序现在将安装并可从Chrome扩展程序栏访问：

赞(0）回复(0）举报 2023-09-28

我来回答

如何使用Flutter构建Chrome扩展？

1条答案

设置

1.修改 index.html：

2.修改 manifest.json：

构建扩展

安装并测试扩展

相关问题

热门标签

最新问答