chrome拓展开发实战：页面脚本的拦截注入

{
  "manifest_version": 2,
  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",
  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

{
     "manifest_version": 2,
     "name": "ihorve.com viewer",
     "version": "0.0.1",
     "background": { "scripts": ["background.js"] },
     "permissions": ["tabs"],
     "page_action": {
          "default_icon": {
               "19": "ihorve_19.png",
               "38": "ihorve_38.png"
          },
          "default_title": "ihorve.com article information",
          "default_popup": "popup.html"
     }
}

chrome.pageAction.show(integer tabId);
chrome.pageAction.hide(integer tabId);

"background": {
    "scripts": ["background.js"]
},

chrome.windows.getCurrent(function( currentWindow ) {
  //获取有指定属性的标签，为空获取全部标签
  chrome.tabs.query( {
    active: true, windowId: currentWindow.id
  }, function(activeTabs) {
    console.log("TabId:" + activeTabs[0].id);
    //执行注入，第一个参数表示向哪个标签注入
    //第二个参数是一个option对象，file表示要注入的文件，也可以是code
    //是code时，对应的值为要执行的js脚本内容，如：code: "alert(1);"
    //allFrames表示如果页面中有iframe，是否也向iframe中注入脚本
    chrome.tabs.executeScript(activeTabs[0].id, {
      file: "sendlink.js",
      allFrames: false
    });
  });
});

var links = document.getElementsByTagName("script"),
    arr = [];
[].forEach.call(links, function(el) {
    var href = el.src;
    if(/[http|https]:\/\//gi.test(href)){
    arr.push(href);
    }
});
arr.sort();
//向拓展发送消息，这里就涉及到了消息通讯
chrome.extension.sendMessage(arr);

chrome.extension.onMessage.addListener(function(links) {
  //处理接收到的links，展现在拓展页面中的DOM里
});

"permissions": ["downloads"],

//下载所选链接
downloadLinks: function() {
  for(var i = 0, n = MainLogic.visibleLinks.length; i < n; i++) {
    if (MainLogic.$id("cb" + i).checked){
      //chrome拓展的下载API
      chrome.downloads.download({url: MainLogic.visibleLinks[i]});
    }
  }
  window.close();
}

"permissions": [
    "webRequest", 
    "webRequestBlocking"
],

// 监听发送请求
chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    console.log(details);
    //拦截到执行资源后，为资源进行重定向
    //也就是是只要请求的资源匹配拦截规则，就转而执行returnjs.js
    return {redirectUrl: chrome.extension.getURL("returnjs.js")};
  },
  {
    //配置拦截匹配的url，数组里域名下的资源都将被拦截
    urls: [
        "*://*.jquery.top/*",
        "*://*.elongstatic.com/*"
    ],
    //拦截的资源类型，在这里只拦截script脚本，也可以拦截image等其他静态资源
    types: ["script"]
  },
  //要执行的操作，这里配置为阻断
  ["blocking"]
);

chrome.webRequest.onBeforeRequest.addListener(
    callback, filter, opt_extraInfoSpec
);

// 弹出通知
chrome.notifications.clear("newNotice", function( wasClear ) {
    chrome.notifications.create("newNotice", {
    type: "basic",
    iconUrl: chrome.runtime.getURL("images/logo.png"),
    title: "页面JS拦截提醒",
    message: "拓展将开启页面JS拦截，若要恢复js执行请关闭拓展。"
    }, function( notificationId ) {
        console.log(notificationId);
    } );
});

//获取远程脚本并进行普通注入
  getScript: function() {
    MainLogic.setInjectUrl();
    var url = MainLogic.injecturl;
    if( url ) {
      $("#injectValue").removeClass("errbox");
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            var code = xhr.responseText;
            console.log(code);
            //第一个参数为null时，表示注入的目标是当前打开的tab
            //获取到返回值时，通过code注入到页面中，在回调中打印注入成功的提示
            chrome.tabs.executeScript(null, {code: code, allFrames: false}, function(){
              console.log("executeScript success!!!!!!!!!");
            });
          } else {
            $('#xhr-errbox').show();
            setTimeout(function() {
              $('#xhr-errbox').hide();
            }, 2000);
          }
        }
      }
      var ts = new Date().getTime();
      var u;
      if(url.indexOf('?') === -1){
        u = url + '?_t=' + ts;
      } else {
        u = url + '&_t=' + ts;
      }
      xhr.open('GET',u,true);
      xhr.send(null);
    } else {
      $("#injectValue").addClass("errbox");
      MainLogic.msgBox("远程脚本不能为空！");
    }
  },

"content_scripts": [
    {
        "matches": ["http://*/*"],//匹配url
        "js": ["jquery-1.9.1.js"],//向匹配url中注入指定脚本
                "css": ["css.css"],//向匹配url中注入css样式
        "run_at": "document_end"//注入时机，这里是在document节点加载完成时注入
    }
],

// 执行注入requirejs
  injectRequire: function() {
    MainLogic.setInjectUrl();
    //require.js打在拓展包中，通过chrome.extension.getURL来获取资源路径
    var requireurl = chrome.extension.getURL("require.js");
    var datamainjs = MainLogic.injecturl;
    if( datamainjs ) {
      var executeCode = '' +
        'var scripts = document.getElementsByTagName("script");' +
        '[].forEach.call(scripts, function(script) {' +
        '  if(!!script.src && script.src == "' + requireurl + '"){' +
        '    script.parentNode.removeChild(script);' +
        '  }' +
        '});' +
        'var Req_script = document.createElement("script");' +
        'Req_script.src = "' + requireurl + '";' +
        'Req_script.setAttribute("data-main","' + datamainjs + '");' +
        'document.body.appendChild(Req_script);';
      chrome.tabs.executeScript(null, {
        code: executeCode
      });
      MainLogic.msgBox("已成功注入！");
    } else {
      $("#injectValue").addClass("errbox");
      MainLogic.msgBox("远程脚本不能为空！");
    }
  },

"web_accessible_resources": [
    "require.js",
    "returnjs.js",
    "images/*" //images目录下的所有资源，拓展都将有权访问
]