讓Chrome擴展程序在頁面重新加載時運行

Question

我正嘗試構建一個簡單的擴展插件，用於在瀏覽器操作（擴展圖標）切換時插入/隱藏div。我已經掌握了一些基礎知識，但是我希望當頁面重新加載時，擴展名保持在'開啓狀態'（即div插入）。只有在切換時才能刪除它。

當前在每次重新載入時，一切都重置。

這是我到目前爲止有：

manifest.json的

{ 
    "name": "My Extension", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "background": { 
     "scripts": ["background.js"], 
     "persistent": false 
    }, 
    "browser_action": { 
     "default_icon": "icon-off.png" 
    }, 
    "permissions": [ 
     "tabs" 
    ] 
} 

background.js

toggle = false; 

chrome.browserAction.onClicked.addListener(function(tab) { 

    toggle = !toggle; 

    var status = 'off'; 

    if(toggle) { 
     status = 'on'; 
    } 

    // Toggle the icon 
    chrome.browserAction.setIcon({path: 'icon-'+status+'.png', tabId:tab.id}); 

    // Execute script & pass a variable 
    chrome.tabs.executeScript(tab.id, { 
     code: 'var extension_status = "'+status+'";' 
    }, function() { 
     chrome.tabs.executeScript(tab.id, {file: 'inject.js'}); 
    }); 

}); 

inject.js

// ID for inserted element 
var my_div_id = 'foo'; 

// The div (returns null if doesn't exist) 
var my_div = document.getElementById(my_div_id); 

// If on for first time 
if(extension_status == 'on' && !my_div) { 

    // Create div 
    var div = document.createElement('div'); 
    div.id = my_div_id; 
    div.textContent = 'hello'; 

    // Insert into page 
    document.body.appendChild(div); 

} 
// When toggled off hide 
else if(extension_status == 'off') { 
    my_div.style.display = 'none'; 
} 
// When Toggled back on again show again 
else { 
    my_div.style.display = 'block'; 
} 

我是否需要將值傳回給我的background.js文件？還是有更好的方法來處理這個問題？

Answer 1

我終於弄清楚，我需要添加一個聽衆chrome.tabs.onUpdated作爲@ ViewSource的優秀答案也表示。下面是最終的工作例如：

manifest.json的

{ 
    "name": "My Extension", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "background": { 
     "scripts": ["background.js"], 
     "persistent": false 
    }, 
    "browser_action": { 
     "default_icon": "icons/icon-off.png" 
    } 
    "permissions": [ 
     "activeTab", 
     "<all_urls>" 
    ] 
} 

background.js

var toggle = false; 
var status = 'off'; 
var the_tab_id = ''; 

function set_status() { 
    toggle = !toggle; 
    status = 'off'; 
    if(toggle) { status = 'on'; } 
} 

function toggle_extension(tab){ 
    // Set icon 
    chrome.browserAction.setIcon({ path: 'icons/icon-'+status+'.png', tabId:tab.id }); 
    // Pass variable & execute script 
    chrome.tabs.executeScript({ code: 'var extension_status = "'+status+'"' }); 
    chrome.tabs.executeScript({ file: 'inject.js' }); 
    // Set the tab id 
    the_tab_id = tab.id; 
} 

function my_listener(tabId, changeInfo, tab) { 
    // If updated tab matches this one 
    if (changeInfo.status == "complete" && tabId == the_tab_id && status == 'on') { 
     toggle_extension(tab); 
    } 
} 

chrome.browserAction.onClicked.addListener(function(tab) { 
    set_status(); 
    toggle_extension(tab); 
}); 

chrome.tabs.onUpdated.addListener(my_listener); 

inject.js

if(extension_status == 'on') { 
    // do stuff 
} 

Answer 2

我自己也有同樣的問題。

頁面重新加載後，您需要再次切換擴展名，就像用戶按下browserAction按鈕時一樣，因爲用戶沒有更改擴展的狀態，所以不需要使用 - toggle = !toggle;。

那麼，您如何知道標籤何時重新加載？使用tabs.onUpdated

您的新背景頁應該是這樣的：

var toggle = false; 
var status = 'off'; 

chrome.browserAction.onClicked.addListener(function(tab) { 
    set_status(); 
    toggle_extansion() 
}); 

//add listener 
chrome.tabs.onUpdated.addListener(your_listener); 

function your_listener(tabId, changeInfo, tab) { 
    //Check that the extension should work on the updated tab 
    if (tab.url.search("://www.thesite.com") >-1){ 
    //toggle the extansion as you already did 
    toggle_extansion(); 
    } 
} 

function toggle_extansion(){ 
    // Toggle the icon 
    chrome.browserAction.setIcon({path: 'icon-'+status+'.png', tabId:tab.id}); 

    // Execute script & pass a variable 
    chrome.tabs.executeScript(tab.id, { 
     code: 'var extension_status = "'+status+'";' 
    }, function() { 
     chrome.tabs.executeScript(tab.id, {file: 'inject.js'}); 
    }); 
} 

function set_status(){ 
    toggle = !toggle; 

    if(toggle) { 
     status = 'on'; 
    } 
} 

注：沒有簡單的方法來只聽標籤containig在您的擴展清單的比賽地點。