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

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

创建manifest.json文件

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

插件前台页 创建后台页，也可以不创建，可以进入后台页对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~