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，默认为当前标签。我看到了几个问题：

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

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

为简单起见，我会假设这是你想要的 - 不是为一组标签切换，而是为所有标签切换。
每次运行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 */
  }
}

在重复的标签

1 个答案: