我正在尝试构建一个简单的 chrome 扩展程序,当切换浏览器操作(扩展程序图标)时,它会插入/隐藏一个 div。我已经掌握了基础知识,但我希望扩展在页面重新加载时保持在 'on-state'(即插入的 div)中。只有在关闭时才应将其删除。
目前,每次重新加载时,一切都会重置。
这是我目前所拥有的:
list .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 文件?还是有更好的方法来处理这个问题?
最佳答案
我最终发现我需要为 chrome.tabs.onUpdated 添加一个监听器正如@ViewSource 的出色回答所述。这是最终的工作示例:
list .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
}
关于javascript - 在页面重新加载时保持 Chrome 扩展程序运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39843647/