Question

我正在阅读Chrome扩展文档，并且试图使按钮将ID显示更改为无。

这是我到目前为止所做的：

changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.getElementById("topnav").style.display = "none";'});
    });
  };

我试图放置一个拨动开关，所以当单击按钮时，显示又回到了阻止状态，但是我想这么做。

这是我尝试过的：

changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,tabs[1].id,
          {code: 'document.getElementById("topnav").style.display = "none";'},
          {code: 'document.getElementById("topnav").style.display = "block";'});
    });
  };

也尝试过此解决方案：

changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
        function myFunction() {
          var x = document.getElementById("myDIV");
          if (x.style.display === "none") {
              x.style.display = "block";
          } else {
              x.style.display = "none";
          }
      });
    });
  };

我能够使其在chrome.tabs.executeScript之外运行，但我在内部需要它，因此它更改了我选择的页面的CSS。

对于我想做的事情，它可能有无用的代码。

原因是因为我刚刚关注https://developer.chrome.com/extensions/getstarted

非常感谢！

Answer 1

“代码”对象采用字符串，如果您有多个指令，只需用分号将它们分开，例如：

chrome.tabs.executeScript(tabs[0].id, { 
  code: "alert('first alert');alert('second alert')";
});

对于切换效果，您可以尝试

chrome.tabs.executeScript(tab[0].id, { 
  code: `document.getElementById('topnav').style.display = document.getElementById('topnav').style.display === 'none' 
    ? 'block' 
    : 'none'`; 
});

Answer 2

您可以使用if...else语句使脚本更加有用。您可以详细了解here。

在您的情况下，我会做类似的事情：

const topnav = document.getElementById("topnav");

if (topnav.style.display === 'block') {
  topnav.style.display = 'none';
} else {
  topnav.style.display = 'block';
}

这样，如果元素为display: block，则将其设置为display: none，反之亦然。祝你好运！

此Chrome扩展程序代码中如何包含多个指令？

2 个答案: