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/3bfb248dacd9 chrome插件的核心配置介绍 https://www.jianshu.com/p/db94dc5cd68d Chrome插件的8种展示形式 https://www.jianshu.com/p/3f99a140276f chrome插件开发中5种类型的JS对比 https://www.jianshu.com/p/c57bef2cf43b chrome插件 各个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) { var XHR = XMLHttpRequest.prototype; var open = XHR.open; var send = XHR.send; XHR.open = function (method, url) { this._method = method; this._url = url; return open.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 }); return send.apply(this, arguments); }; })(XMLHttpRequest);

2.监听fetch

代码如下（示例）：

(function () { let origFetch = window.fetch; window.fetch = async function (...args) { const response = await origFetch(...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)); return response; } })();

以上两段代码存储为 injected.js
















，下文中我们将它注入到页面


 




 




 




。

三


 




 




 




、注入

1.权限设置

需要注意manifest.json文件的设置    
    
    
 ，需要将注入到页面的文件设置为web_accessible_resources

permissions如果有需要的权限也需要设置好 "content_scripts": [ { "matches": [ "*://*.yourweb.com/*" ], "js": [ "./content.js" ], "run_at": "document_start", "all_frames": true } ], "web_accessible_resources": ["injected.js"] "permissions": [ "cookies", "storage", "<all_urls>" ]

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

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

   

   

。

console.log(content script start); // inject injected script var s = 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 script window.addEventListener(message, function (e) { console.log(content script received: , e.data.type, e.data.data); });

总结

一点点笔记  


     


     


     ，目前刚接触js


 




 




 




，不是特别了解   

   

   

，很多语言层面的特性不是很会   

     

     

     ，计划是之后转到ts上   

     

     

     。

另外如果没有特殊需求



  




  




  



，还是推荐使用油猴插件+油猴脚本

  


  


  


，省去很多无聊的负担



  




  




  



。

顺便吐槽js真是个屎坑  


  


  


。require/import这种c(#include)都有的模块引用机制还得到es6才添加到语言层面    
     
     
    。

很多语言层面应该支持的东西    
     
     
    ，都要通过库来曲线实现




   




   




   


，整个一填坑史




   




   




   


。