2017-02-18 76 views
0

我做了一個小擴展來阻止網站上的圖片,我可以通過彈出窗口打開和關閉。除了檢查它是否應該阻止圖像的部分之外,我得到了所有的工作。這是我的時刻了:如果background.js中的條件不起作用

的manifest.json

{ 
    "manifest_version": 2, 

    "name": "Name", 
    "description": "Description", 
    "version": "1.0", 
    "icons": { "256": "256icon.png", 
       "128": "128icon.png", 
       "64": "64icon.png", 
       "48": "48icon.png", 
       "32": "32icon.png", 
       "16": "16icon.png" }, 

    "browser_action": { 
     "default_title": "Name", 
     "default_popup": "popup.html" 
    }, 

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

    "permissions": [ 
     "webRequest", 
     "webRequestBlocking", 
     "activeTab", 
     "tabs", 
     "webNavigation", 
     "management", 
     "http://*/*", 
     "https://*/*", 
     "*://static2.gamekit.com/upload/*" 
    ] 
} 

popup.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title></title> 
    <link rel="stylesheet" href="popup.css"> 
</head> 

<body> 
    <script src="popup.js"></script> 
    <div class="PopUp" id="PopUp"> 
     <div class="onoffswitch"> 
      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"> 
      <label class="onoffswitch-label" for="myonoffswitch"> 
       <span class="onoffswitch-inner"></span> 
       <span class="onoffswitch-switch"></span> 
      </label> 
     </div> 
    </div> 
</body> 
</html> 

popup.js

document.addEventListener('DOMContentLoaded', function() { 
    'use strict'; 
    var bg = chrome.extension.getBackgroundPage(); 
    document.getElementById("myonoffswitch").checked = bg.onoffstate; 
}); //gets checkbox state from background.js and applies it 

function updatecheck() { //onclick function of the checkbox 
    'use strict'; 
//puts checkbox state in var (checkstate) 
    var checkstate = document.getElementById("myonoffswitch").checked; 
//sends checkbox state to background.js 
    chrome.runtime.sendMessage({onoffstate: checkstate}, function (response) { 
     console.log(response.bg_onoffstate); //response from background.js 
    }); 
} 

document.addEventListener('DOMContentLoaded', function() { 
    'use strict'; 
    document.getElementById('myonoffswitch').addEventListener('click', updatecheck); 
}); //adds onclick event to checkbox 

background.js

var onoffstate; 

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) { 
     'use strict'; 
     onoffstate = request.onoffstate; //puts checkbox state from popup.js into var 
     sendResponse({bg_onoffstate: onoffstate}); //debug response 
    } 
); 


if (onoffstate === true) { //check if checkbox is checked 
    chrome.webRequest.onBeforeRequest.addListener(
     function (details) { 
      'use strict'; 
      return {cancel: true}; 
     }, 
     {urls: ["*://static2.gamekit.com/upload/*"]}, 
     ["blocking"] //blocks images 
    ); 
} 

(對不起,亂碼)

當加載popup.html它從background.js拉保存的狀態(true/false)並將其應用於複選框。當檢查popup.html中的(un)複選框時,它會將其狀態發送到background.js。 background.js中保存的狀態將決定圖像是否被阻擋。這就是它不適用的地方。阻止圖像本身的代碼本身完美地工作。但是當我把它放入if函數時,它不會觸發。我試圖在其中放入其他東西來看它是否會執行它,但它沒有。

我在尋找是否有錯別的地方,但沒有找到任何東西。 JSLint也沒有顯示任何內容。

我希望有人能找出什麼是錯的。

鏈接到文件更容易獲得:Here

+1

看起來你在監聽者獲得狀態之前敲擊了你的條件。嘗試將var onoffstate初始化爲一個字符串,然後在您的if條件塊中打印該var以查看它是否被修改。 –

+0

移動evet監聽器中的if!或者將其封裝在一個函數中並從事件監聽器中調用該函數! –

+0

@ibrahimmahrir,這使它的工作,謝謝。我無法相信我忽視了這麼簡單的事情。 –

回答

0

不要添加If條件內onMessage事件處理程序(如意見提出)。這將多次綁定onBeforeRequest事件處理程序。

解決方案:刪除您的條件,並返回onBeforeRequest處理程序中的狀態。

chrome.webRequest.onBeforeRequest.addListener(
    function (details) { 
     'use strict'; 
      return {cancel: onoffstate}; 
    }, 
    {urls: ["*://cdn.sstatic.net/Sites/*"]}, 
    ["blocking"] //blocks images 
);