1. 通过内容脚本注入代码
- 在`manifest.json`中声明权限：添加`"permissions": ["activeTab", "scripting"]`→允许插件操作当前页面。
- 编写内容脚本：在插件目录下创建`content.js`→使用`document.querySelector('button').click()`→直接触发页面按钮的点击事件（需匹配目标元素）。
2. 利用背景脚本发送消息
- 配置背景监听：在`background.js`中定义`chrome.runtime.onMessage.addListener`→接收来自弹出的指令（如用户点击插件图标）。
- 向内容脚本传递指令：通过`chrome.tabs.sendMessage`将事件名称发送至`content.js`→内容脚本解析后执行对应操作（如`document.dispatchEvent(new Event('customEvent'))`）。
3. 修改网页原有JS逻辑
- 拦截函数调用：在`content.js`中使用`Function.prototype.apply`→覆盖页面原有的JS方法（例如修改`submitForm`函数逻辑）。
- 注入自定义事件：通过`var evt = new CustomEvent('myEvent', { detail: { key: 'value' } }); document.dispatchEvent(evt);`→模拟用户操作或传递数据给网页（需网页本身有监听该事件的逻辑）。
4. 处理跨域与权限限制
- 检查网页来源：在`manifest.json`的`"content_scripts"`中设置`"matches": ["https://*/*"]`→仅对指定域名生效（避免违反同源策略）。
- 启用特权模式：在`manifest.json`中添加`"permissions": ["scripting", "activeTab"]`→允许插件修改页面JS环境（可能被部分网站检测到，需谨慎使用）。
5. 调试与验证触发效果
- 使用控制台输出：在`content.js`中添加`console.log('Event triggered')`→刷新页面并检查开发者工具是否打印日志（确认代码执行情况）。
- 观察页面反应：触发事件后查看网页是否执行预期操作（如弹出提示框、加载新内容）→若无反应需检查元素选择器或事件名称是否正确。