斗魚擴展--攔截廣告,讓網頁加載更快(四)

代碼可以在 https://pan.baidu.com/s/1uN120-18hvAzELpJCQfbXA  處下載

 

有些廣告的 圖片，從請求到 下載到本地后加載，讓網頁加載速度變慢，其實我也不怎么看廣告的。那就屏蔽掉吧。

主要代碼，先在  manifest.json 申請阻斷網絡請求的 權限,並指定后台運行的js.

"permissions": [
        "webRequest",
        "webRequestBlocking",
        "<all_urls>"
    ],
    "background": {
        "scripts": ["js/BaseJs/background.js"]
    },
}

 

 

在js/BaseJs/目錄創建background.js文件，寫后台代碼。

阻斷的代碼寫在 background.js內(此處以百度為例).

chrome.webRequest.onBeforeRequest.addListener(
    function(details) { return {cancel: true}; },
    {
        urls: [
            "*://*.baidu.com/*"
        ]},
    ["blocking"]
);

 

 

 

 

請求被阻斷了,然后，我們只需要找出 斗魚上要阻斷 廣告圖片的源地址，阻斷即可。

下面是我的一些 阻斷 請求，background.js 的代碼如下

 

/ https://rpic.douyucdn.cn/asrpic/*.jpg // 房間外顯圖片一定別阻止
var blockUrls =[
    "https://sta-op.douyucdn.cn/nggsys/*.jpg",    // 視頻框內游戲推廣
    "https://sta-op.douyucdn.cn/nggsys/*.png",    // 視頻框內游戲推廣
    "https://shark.douyucdn.cn/app/douyu/res/page/*.gif",    //源圖片出錯預備圖
    "https://cs-op.douyucdn.cn/nggsys/*.jpg",    //其它游戲推廣
    "https://cs-op.douyucdn.cn/nggsys/*.png",    //其它游戲推廣    
    "https://sta-op.douyucdn.cn/vod-cover/*.jpg",    //視頻內的推薦圖片
    "https://sta-op.douyucdn.cn/vod-cover/*.png",    //視頻內的推薦圖片
    "http://image.wan.douyu.com/upload/*.png",    //個人說明里的游戲推廣
    "https://shark.douyucdn.cn/app/douyu/res/com/*.jpg?*",    //斗魚公會
    "https://shark.douyucdn.cn//app/douyu/res/page/room-normal/clientdown/*.png?*",    //客戶端下載頁圖片
];
var callback =function(details){
    if (blockUrls.length<=0 || blockUrls[0] == "" || blockUrls[0] == null) {
        return {cancel: false};
    }
    return {cancel: true};
};
var filter = {urls:blockUrls};
var opt_extraInfoSpec = ["blocking"];
chrome.webRequest.onBeforeRequest.addListener(callback, filter, opt_extraInfoSpec);

 

 

 

打開個 房間 看效果。

 

 

 

看來阻斷了不少，紅色的 即為 阻斷的請求。

 

 

 

被阻斷后的頁面，太影響 美觀了，所以要 美化下，就是移除這些不想看的元素。