首页 >  Google Chrome浏览器插件关键事件监听方法

Google Chrome浏览器插件关键事件监听方法

来源:Google Chrome官网 时间:2025-05-27

Google Chrome浏览器插件关键事件监听方法1

1. 监听网页加载完成事件
- 在`background.js`中写入`chrome.tabs.onUpdated.addListener(function(tabId, info) { if (info.status === 'complete') { console.log('页面加载完成'); } })`→捕获标签页状态变化→执行特定操作(如自动注入脚本)。
2. 监控用户点击行为
- 通过`content.js`添加`document.addEventListener('click', function(e) { if (e.target.matches('.btn-primary')) { console.log('按钮被点击'); } })`→筛选特定元素点击事件→触发自定义功能(如模拟双击)。
3. 监听地址栏变更事件
- 使用`chrome.webNavigation.onBeforeNavigate.addListener(function(details) { console.log('即将访问:' + details.url); })`→获取导航前的URL→阻止危险网站跳转或记录浏览历史。
4. 捕捉表单提交动作
- 在内容脚本中注入`document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); console.log('提交被拦截'); })`→修改表单数据或验证输入内容→避免重复提交。
5. 监听浏览器关闭事件
- 在后台脚本添加`chrome.runtime.onInstalled.addListener(function() { chrome.runtime.onSuspend.addListener(function() { console.log('插件正在关闭'); }); })`→保存未完成数据→恢复时从本地存储读取。
6. 通过消息传递同步事件
- 在`background.js`中使用`chrome.runtime.onMessage.addListener(function(msg) { if (msg.type === 'buttonClick') { console.log('收到点击信号'); } })`→配合内容脚本发送消息→实现不同模块通信(如弹窗与页面交互)。
继续阅读
TOP