Chrome插件开发

更新了使用油猴插件配合油猴脚本拦截请求数据的方式，比插件方式开发简单很多，推荐。https://blog.csdn.net/Backspace110/article/details/128807263

前言

截至文章发布，chrome插件规范有v3和v2版本。我这里主要讲v2版本，他们改动不大，主要是manifest.json调整。

完整代码https://github.com/IOL0ol1/GetResponse我们都能够在网上查到不少资料了。不了解的可以先看看前置资料，个人认为对我这种只有c/c++/c#开发经验100%js新手来讲，我看的前置资料：

Chrome插件介绍 https://www.jianshu.com/p/3bfb248dacd9chrome插件的核心配置介绍 https://www.jianshu.com/p/db94dc5cd68dChrome插件的8种展示形式 https://www.jianshu.com/p/3f99a140276fchrome插件开发中5种类型的JS对比 https://www.jianshu.com/p/c57bef2cf43bchrome插件 各个js之间的消息通讯 https://www.jianshu.com/p/3c7fea458245补充 https://www.jianshu.com/p/77a1523b0c20最权威的还是官方网址，不过google系你懂的。https://developer.chrome.com/docs/extensions/Chrome插件的JS主要可以分为这5类：injected script （注入脚本，注入到document页面的脚本, 和页面js完全相同的上下文空间content script （内容脚本，能访问document，不能访问页面js中的数据popup script （弹窗脚本，点击插件的弹窗，和下文后台脚本差不多，而且可以互相访问，独立上下文空间background script （后台脚本，插件启用期间一直运行，独立上下文空间devtools script （自定义开发者工具，在F12中添加一个自定义选项卡

举个例子，我的插件是针对百度写的，只要要打开浏览器，插件是启用状态，后台脚本就开始运行了。我点击插件图标，弹窗弹出，触发弹窗脚本运行。关闭弹窗，弹窗脚本结束浏览器新建标签页A访问了百度，A页面的内容脚本和注入脚本开始运行。浏览器新建标签页B访问了百度，B页面的内容脚本和注入脚本开始运行。关闭标签页A，A页面的内容脚本和注入脚本结束运行。关闭标签页B，B页面的内容脚本和注入脚本结束运行。关闭浏览器或禁用插件，后台脚本结束。后台脚本可以监听一些全局事件，而且可以发起跨域访问(全局的东西，没有域就不存在跨域，哈哈)。内容脚本结合注入脚本主要处理当前页面，可以和后台脚本通讯。

当然，这篇文章我是打算投原创的，所以主要写自己遇到的实际应用场景和解决方案：我需要通过插件获取网页请求的响应数据，而且不能重复请求，即安装插件之后和之前，浏览器的请求数量不应发生改变（插件需要对后端透明）。

一、方案思路

因为要获取响应的body数据，所以基本思路就是通过content script 向当前页面注入 injected script 监听页面的请求和响应数据。但是存在两种 XMLHttpRequest 和 fetch 两种js请求操作，我需要监听这两种请求，所以下文会细说具体操作，我们可以根据应用场景选用。

二、准备注入文件

1. 监听XMLHttpRequest

我的方案是将监听之后的响应数据发送到content script，这部分可以根据实际需要修改。injectedXhr.js代码：

(function(xhr){varXHR=XMLHttpRequest.prototype;varopen=XHR.open;varsend=XHR.send;XHR.open=function(method,url){this._method=method;this._url=url;returnopen.apply(this,arguments);};XHR.send=function(postData){console.log(xhr request:,this._method,this._url,postData);this.addEventListener(load,function(){// sessionStorage[key] = JSON.stringify(response); // 插件需要添加storage权限// document.cookie// localStorage[key]window.postMessage({type:xhr,data:this.response},*);// 将响应发送到 content script});returnsend.apply(this,arguments);};})(XMLHttpRequest);

2.监听fetch

代码如下（示例）：

(function(){letorigFetch=window.fetch;window.fetch=asyncfunction(...args){constresponse=awaitorigFetch(...args);console.log(fetch request:,args);response.clone().blob()// 此处需要根据不同数据调用不同方法，这里演示的是二进制大文件，比如音频.then(data=>{// 对于二进制大文件可以创建为URL(blob:开头)，供其它脚本访问//sessionStorage[wave] = URL.createObjectURL(data); // 插件需要添加storage权限window.postMessage({type:fetch,data:URL.createObjectURL(data)},*);// send to content script}).catch(err=>console.error(err));returnresponse;}})();

以上两段代码存储为 injected.js，下文中我们将它注入到页面。

三、注入

1.权限设置

需要注意manifest.json文件的设置，需要将注入到页面的文件设置为web_accessible_resourcespermissions如果有需要的权限也需要设置好

"content_scripts":[{"matches":["*://*.yourweb.com/*"],"js":["./content.js"],"run_at":"document_start","all_frames":true}],"web_accessible_resources":["injected.js"]"permissions":["cookies","storage",""]

2.注入文件注入到页面中

content.js文件中将injected.js文件注入到页面中。

console.log(content script start);// inject injected scriptvars=document.createElement(script);s.src=chrome.runtime.getURL(injected.js);s.onload=function(){this.remove();};(document.head||document.documentElement).appendChild(s);// receive message from injected scriptwindow.addEventListener(message,function(e){console.log(content script received:,e.data.type,e.data.data);});

总结

一点点笔记，目前刚接触js，不是特别了解，很多语言层面的特性不是很会，计划是之后转到ts上。另外如果没有特殊需求，还是推荐使用油猴插件+油猴脚本，省去很多无聊的负担。顺便吐槽js真是个屎坑。require/import这种c(#include)都有的模块引用机制还得到es6才添加到语言层面。很多语言层面应该支持的东西，都要通过库来曲线实现，整个一填坑史。