Question

Good day!

I have a simple chrome extension that changes the DOM of a webpage (it sorts comments, to be more precise). I have a background.js which contains the code below:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(
      null, {file : "app.js"});                                                                                                                                                                         
});

So app.js executes when I click on the extension’s icon.

I’d like to reset all changes by clicking on the icon for the second time. Ideally the page would be sorted again if I click on the icon for the third time and so on. Is there a simple way to do this?

Thank you in advance

Answer 1

There’s no way to have Chrome automatically undo the changes app.js has made to the page’s DOM, but you can have app.js undo its own modifications. Either detect that app.js is being run for the second time (set a global variable from the injected script into your extension’s isolated world) or inject the script once per tab and send a message to tell it which state to put the page into.

It looks tricky to inject the script only once per tab without making it a content script, and that would prevent you from using the upcoming activeTab permission, so having app.js remember is probably better, unless you’re already ensuring a single injection for other reasons.