记录编写Chrome插件劫持网页js

前言
    “ 开发谷歌浏览器插件,就相当于在谷歌浏览器的基础之上进行活动,站在巨人的肩膀上,操作很多东西都方便了一些。有了插件,我们可以定制js爬虫、屏蔽网页广告,网页实时查词,修改http请求头,等等,能做的东西很多。” (来自网络)

    起初主要是想将一段js代码注入到一个网页当中,如果手动添加或使用上一个文章提到的油猴也可行,但考虑到如果别人使用,1是麻烦,2是还需要安装油猴插件,索性自己研究一下如何编写插件。
     得知Chrome插件本身的js只能作用到插件的browser_action(点击插件图标后弹出的窗口)页面,并不能对网页中的js进行操作。最终了解到可以通过劫持网页数据包替换指定URL下的数据包,使其运行我们自己的js。

编写

image.png

    Chrome插件开发只需要编写一个清单文件(manifest.json)和若干交互使用的js代码、html、css。

整体文件:

manifest.json内容:

{ 
    "name": "插件名称", 
    "description" : "插件介绍",    
    "version": "1.0",    //插件版本号,
    "manifest_version": 2,       //默认填写2
 "icons":
 {
  "64":"icon_mhys.png"      //插件的图标文件
 },
 "permissions": [           //插件的权限,这里写的是网络数据包方面需要的权限
    "tabs", 
 "webRequest",
 "webRequestBlocking",
 "http://*/",
 "https://*/",
 "storage"
 ],
 "background": {            //后台默认运行的js
  "scripts": ["main.js"]
 }
  }

main.js内容:

chrome.webRequest.onBeforeRequest.addListener (   //载入网络数据包的监控器
          function(details) {
            var url = details.url;  
            if( url.indexOf("http://ku-m.cn/content/templates/Life/js/hitokoto.js")!= -1) {  //如果数据包中url是hitokoto.js
               return {redirectUrl: "http://ku-m.cn/content/templates/Life/js/test.js"};  //那么就返回test.js。
         /* 
        总的来说,主要思路是,如果获取到指定的一个js发送的请求,那么被我们的监控器检测到,就返回另一个js的代码。
        hitokoto.js是我的博客本身就会载入的js,test.js是我另外在博客主机上建立的。
         */
               } 
   return true;     //如果返回true代表不对数据包进行操作
   },
          {urls:["<all_urls>"]},   //获取全部的URL
          ["blocking"] 
)

image.png

image.png

image.png

自此代码编写完毕,然后加载插件即可。


测试

劫持前的js:

劫持后:
(这里需要解释一下,为了不影响本身hitokoto.js的作用,所以我在test.js中将它的代码写了进去。)可见js劫持成功了,但这里有个问题就是alert提示框并没有运行,具体原因是什么我并不知道,因为我没有学过JavaScript 233333...