2015-11-23 36 views
0

我的問題是這樣的: 我能夠偵聽器附加到browser_action單選按鈕,在Chrome擴展,如果我想要它做的,因此它可以彈出一個警告窗口,但瀏覽器操作的單選按鈕點擊

我的意圖是在頁面上隱藏()/ show()一個按鈕,並將其插入到具有相同擴展名的DOM中。

我的問題是我錯過了什麼?我怎樣才能使它工作?

下面你可以找到我使用的所有代碼片段。

的manifest.json

{"manifest_version": 2, 
"name": "Button Summoner", 
"description": "This extension shows a pop-up window where you can summon a button", 
"version": "0.1", 
"browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
}, 
"content_scripts": [ 
{ 
"matches": ["https://*/*"], 
"js": ["jquery_min.js","summoner.js"] 
}]} 

summoner.js

jQuery(document).ready(function(){ 
    var button = $('<button id="cc_lookUp_button >Button</button>'); 
    button.hide(); 
    $(button).insertAfter("body"); 
}); 

popup.html

<!doctype html> 
<html> 
<head> 
    <script src="jquery_min.js"></script> 
    <script src="popup.js"></script> 
</head> 
    <body> 
     Enable/Disable Extension<br/> 
     <input type="radio" id="radioEnable" name="enable" value="enable">Enable</br> 
     <input type="radio" id="radioDisable" name="enable" value="disable">Disable</br></br> 

個popup.js

document.addEventListener('DOMContentLoaded', function() { 
    document.querySelector('#radioEnable').addEventListener('change', changeHandler); 
}); 
function changeHandler(){ 

if(radioEnable.checked){ 
    alert("BYOB"); //this works like a charm 
    $('#cc_lookUp_button').show(); //this is not 
} 
else{ 
    $('#cc_lookUp_button').hide(); // neither this 

    } 
} 

沒有錯誤消息,它只是根本不起作用。

+0

我添加按鈕的部分完美地工作。問題在於如何通過browser_action彈出窗口修改該按鈕的可見性。但是,感謝您閱讀關於此主題的更多鏈接。 – Gregion

+0

您正在頁面中插入按鈕。但隨後嘗試訪問彈出的HTML。 – Moin

+0

意味着上下文和DOM是不同的。使用消息傳遞與內容腳本進行通信。 – Moin

回答

1

我能解決這個問題,所以我認爲將它分享給社區是有用的。

你可以使用不同的解決方案,如果它更適合你,我把可執行代碼分隔成不同的文件似乎是一個有組織的解決方案。

另一個是寫一個「code:'代碼來到這裏''部分,而不是在popup.js中包含另一個.js文件。

的manifest.json

{"manifest_version": 2, 
"name": "Button Summoner", 
"description": "This extension shows a pop-up window where you can summon a button", 
"version": "0.1", 
"browser_action": { 
"default_icon": "icon.png", 
"default_popup": "popup.html" 
}, 
"content_scripts": [ 
{ 
"matches": ["https://*/*"], 
"js": ["jquery_min.js","button_show.js","button_hide.js","crafty_postcode.class.js","cc_lookup_summoner.js"] 
}]} 

popup.js

document.addEventListener('DOMContentLoaded', function() { 
document.querySelector('#radioEnable').addEventListener('change', changeHandler); 
}); 
function changeHandler(){ 

if(radioEnable.checked){ 
chrome.tabs.executeScript({ 
     file : 'button_show.js' 
    }); 
} 
else{ 
chrome.tabs.executeScript({ 
     file : 'button_hide.js' 
    }); 
} 

button_hide.js

$('#cc_lookUp_button').hide(); 

button_show.js

$('#cc_lookUp_button').show();