Chrome请求过滤扩展实现

介绍接下来是Chrome扩展：入门，然后开始实现自己一开始的想法：网络请求过滤。简单的说就是监听某个网站的所有请求，并在扩展插件中显示想要的请求。扩展名是CaptureRequest。OriginMyGitHub要求的规范上面的想法相当模糊。为了达到这个目的，结合文档中的例子，需要做的是：扩展必须有相应的图标和提示。单击工具栏扩展图标打开一个新的选项卡页面以显示请求的信息。插件监听活动Tab中的网站请求，可以配置URL过滤监听。针对监控请求，支持根据url进行过滤和导出。有些函数不方便直接在文档中查找。这时候建议在Chrome商店找一个开源扩展，根据效果看里面用到的一些API，然后找到对应的文档。下面是FeHelper中的一些实现。需要说明的是，FeHelper是基于manifest_versionversion2开发的，后面的开发扩展都是基于推荐的version3，完整代码见CaptureRequest。实现图标相关信息配置根据入门指南介绍的信息，图标可能会出现在工具栏、扩展管理页面、权限警告和favicons中。manifest.json中配置的相关字段如下：{"name":"CaptureRequest","description":"CaptureRequest","version":"1.0","manifest_version":3,"action":{"default_icon":{"16":"xxx.png","32":"xxx.png",}},"图标":{"16":"xxx.png","32":"xxx.png",}}这里详细说明了图标用在什么地方，文档上建议使用PNG图片格式。据此，我发现有些图标太小会显得模糊。您也可以使用更大的尺寸，Chrome会自行将图片压缩到需要的尺寸。单击扩展以打开新的标签页。单击条目中的扩展程序将打开一个弹出窗口。Designtheuserinterface文档中介绍的form有Popup,Tooltip,Omnibox,Contextmenu,Overridepages,最有可能的是Overridepages，但是我试了下发现不行，于是去看了别人的实现发现通过监听图标点击事件可以打开一个新的Tab。但是看似可以直接使用的API，其实有以下几点需要考虑：去哪里监听这个事件？什么时候听这个事件？如何打开新标签页？您是否需要权限，如果需要，涉及哪些权限？在入口中添加功能是通过后台脚本。我觉得文档开头的那句话很重要：扩展是通过基于事件的编程来改变或增强Chrome的浏览体验。从文档中可以发现，在后台脚本中可以解决上述问题1和2，需要的权限是scripting。用于打开Tab的API是chrome.tabs，需要的权限是tabs。主要方法是在manifest.json中添加如下配置：{...+"permissions":[+"scripting",+"tabs",+],+"background":{+"service_worker":"background.js"+},...}然后新建一个后台脚本文件background.js，添加如下主要逻辑代码：chrome.action.onClicked.addListener(()=>{chrome.tabs.create({url:'page.html'});});监听请求和配置要将激活的Tab网站上的请求显示到打开的扩展页面，主要考虑的点是：如何找到激活的Tab？如何拦截网页请求？如何将拦截到的请求同步到扩展的自定义页面？通过上面打开Tab的效果，可以想到相关的API应该也在chrome.tabs中，发现查询方式可以解决第一个问题。网上搜索了拦截请求的方法，找到了文档chrome.webRequest，里面详细介绍了扩展中请求的生命周期和触发的事件。经过比较思考，最终决定监听onResponseStarted事件，需要的权限是webRequest。这解决了第二个问题。参考入门中改变颜色的方法。同样，你可以将请求缓存到chrome.storage，然后在扩展页面获取。所需的权限是storage。关于数据同步，可以通过监听chrome.storage.onChanged事件获取最新的数据变化。这解决了第三个问题。调试过程中，发现使用chrome.storage.sync与本地数据时，请求达到一定量后会报错。看了文档发现这个方法的最大值是有一定限制的，不适合存储大量请求的数据。使用chrome.storage.local比较合适。配置过滤请求的方法可以直接按照GettingStarted中的配置方法进行处理，但是需要注意的是，每当配置更新时，都需要重新监听onResponseStarted事件。主要方法是在manifest.json的permissions字段中添加webRequest和storage。在background.js中添加主要代码：//存储请求数据默认值letrequestList=[]//URL过滤默认值leturlPattern=''//监听请求事件处理程序consthandlerResponseStarted=(details)=>{//找到活动标签chrome.tabs.query({active:true},(tab)=>{requestList.unshift(details)chrome.storage.local.set({requestList});return{cancel:true};})}//监听storagechange事件chrome.storage.onChanged.addListener((changeObj,areaName)=>{const{urlPattern}=changeObj//由于在page.html中也监听到，所以判断urlPattern已更改if(areaName!=='local'||!urlPattern){console.warn('urlPatterndoesnotchange')return;}const{newValue}=urlPatternconsthasAddListen=chrome.webRequest.onResponseStarted.hasListener(handlerResponseStarted)if(hasAddListen){chrome.webRequest.onResponseStarted.removeListener(handlerResponseStarted);}chrome.webRequest.onResponseStarted.addListener(handlerResponseStarted,{urls:[newValue]},);})是扩展页page.html添加脚本文件pages.js，添加关键逻辑：chrome.storage.onChanged.addListener((changeObj,areaName)=>{const{requestList}=changeObj//因为它也在background.js中监听，if(areaName!=='local'||!requestList){console.warn('requestListdoesnotchange')return;}const{newValue}=requestList||{newValue:[]}constnewItem=newValue[0]||nullif(!newItem){console.warn('nodata')return;}//显示数据的逻辑showData(newItem)})导出的数据截取想要的数据，如果需要导出到本地使用的场景，可以参考FeHelper中的实现，找到文档chrome.downloads。所需的权限是下载。主要方法是在manifest.json的permissions字段中添加downloads。在pages.js中添加关键逻辑：letlocalFilterList=[];//页面过滤数据//点击导出按钮constexportEle=document.querySelector('#operate-export')exportEle.addEventListener('click',()=>{if(!localFilterList.length){alert('Novaliddata')return;}consttxt=JSON.stringify(localFilterList)letblob=newBlob([txt],{type:'application/octet-stream'});//获取文件名的秒数,你可以根据自己的喜好来定义letdt=(newDate()).getSeconds();chrome.downloads.download({url:URL.createObjectURL(blob),saveAs:true,conflictAction:'overwrite',filename:dt+'.json'});})参考资料Chrome扩展：入门Chrome扩展：什么是扩展？FeHelperGithub