让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在您的扩展清单的比赛地点。