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

Question

i'm reading Chrome Extension Docs and i'm trying to make a button changes a ID display to none.

This is what i have done so far:

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";'});
    });
  };

I was trying to put a toggle, so when the button is clicked, the display comes back to block but i wanst able.

This is what i tried:

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";'});
    });
  };

Also tried this solution:

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";
          }
      });
    });
  };

I was able to make it work outside chrome.tabs.executeScript but i need it inside, so it changes the css of the page i choose.

It probably has usesless codes for what i'm trying to do.

The reason is because i just followed https://developer.chrome.com/extensions/getstarted

Many thanks!

Answer 1

'code' object takes in a string, simply separate them with semicolons if you have multiple instructions, for example:

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

For the toggle effect, you could try this

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

Answer 2

You can make your script a bit more useful by using an if...else statement. You can read more about it here .

In your case I would do something like:

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

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

This way, if the element is display: block , you set it to display: none , and vice-versa. Good luck!