基于Plasmo框架开发的一款Chrome浏览器插件(chrome v3版本)——集成GPT、千问、Deepseek等目前主流的AI大模型

​背景之前有开发chrome 插件的的需求，鸭子赶上架做了一个粗略版的基于原生js+jq写的，由于没有用框架进行模块化开发，导致后期维护起来相当困难，一个js文件写到了一万多行，由于功能在不断迭代，基于一款好用的开源chrome v3开发框架变成了迫切需求。在网上找了多款开源的框架，都没有找到合适的，基本有两个通病：文档不齐全，有反馈的bug作者没有修复，导致重构的风险增加。在网站上找了好久 看到plasmo 文档相当齐全，github start十万加。框架还是相当靠谱。于是基于次框架做了一个使用的插件，和大家一起分享一下。整体界面预览登陆界面登陆后的界面智能体界面侧边栏界面写作界面绘图界面图生文界面技术栈Plasmo + React + Ant Design(这里要用到它的静态引入方法普通方法会丢失样式)+TS(赶项目这里ts基本就any梭哈了)开发技术文档：chrome v3开发文档plasmo中文文档Ant Design组件库插件嵌入的方法据我了解目前插件注入到界面的主要有三种直接插入到主界面，直接注入样式会和主页界面有冲突，之前第一版就是这种情况，各种冲突。通过iframe方法嵌入，虽然也能做到样式隔离，但是通讯相对比较麻烦， 和主界面做交互不方便。通过shadow-root隔离注入，比较方便，也是plasmo构建时默认的方法，下面也简单介绍一下吧，开发插件先了解前奏，后面也知道所以然。什么是 Shadow Root？Shadow Root 是 Web Components 技术中的一个核心概念，它是 Shadow DOM（影子 DOM）的根节点。Shadow DOM 允许开发者创建封装的 DOM 子树，这些子树与主文档 DOM 隔离，从而避免样式冲突和意外的 JavaScript 干扰。简单来说，Shadow Root 是影子树的入口点，让组件内部的 HTML、CSS 和 JavaScript 独立运行。Shadow Root 的主要特点封装性：Shadow Root 内的元素不会受到外部 CSS 或 JavaScript 的影响，反之亦然。这有助于构建可复用的组件，如自定义元素（Custom Elements）。作用域隔离：样式和脚本在 Shadow Root 内生效，不会泄露到外部文档。性能优化：浏览器可以优化渲染，因为影子树是独立的。浏览器支持：现代浏览器（如 Chrome、Firefox、Safari、Edge）都支持 Shadow DOM。IE 不支持，但可以通过 polyfill 模拟。插件嵌入到主页界面的方法，这里选用的的是shadow-root，plasmo框架自动注入到界面的默认就是这个方法。图片显示的是插件注入到界面显示的层级以及结构信息，插入到位置框架支持自定义的，具体的可以去看plasmo官方文档。plasmo官方中文文档：plasmo官方文档插件功能 （这里就不写插件名字了，只和大家分享开发经验）插件功能包含一下几个部分:聊天、智能体，写作，绘图、图升文部分，插件功能集成了目前市面最新的大模型deepseek ，GPT4o、千问等目前市面最流行的大模型。先给大家看看界面：界面的整体功能聊天界面的：聊天界面的主要集合了大模型目前流行的几个大模型deepseek ，GPT4o、千问等，这里同时也集成了基于内部的智能体部分，做一个支持切换大模型和智能体，切换列表的功能。对话聊天部分，采用的是sse流式文本返回的，且支持markdown语法展示，支持化学物理公式，当然样式有借鉴其他插件的部分，本文只讨论技术实现，其他不做过多介绍，先给大家展示一下整体的功能样子。插件功能支持侧边栏和固定栏展示，以及侧边栏快捷按钮操作。项目整体目录以上就是整个项目，目录的整体部分，目录是安装plasmo脚手架后在原有的基础上做了部分改动，细节部分可以配合plasmo官网文档配置，下面会将一些官网文档，不够详细的坑，开发过程中我觉得难点主要就是登陆授权这一部分，以及如何静态引入antdsign组件的部分，下面也会着重讲这两部分功能的实现，并且会配置代码片段，供大家参考（前端小菜鸡，写的可能不太好，大家嘴上积德）contents界面 ：重要功能主要都集中在这个文件下，也算是实现整个插件功能的入口提示：没有这方面的基础的话建议看看chrome v3开发文档先了解一些基础，看的更明白也知道我在说什么—chrome 插件开发文档1.getStyle方法我这里是将个人写的样式和antdesign.css 通过字符串的形式拼接的。exportconstgetStyle=()={conststyle=document.createElement("style")style.textContent=contentScss+antdResetCssTextreturnstyle}写chrome 插件不能和react脚手架开发框架，直接导入组件使用，这种方式的话样式不生效，当然使用antdesign有部分组件使用是有问题的，需要自己手搓，或者在原有的组件上进行二次封装配置的，这个也是我前期开发比较头疼的问题，也是踩坑最多的，网上相关案例少之又少，很难受。个人写的样式都会集中在引入在style_public.scss文件下面的，最后统一导入到getStyle方法中，直接引入到组件是不生效的如下的示例。importReactfrom"react"import"./index.scss"exportdefaultfunctionindex(props){const{loading}=propsreturn(div className="loading-lsdo223d"style={{display:loading?"flex":"none"}}div className="loading-content-lsdo12dsd"示例代码/div/div)}此处样式不会生效。配置chrome插件根节点挂在主界面的位置// 插入单个锚地点exportconstgetInlineAnchor:PlasmoGetInlineAnchor=async()={// 当前文档是在 iframe 中 阻止注入if(window.self!==window.top)returnnull// 当前文档不在 iframe 中允许注入returndocument.querySelector("body")asHTMLElement}这里有个坑，不加入这段代码的话，写的插件会循环注入到主页，有iframe的引用代码里面，不仅会影响主界面加载速度，写的快捷键按钮也会显示多个，严重影响使用体验，下面示例是判断是否是主页不是主页的话则不注入chrome插件脚本。// 当前文档是在 iframe 中 阻止注入if(window.self!==window.top)returnnullantdesign 静态组件如何引入的问题importAntDrawerfrom"antd/es/drawer"importAntMenufrom"antd/es/menu"importAntMessagefrom"antd/es/message"importAntPopoverfrom"antd/es/popover"importAntTooltipfrom"antd/es/tooltip"安装好antdesgin包后，组件都是在antd/es/目录下的引入使用的，使用组件前需要在根节点包裹一个ConfigProvider组件，下面是做了基于组件封装的一个全局样式配置组件importConfigProviderfrom"antd/es/config-provider"importzh_CNfrom"antd/es/locale/zh_CN"importtype{ReactNode}from"react"importReactfrom"react"exportconstThemeProvider=({children=nullasReactNode})=(ConfigProvider locale={zh_CN}theme={{