Flutter web调试过程中如何启用Chrome扩展？

Flutter启动Web调试的Chrome实例时，默认携带了--disable-extensions参数屏蔽了所有扩展，只需添加启动参数允许扩展加载即可解决。

方法1：单次调试临时生效 #

直接在终端执行启动命令时传入允许扩展的浏览器标识，适合临时需要加载扩展的场景，每次启动都需要手动添加参数：

flutter run -d chrome --web-browser-flag "--enable-extensions"

方法2：VS Code固定配置 #

• 打开项目下的.vscode/launch.json文件，若不存在可以在「运行和调试」面板新建Flutter启动配置自动生成
• 在配置的args字段中添加启动参数，完整配置示例：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter Web (with extensions)",
      "request": "launch",
      "type": "dart",
      "args": [
        "-d",
        "chrome",
        "--web-browser-flag",
        "--enable-extensions"
      ]
    }
  ]
}

• 保存后通过VS Code调试面板启动即可自动加载扩展。

方法3：Android Studio/IntelliJ 固定配置 #

• 点击顶部菜单栏 Run > Edit Configurations
• 找到对应Flutter项目的运行配置，在Additional run args输入框中填入以下内容：

--web-browser-flag "--enable-extensions"

• 保存配置后启动调试即可生效。

补充说明 #

• 调试前请确认所需扩展已经在系统默认Chrome中安装并启用，调试启动的Chrome实例会继承已有的扩展配置。
• 如需同时传入多个Chrome启动参数，可多次叠加--web-browser-flag字段，示例如下：

# 同时开启扩展权限和跨域访问权限
flutter run -d chrome --web-browser-flag "--enable-extensions" --web-browser-flag "--disable-web-security"

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