2013-06-18 52 views
0

我用Chrome試圖創建我的第一個擴展程序。基本上,我想創建一個腳本,在特定的域上執行一些DOM操作。此外,我希望用戶能夠在訪問特定域時通過地址欄中顯示的圖標來切換腳本。切換注入context_script

到目前爲止,我有這個manifest.json的:

{ 
    "manifest_version": 2, 

    "name": "Ekstrafri", 
    "description": "Removes annoying boxes for paid articles.", 
    "version": "1.0", 
    "page_action": { 
    "default_title": "Foobar" 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["http://ekstrabladet.dk/*"], 
     "js": ["jquery.min.js", "cleaner.js"], 
     "run_at": "document_end" 
    } 
    ] 
} 

cleaner.js包含了兩個jQuery的DOM選擇,去除一些東西的。

當前設置有效,但上下文腳本始終被注入。我希望用戶能夠切換,這應該觸發用戶接受或拒絕頁面重新加載的確認提示。

無論如何,page_action似乎沒有顯示任何圖標。根據文檔,它應該在地址欄中顯示一個圖標。

我有兩個問題:

  1. 如何顯示的內容相匹配這個page_action圖標?
  2. 如何將事件綁定到該圖標?
+1

我不認爲你_can_或_應該通過清單來做到這一點。內容腳本中的一個簡單的'if'就可以了;) – c69

+0

@ c69是正確的。我其實剛剛在這裏回答了一個類似的問題:http://stackoverflow.com/questions/17174093/how-do-i-toggle-on-off-content-scripts-in-a-google-extension/17184874#17184874 –

回答

0

你可以在這裏做的一件事是獲取並在background.js頁面中使用消息passing framework設置變量。實質上,當內容腳本運行時,您可以聯繫後臺腳本來檢查布爾變量的狀態。然後您可以確定是否執行腳本的其餘部分。

chrome.extension.sendMessage({ cmd: "runScript" }, function (response) { 
    if (response == true) { 
    //Run the rest of your script inside here... 
    } 
}); 

您也可以使用這個初始調用一些UI綁定頁面上,因此您可以切換此狀態(即切換內容腳本開/關)。在這個例子中,我使用了一個複選框。

$("chkOnOff").click(function(){ 

    var scriptOn = ($(this).is(":checked"); 

    chrome.extension.sendMessage({ cmd: "updateRunScriptState", data: { "scriptOn" : scriptOn } }, function (response) { 
     //Update confirmed 
    }); 

}); 

background.js網頁看起來是這樣的:

//Global variable in background.js 
var scriptOn = true; 

chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) { 
    if (request.cmd == "runScript") { 
     sendResponse(scriptOn); 
    } 

    if (request.cmd == "updateRunScriptState") { 
     //here we can update the state 
     scriptOn = request.data.scriptOn; 
    } 
}); 

而且不要忘記在清單中註冊background.js頁面。

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