如何使用Flutter构建Chrome扩展？项目结构及核心文件修改疑问

1. 确保你的项目是Flutter Web项目 #

如果现有Flutter项目没有web支持，执行以下命令添加：

flutter create --platforms web .

2. 在web目录下创建manifest.json（核心配置） #

Chrome扩展必须依赖这个文件，以弹出页类型扩展为例，配置如下（适配Manifest V3，当前Chrome推荐版本）：

{
  "manifest_version": 3,
  "name": "Flutter Chrome Extension",
  "version": "1.0.0",
  "description": "用Flutter构建的Chrome扩展",
  "action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "icons/icon-16.png",
      "48": "icons/icon-48.png",
      "128": "icons/icon-128.png"
    }
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'none';"
  },
  "icons": {
    "16": "icons/icon-16.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  }
}

• 若需开发侧边栏、背景页等其他类型扩展，只需调整action或添加side_panel、background字段。
• content_security_policy必须配置，否则Flutter的Wasm代码无法正常运行。

3. 修改web/index.html适配扩展环境 #

默认的Flutter index.html需要做以下调整：

1. 添加适配弹出窗口的viewport标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 移除或注释Service Worker注册代码（弹出页类型扩展通常不需要，避免报错）：

<!-- 注释掉这段代码 -->
<!--
<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('flutter_service_worker.js');
    });
  }
</script>
-->

3. 保持main.dart.js的默认加载路径即可，相对路径在扩展环境下可正常工作。

4. 构建并加载扩展 #

1. 生成生产版本的Web资源：

flutter build web --release

2. 打开Chrome浏览器，进入chrome://extensions/，开启「开发者模式」。
3. 点击「加载已解压的扩展程序」，选择build/web目录完成加载。

额外注意事项 #

• 如果需要访问浏览器API（如tabs、storage）或网页内容，需在manifest.json的permissions字段添加对应权限，例如：

"permissions": ["activeTab", "storage"]

• 扩展图标需自行准备，放在web/icons目录下（需手动创建），尺寸匹配manifest中的配置即可。

内容的提问来源于stack exchange，提问作者MendelG