写Chrome插件代码时,最让人头疼的事情是什么?明明跟ChatGPT说了半天需求,结果生成的东西要么缺manifest.json的结构,要么background脚本的权限声明不到位,再不然就是content script注入的时机完全对不上——你根本装不进Chrome里测试。其实要让ChatGPT输出一份可以直接运行的插件代码,只需要在提示词里卡准三步,问题就能解决大半。
明确插件核心功能与运行环境
第一步,在提示词开头的第一句话就得把插件类型锁死:必须写明是“content script”“popup页面”“background service worker”还是“devtools panel”。如果你不写这个,ChatGPT默认按最简的popup处理,后面所有的权限声明和入口配置都会跟着跑偏。
第二步,紧接着写清楚触发条件。比如:“用户点击地址栏右侧图标时,弹出一个含‘翻译当前页’按钮的popup”——千万别只说“做个翻译插件”,它会不知道到底该响应图标点击、右键菜单,还是网页加载完成事件。
第三步,把目标浏览器和最低版本也一起写上。写上“适配Chrome 115+”,它会自动避开Manifest V2那套旧语法;写上“兼容Firefox和Edge”,它就会避免使用chrome.sidePanel这类Chrome专有API。
声明必要权限与匹配规则
一种做法是直接在提示词里把权限数组列清楚。比如:“需要'activeTab', 'scripting'权限,content script匹配所有http://和https://网址,排除chrome-extension://开头的页面”。不写排除规则的话,它很可能把脚本注入到插件自身的popup页面里,然后引发无限递归报错,这种错误最让人抓狂。
另一种做法是用自然语言描述访问范围。比如:“脚本能读取当前网页的HTML结构,能向当前标签页注入JS执行DOM操作,但不能访问本地文件系统或发送跨域请求”。相比直接罗列'hostPermissions',这种描述方式更不容易漏掉像'webRequest'这类隐性的依赖权限。
指定代码组织与文件粒度
第一步:要求ChatGPT按Manifest V3标准输出完整的文件树。直接跟它说:“输出三个独立的代码块,分别标记为【manifest.json】、【background.js】、【content.js】,不要合并,不要解释每行作用”。这样拿到的代码直接就能拖进项目里用。
第二步:对关键文件提硬性约束。比如:“background.js必须用ES模块语法,第一行是'export async function handleClick() {…}',函数名不能是'onClicked'”。之所以不能叫onClicked,是因为Chrome要求service worker里必须用addEventListener注册事件,命名不一致会导致事件绑定失效。
第三步:限制content script行为边界。比如:“content.js里禁止出现document.write()、eval()、with语句,所有DOM操作必须包裹在document.readyState === 'complete'判断内”。如果这些边界条件不写清,代码在当前页面能跑,换一个页面就可能炸掉。

