chrome插件开发基础以及如何防止劫持

谷歌浏览器插件，可以大大的扩展你的浏览器的功能。包括但不仅限于这些功能：捕捉特定网页的内容，捕捉HTTP报文，捕捉用户浏览动作，改变浏览器地址栏/起始页/书签/Tab等界面元素的行为，与别的站点通信，修改网页内容……
开发文档（360翻译的）：https://open.chrome.360.cn/extension_dev/overview.html
开发流程比较简单：

打开开发者模式，加载扩展程序

创建manifest.json文件

此处指写了一部分常用的，详细的请查看文档

{
    "manifest_version":2,       		 //manifest版本 固定是2
    "name":"mengnan zeng",				 //插件名称
    "version":"1.0.0",					//插件版本
    "description":"super man",			//插件描述
    "author":"daweige",					//作者
    "icons":{							//图标
        "16":"img/icon.png",
        "48":"img/icon.png",
        "128":"img/icon.png"
    },								//插件后台配置
    "background": {
       "page":"back.html"
    },
    "browser_action":{				//浏览器行为，及顶部插件图标
        "default_icon":"img/icon.png",
        "default_title":"大伟哥",
        "default_popup":"main.html"
    },								//插件权限
    "permissions":[
        "tabs",						//标签页
        "storage",					//本地存储
        "activeTab",				//选中标签
        "http://*/*",
        "https://*/*",
        "webRequest", 				//监听网络请求权限
        "webRequestBlocking"
    ],
    "content_scripts":[				//加载页面时的注入行为
        {
            "matches":["https://www.baidu.cn/*"],
            "js":["js/jquery-1.7.2.min.js","js/content.js"],
            "run_at":"document_start"
        }
    ]

}

插件前台页


创建后台页，也可以不创建，可以进入后台页对background的js代码（一个非持久性后台脚本）进行调试

常用方法：

// chrome.tabs.getSelected       标签切换
// chrome.tabs.executeScript     插入代码
// chrome.contenxtMenus.create   创建右键菜单
//chrome.tabs.updata(tabId,{url:url})  标签跳转
......

例子1：向页面注入代码修改样式

// 注入样式
$(".update-css").click(function(){
    executeScriptToCurrentTab('document.body.style.background="red"')
    ;
})

// 获取标签id
function getCurrentTabId(callback){
    chrome.tabs.query({active:true,currentWindow:true},function(tabs){
        if(callback) callback(tabs.length ? tabs[0].id : null)
    })
}
// 注入代码
function executeScriptToCurrentTab(scriptcode){
    getCurrentTabId((tabId)=>{
        chrome.tabs.executeScript(tabId,{code:scriptcode})
    })
}

例子2：页面打开就修改网页内容（需在content_scripts中配置需要加载的js）

document.addEventListener("DOMContentLoaded",function(){
    // document.body.innerHTML="<p style='font-size:36px;line-height:500px;text-align:center'>风云，我是你爹哦</p>";
    var imgDom = "<img class='beautyGirl' src='https://img0.baidu.com/it/u=501558154,2179992071&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' style='position:fixed;top:0;right:0;width:100%;height:100vh;z-index:999999999'>"
    // document.body.appendChild(imgDom)
    $("body").append(imgDom)
    setTimeout(function(){
        $(".beautyGirl").remove()
    },3000)
})

例子3：请求拦截（需开启webRequest权限），这个需重点了解

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
    	//此处做拦截后具体操作
    },
    {urls: ["<all_urls>"]},
    ["blocking"]);

防止下载请求劫持

方案一：使用文件流下载方式下载文件,请求地址还会捕捉到，可能还是会不太安全，且下载响应会比较慢

 function fileDown() {
         var url = "downloadUrl";
         var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);   
         xhr.responseType = "blob";
        xhr.onload = function () {
          console.log(this.status);
          console.log(this.response);
             if (this.status === 200) {
                var content = this.response;
                var aTag = document.createElement('a');
               var blob = new Blob([content]);
                var headerName = xhr.getResponseHeader("Content-disposition");
                var fileName = decodeURIComponent(headerName).substring(20);
                aTag.download = 'fileName';
                aTag.href = URL.createObjectURL(blob);
                aTag.click();
                 URL.revokeObjectURL(blob);
            }
        };
         xhr.send()
	 }

方案2：使用iframe下载方式，插件监听不到请求

var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", "https://s.jiangxiatech.com/007/JZVideoConverterIns.exe");
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);

这里只是插件基础开发的简单介绍，需了解更多，请查看文档，end~