我想到了使用Ffltter框架创建一个Chrome扩展的 idea .虽然我有Ffltter应用程序开发的经验，但我对Chrome扩展的世界还是相当陌生的.我听说可以使用Ffltter构建一个Chrome扩展，但我不确定涉及的步骤.
What I tried个
说实话，我在这方面是白手起家的.我还没有try 任何东西，因为我不确定从哪里开始.我的Flight知识相当扎实，但我不确定如何将其应用于构建Chrome扩展.
我也看了一下the official documentation.然而，我找不到任何资源.
Specifically, I'm Unsure About:个
我如何构建一个作为Chrome扩展的Ffltter项目？具体地说: 需要在项目文件(例如，index.html、manifest.json)中进行哪些修改才能启用扩展功能？
Make sure you have the latest version of Flutter.个
To add web support to an existing project created using a previous version of Flutter, run the following command from your project’s top-level directory:
flutter create --platforms web .
导航到web/index.html文件以删除任何不受支持的脚本:
<body>标记内插入以下<script>标记:<script src="main.dart.js" type="application/javascript"></script>
Set Extension View Dimensions:
通过修改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>
用适当的扩展配置替换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 Unpack"并 Select <flutter_project_dir>/build/web文件夹.(再次 Select build/web文件夹)
现在将安装该扩展，并从Chrome扩展栏访问该扩展:
