在页面重新加载时保持Chrome扩展程序运行

Question

我正在尝试构建一个简单的 Chrome 扩展程序，当浏览器操作（扩展图标）被切换时，插入/隐藏一个 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文件吗？或者有更好的处理方法吗？

- shanomurphy

---

除其他事项外，目前您在后台的状态不是按选项卡分的（即使您设置的图标是按选项卡分的，并且内容脚本状态必须按选项卡分）。首先考虑一下这个问题。 - Xan

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
}

- shanomurphy

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';
    }
}

注意：在您的扩展程序清单中，没有一种简单的方式只听取包含匹配站点的选项卡。

- ViewSource

---

非常感谢您的回复 :) 我最终弄清楚了我需要使用一个监听器来处理 onUpdated，并且摸索着解决了问题。不过您的答案确实帮助我整理了代码。当单击扩展时，我将选项卡 ID 设置为变量，然后使用它来查找更新的选项卡是否匹配。现在我已经添加了一个最终可工作的示例。再次感谢。 - shanomurphy