编写Chrome插件来监控URL的变化
前言
最近写了个简单的 chrome 插件来简化工作流程,其中一个功能就是对当前页面的 URL 进行监控以根据 URL 中的参数发起网络请求获取数据,本文主要记录本功能相关逻辑的实现。
监控 URL
通过 window.location.href
就可以轻松获取到当前页面的 URL ,然而想要响应当前页面的 URL 变化则需要对相应事件进行处理。
弹出页获取页面 URL
首先在 manifest.json 中添加对 tab 的操作权限:
1 | "permissions": [ |
1 | chrome.tabs.query({active:true}, function (tab) { |
页面加载时获取页面 URL
本例中,笔者的需求是不仅在用户点击插件图标来启动弹出页可进行操作,还可以在某类页面加载时,对当前正在加载页面的 URL 进行判断和处理。这样的需求就需要使用 Content Scripts 来实现了。
首先新建一个 JS 文件用于储存 Content Scripts :
1 | var url = window.location.href; |
可以看到,在 Content Scripts 中可以直截了当地使用 window.location.href
来获取当前页面的 URL ,随后使用正则判断是否匹配,如果匹配再做进一步的处理。
最后在 manifest.json 中设置 Content Scripts 即可:
1 | "content_scripts": [ |
细心的读者会发现,matches 键所对的值与上文正则中的 URL 是高度一致的,实际上通过这个设置我们就可以实现仅在指定页面加载 content_script.js 的需求,避免冗余加载的问题。此外,如果你的脚本中引用了其他 JS 文件(如 jquery 、Vue 等)的话,还需要将相应文件加入到上述配置的 JS 键的值中方可生效。
原文作者: Eason Yang
原文链接: https://easonyang.com/2017/10/24/chrome-plugin-to-monitor-url/
许可协议: 知识共享署名-非商业性使用 4.0 国际许可协议