在重复的选项卡上自动更新 DOM 通过 chrome 扩展

Question

我正在开发一个简单的 Chrome 扩展程序，它可以切换（显示/隐藏）特定网页中的链接。

这是一个非常简单的结构，带有一个开关输入，可以打开/关闭扩展。

这里是 popup.js：

var $toggleSwitch = $("#myonoffswitch");

//Local storage state initialization
chrome.storage.sync.get(['sampleChecked'], function (result) {
$("#myonoffswitch").prop("checked", result.sampleChecked);
if (result.sampleChecked) {
  setOrangeIcon()
} else {
  setWhiteIcon()
}});

function toggleAllLinks() {
 chrome.tabs.executeScript({
  code: 'toggleLink()'
})}

function setOrangeIcon() {
 chrome.browserAction.setIcon({ path: 'icon1.png' })}

function setWhiteIcon() {
 chrome.browserAction.setIcon({ path: 'icon2.png' })}


$toggleSwitch.on("change", toggler);

function toggler() {
  $toggleSwitchChecked = $toggleSwitch.prop("checked");
  chrome.storage.sync.set({ "sampleChecked": $toggleSwitchChecked }, function () {
  console.log('Value is set to ' + $toggleSwitchChecked)});

toggleAllLinks();

if ($toggleSwitch.prop("checked")) {

   setOrangeIcon();

} else {

   setWhiteIcon();
}}

还有我的 content.js

function showLinkCallback(event) {
 if (event.target.innerText) {
    if (event.target.innerText.indexOf("EIP") != -1) {
        var link = $("label:contains('EIP')~a")
        .after("<a>Demo Page</a>")
        .css({
            'display': "inline",
            'margin': "5px"
        });

        var endpoint = $("a:contains('Demo Page')")
        var r = /\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/;


        let authorIP = link[0].href;
        let dispatchIP =link[1].href;
        let publishIP = link[2].href;



        var trimAuthor = authorIP.match(r);
        var trimDispatch = dispatchIP.match(r);
        var trimPublish = publishIP.match(r);

        var authorEndpoint = $(endpoint)[0];
        var dispatchEndpoint = $(endpoint)[1];
        var publishEndpoint = $(endpoint)[2];
        $(authorEndpoint).attr('href', 'http://'+trimAuthor+':4502/content/hello-world.html');
        $(dispatchEndpoint).attr('href', 'http://'+trimDispatch+'/content/hello-world.html');
        $(publishEndpoint).attr('href', 'http://'+trimPublish+':4503/content/hello-world.html');

        toggleLink();
    }}}

document.querySelector(".content").addEventListener('DOMNodeInserted', showLinkCallback);

 function toggleLink() {
   chrome.storage.sync.get(["sampleChecked"], function (result) {

    if (result.sampleChecked) {

        $("label:contains('EIP')~a~a").show();  
    } else {

        $("label:contains('EIP')~a~a").hide();
    }})};

所以我的问题是：

当我打开/关闭扩展时，链接会切换（显示/隐藏），当我重新加载页面时，它会保存扩展的状态。 我想要的是当我复制选项卡并打开/关闭按钮时，所有复制选项卡中的链接实时同时显示/隐藏，而无需重新加载页面。

我想它与 background.js 文件有关，但我在设置正确的脚本时遇到了问题。

Answer 1

现在，您通过executeScript 通知页面更改，没有标签 ID，默认为当前标签。我发现有几个问题：

1. 您的状态不是每个标签，您只有一个全局开/关。但是，只有当前选项卡会被通知更改，这意味着实际状态并不一致。

   这正是您描述的问题，但除非您在修复它时存储每个选项卡的状态，否则它将不限于重复的选项卡 - 它会为所有选项卡切换。

   为简单起见，我假设这是您想要的 - 不是针对某些选项卡组的切换，而是一次针对所有选项卡。

2. 每次运行 executeScript 时，它都会创建一个新的虚拟 javascript 文件以附加到内容脚本上下文中。这确实会不必要地泄漏资源。

除了使用executeScript，您应该在内容脚本中有一个事件侦听器，您可以通知更改。通常你会使用Messaging，但它并不能解决“如何广播到所有标签”的问题。

特别是对storage的更改，您可以向chrome.storage.onChanged注册一个监听器。

优点：您不需要做任何特别的事情来向内容脚本发送消息，并且您将对远程同步产生的更改做出反应。缺点：它会广播到扩展的所有页面，所以如果你真的需要非每个标签的状态，它的解决方案太简单了。

您可能需要解析事件详细信息以检查您想要更改的内容是否准确，这样您就不需要为不相关的更改过于频繁地运行代码。现在这不是问题，因为它是您唯一存储的东西，但最好早点努力。

chrome.storage.onChanged.addListener((changes, area) => {
  if (area == "sync" && "sampleChecked" in changes) {
    // Note, at this point you already have the new value
    //  so you don't have to query storage again in toggleLink
    toggleLink(changes.sampleChecked.newValue);
  }
});

function toggleLink(sampleChecked) {
  if (sampleChecked) {
    /* logic */
  } else {
    /* more logic */
  }
}