如何将Chrome扩展表单组件嵌入网站以复用代码？

核心目标：单仓库维护，同时适配扩展与网站 #

方案1：组件化抽离成独立模块 #

把Jira表单的核心逻辑（比如字段验证、Jira API交互、数据处理）和UI组件从扩展代码中完全抽离，做成独立的可复用模块（比如基于React/Vue的组件库，或原生JS模块）：

• 用Monorepo结构管理代码，把组件模块放在单独的子目录下，扩展和网站项目都依赖这个子模块
• 扩展端：在popup/content script中引入该组件，配合Chrome扩展的API（如chrome.storage、chrome.runtime）完成权限相关操作
• 网站端：直接引入组件，用网页环境的存储方案（如localStorage）或后端接口替代扩展专属API

方案2：iframe嵌入扩展内的表单页面 #

如果扩展本身已有独立的表单页面（比如popup.html或options.html），可以通过iframe在网站中直接加载：

1. 在扩展的manifest.json中配置web_accessible_resources，允许目标网站访问表单页面：

   "web_accessible_resources": [
     {
       "resources": ["form.html", "*.js", "*.css"],
       "matches": ["https://your-website-domain.com/*"]
     }
   ]
   

2. 在网站中嵌入iframe，指定扩展的表单页面路径：

   <iframe src="chrome-extension://YOUR_EXTENSION_ID/form.html" width="100%" height="600px" frameborder="0"></iframe>
   

3. 通过postMessage实现网站与iframe内扩展表单的通信（比如传递用户信息、接收表单提交结果）

方案3：环境适配型单代码库 #

通过环境判断让同一套代码兼容扩展和网页环境：

• 在代码中加入环境检测逻辑：

  const isExtensionEnv = typeof chrome !== 'undefined' && chrome.runtime;
  

• 针对不同环境做API适配：比如扩展用chrome.storage.local存数据，网站用localStorage或后端接口；Jira API调用在扩展中直接请求，在网站中通过后端代理解决跨域
• 打包时通过构建工具（如Webpack/Vite）的环境变量，分别输出扩展包和网站静态文件

参考资料 #

• Chrome官方文档：web_accessible_resources配置规则、扩展与网页的跨上下文通信机制
• 前端Monorepo架构实践指南
• 组件化开发最佳实践：UI与业务逻辑分离、跨项目组件复用

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