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

我正在开发一个简单的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();
    }})};

函数showLinkCallback（事件）{
if（event.target.innerText）{
if（event.target.innerText.indexOf（“EIP”）！=-1）{
var link=$（“标签：包含（'EIP'）~a”）
.之后（“演示页”）
.css({
“显示”：“内联”，
“边距”：“5px”
});
var端点=$（“a:contains（'Demo Page'））
var r=/\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/；
让authorIP=link[0].href；
让dispatchIP=link[1].href；
让publishIP=link[2].href；
var trimAuthor=authorIP.match（r）；
var trimpdispatch=dispatchIP.match（r）；
var trimPublish=publishIP.match（r）；
var authorEndpoint=$（端点）[0]；
var dispatchEndpoint=$（endpoint）[1]；
var publishEndpoint=$（端点）[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'）；
切换链接（）；
}}}
document.querySelector（“.content”）.addEventListener（'domandeinserted'，showLinkCallback）；
函数toggleLink（）{
chrome.storage.sync.get（[“sampleChecked”]，函数（结果）{
如果（结果。样本已检查）{
$（“标签：包含（'EIP'）~a~a”）.show（）；
}否则{
$（“标签：包含（'EIP'）~a~a”）.hide（）；
}})};

所以我的问题是：

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

---

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

现在，您正在通过

executeScript

通知页面更改，没有选项卡ID，默认为当前选项卡。我认为这有几个问题：

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

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

为了简单起见，我假设这是您想要的——不是一组选项卡的切换，而是一次切换所有选项卡

每次运行

executeScript

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

不要使用

executeScript

，您应该在内容脚本中有一个事件侦听器，可以将更改通知给它。通常，您会使用，但这并不能解决“如何向所有选项卡广播”的问题

特别是对于

存储的更改

，您可以将侦听器注册到

好处：您不需要对内容脚本进行任何特殊的消息传递，您将对远程同步引起的更改做出反应。缺点：它会广播到扩展的所有页面，所以如果您真的需要非每标签状态，这是一个太简单的解决方案

您可能希望解析事件详细信息，以检查是否确实更改了您想要更改的内容，这样您就不需要为不相关的更改频繁运行代码。现在这不是一个问题，因为它是你唯一储存的东西，但最好尽早投入精力

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 */
  }
}