如何在此 Chrome 擴展代碼中包含多個指令？

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

'code' 對象接受一個字符串，如果您有多個指令，只需用分號分隔它們，例如：

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語句使您的腳本更有用。 您可以在此處閱讀更多相關信息。

在你的情況下，我會做這樣的事情：

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

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

這樣，如果元素是display: block ，則將其設置為display: none ，反之亦然。 祝你好運！