如何在单个Flutter项目中构建Chrome扩展及浏览器Web应用

完全可以在单个Flutter项目中同时实现普通浏览器Web应用、Chrome扩展两类产物的构建，不需要拆分独立项目维护。

两类构建的核心差异集中在入口HTML结构、运行配置、少量环境专属逻辑上，只要把固定写死的配置改成构建时动态装配的模式就能解决，操作成本很低：

• 拆分分层的Web资源目录
  不要把所有配置都堆在Flutter默认生成的web/根目录，可以在web/下新建三个分类子目录：
  • common/：存放两类产物共用的静态资源、公共初始化脚本
  • web_app/：存放普通Web应用专属的index.html、PWA配置、favicon、SEO类meta标签、service worker注册逻辑
  • chrome_ext/：存放Chrome扩展专属的index.html、符合扩展CSP规则的meta配置、manifest.json、扩展图标、后台/内容脚本、权限声明文件
• 配置两套独立构建流程
  不需要修改Flutter本身的构建逻辑，只需要在flutter build web命令执行前后加简单的文件处理逻辑即可，这类拷贝、替换的逻辑用shell、Dart或者Node写几十行脚本就能实现，不需要引入复杂第三方工具：
  1. 构建普通Web应用时，执行完基础flutter build web命令后，将web_app目录下的专属文件拷贝到构建输出目录，替换默认生成的入口文件，保留PWA、前端路由等普通Web相关配置即可
  2. 构建Chrome扩展时，先执行flutter build web --web-renderer canvaskit --csp（加--csp参数是为了符合Chrome扩展的内容安全策略要求）输出基础Web包，再将chrome_ext目录下的专属文件覆盖到构建输出目录，同时删除普通Web用到的service worker、PWA清单等无关文件，注意扩展内所有资源路径必须使用相对路径，不能写根路径形式的绝对地址
• 代码层做环境兼容
  在Flutter业务代码中增加运行环境判断逻辑：先确认kIsWeb为true后，再通过检测JS环境下window.chrome.runtime.id是否存在，识别当前运行在普通浏览器还是Chrome扩展环境，分别走对应的逻辑分支即可，比如扩展环境下调用Chrome原生扩展API，普通Web环境下走常规Web交互逻辑。

注意：不要试图在同一个index.html里通过注释、前端条件判断同时兼容两类场景，两类场景的CSP规则、初始化逻辑存在本质冲突，强行兼容会导致后续迭代的维护成本极高，构建时动态替换入口文件是目前成本最低、稳定性最高的方案。

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