2013-06-18 45 views
5

我有這個簡單的擴展,它在鉻的工具欄上顯示圖標,並顯示一個啓用/禁用按鈕。我想補充的功能按鈕來禁用或啓用它觸發對訪問谷歌網站的content_script.js如何在google擴展中開啓/關閉content_scripts?

popup.js

var setLayout = function(){ 
    var list = document.createElement('ul'); 

    var enable = document.createElement('li'); 
    enable.appendChild(document.createTextNode('Enable Script')); 
    enable.onclick = function(){toggle(0)}; 

    var disable = document.createElement('li'); 
    disable.appendChild(document.createTextNode('Disable Script')); 
    disable.onclick = function(){toggle(1)}; 

    list.appendChild(disable); 
    document.body.appendChild(list); 

    function toggle(n){ 
     list.removeChild(n == 0 ? enable : disable); 
     list.appendChild(n == 0 ? disable : enable); 
    } 
}; 

document.addEventListener('DOMContentLoaded', setLayout, false); 

的manifest.json

{ 
    "manifest_version": 2, 

    "name": "test", 
    "description": "test", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["https://www.google.co.uk/"], 
     "js": ["content_scripts.js"] 
    } 
    ] 
} 

content_scripts.js

(function(){ 
    alert('hello'); 
})(); 

我是新的谷歌擴展,不知道該怎麼做,我想在點擊禁用/啓用按鈕後更改顯示器,但在閱讀Google網站上的文檔後找不到正確的命令。

任何幫助將grely讚賞。

回答

2

經過一番研究,我想通過使用backround pages,sendMessagelocalstorage來解決這個問題。

background pages作爲popup.jscontent_scripts.js之間的溝通者工作,它們在兩個不同的文檔上,它不可能直接在它們之間傳遞變量。

要啓用mamifest我添加背景頁:

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

localstorage本地保存的變量,並記住他們,即使關閉瀏覽器,然後再次打開,因此,當啓用/禁用按鈕被點擊它設置localStorage['status'] = 1/0從而可以通過background.js訪問並傳遞給content_scripts.js

要設置的localStorage變量i加至popup.js

if(!localStorage.status) localStorage['status'] = 1; 
toggle(2); 
enable.onclick = function(){toggle(0)}; 
disable.onclick = function(){toggle(1)}; 
function toggle(n){ 
    if((n == 0) && (enable.parentNode == list)){ 
     list.removeChild(enable); 
     list.appendChild(disable); 
     localStorage.status = 1; 
    }else if((n == 1) && (disable.parentNode == list)){ 
     list.removeChild(disable); 
     list.appendChild(enable); 
     localStorage.status = 0; 
    }else if((n == 2) && (!list.hasChildNodes())){ 
     list.appendChild((localStorage.status == 1) ? disable : enable); 
     chrome.browserAction.setIcon({path: (localStorage.status == 1) ? "icons/icon19.png" : "icons/icon19_disabled.png"}); 
    }else{ 
     return; 
    } 
} 

要傳遞localStorage.statuscontent_scripts.js我不得不上content_scrips.js其上裝載的發送請求消息給background.js使用sendMessage,和onMessagebackground.js,它會監聽請求和用localStorage.status的值發送迴應content_scripts.js

background.js:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if (request.type == "status") sendResponse({status: localStorage.status}); 
}); 

content_scripts。js

var fn = function(){...}; 
chrome.runtime.sendMessage({type: "status"}, function(response) { 
    if(response.status == 1) fn(); 
    return; 
}); 

就是這樣,希望有人覺得它有用。

1

嘗試injecting the content script使用代碼,而不是manifest文件,這樣的事情:

chrome.tabs.executeScript(null, {file: "content_script.js"}); 

然後可以使用message passing後臺頁面和內容腳本之間決定是否要注入的內容腳本,或也許是內容腳本本身中的一個if語句,它只在擴展程序的操作按鈕設置標誌時運行。

您可以使用browser action event來檢測何時按下動作按鈕。

+0

感謝您的回答,但它並沒有多大幫助,我對谷歌的擴展很陌生。如果您可以詳細闡述您的答案或展示如何在您的代碼中應用您的解決方案,那麼它就會變得更加龐大。 – razzak