Firefox plugin listen to click on extension button

Question

I'm making a dark theme plugin compatible with every websites.

I'm trying to make the button of my plugin behave like an on/off switch for the current active tab.

---

First attempt:

Here is what you can read from the doc

If you supply a popup, then the popup is opened when the user clicks the button, and your JavaScript running in the popup can handle the user's interaction with it. If you don't supply a popup, then a click event is dispatched to your extension's background scripts when the user clicks the button.

So, I should receive a 'click' event, right?

Manifest

{
  "manifest_version": 2,
  "name": "DarkTheme",
  "version": "1.0",
  "description": "Create a dark theme for any webpage.",
  "icons": {
    "48": "dark.png"
  },
  "browser_action": {
    "default_icon": "dark.png",
    "default_title": "DarkTheme"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "dark.js"
      ]
    }
  ]
}

dark.js

document.addEventListener('click', () => console.log('clicked'))

No event received.

---

Second attempt

I found here that I should be using browser.browserAction instead. Let's try:

dark.js

browser.browserAction.onClicked.addListener(() => console.log('happened'));

Nothing received...

---

Third attempt:

If you read the doc carefully, you realize that the click event seems to be sent only to background script. So here we go:

{
  "manifest_version": 2,
  "name": "DarkTheme",
  "version": "1.0",
  "description": "Create a dark theme for any webpage.",
  "icons": {
    "48": "dark.png"
  },
  "browser_action": {
    "default_icon": "dark.png",
    "default_title": "DarkTheme"
  },
  "background": {
    "scripts": [
      "button.js"
    ]
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "dark.js"
      ]
    }
  ]
}

button.js

document.addEventListener('click', () => console.log('clicked'))

I don't see any log...

---

Fourth attempt:

I found This topic that suggest I should use executeScript.

Here id what I did:

{
  "manifest_version": 2,
  "name": "DarkTheme",
  "version": "1.0",
  "description": "Create a dark theme for any webpage.",
  "icons": {
    "48": "dark.png"
  },
  "background": {
    "scripts": [
      "button.js"
    ]
  },
  "permissions": [
    "tabs"
  ],
  "browser_action": {
    "default_icon": "dark.png",
    "default_title": "DarkTheme"
  }
}

let disabled = false;
// On click, we disable the plugin
browser.browserAction.onClicked.addListener(tabId => {
  disabled = !disabled
  // This works
  browser.browserAction.setIcon({ path: disabled ? '/light.png' : '/dark.png' });
  // This works
  if (disabled) return browser.tabs.reload()
  // This doesn't work.
  else browser.tabs.executeScript(tabId, {
    file: '/dark.js',
    allFrames: true,
  });
});
// This should run the script without waiting for the user to press the button, but it doesn't work either.
browser.tabs.executeScript(undefined, {
  file: '/dark.js',
  allFrames: true,
})

Loading the script this way doesn't seem to work. I receive no log from dark.js.

tabId Optional

integer. The ID of the tab in which to run the script. Defaults to the active tab of the current window.

---

Remaining problems:

1. Loading the script on every web page as if it was in content_scripts

2. Load script when disabled is false.

Answer 1

I finally did it!

Here is the manifest.json

{
  "manifest_version": 2,
  "name": "DarkTheme",
  "version": "1.0",
  "description": "Create a dark theme for any webpage.",
  "icons": {
    "48": "dark.png"
  },
  "background": {
    "scripts": [
      "button.js"
    ]
  },
  "permissions": [
    "tabs"
  ],
  "browser_action": {
    "default_icon": "dark.png",
    "default_title": "DarkTheme"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "dark.js"
      ]
    }
  ]
}

And here is the backgroung script:

let disabled = false;
browser.browserAction.onClicked.addListener(tab => {
  disabled = !disabled
  browser.browserAction.setIcon({ path: disabled ? '/light.png' : '/dark.png' });
  if (disabled) return browser.tabs.reload(tab.id).then(() => {
    browser.tabs.executeScript(tab.id, {
      code: 'window.disabled = true;',
      allFrames: true,
    })
  })
  else browser.tabs.executeScript(tab.id, {
    code: 'window.disabled = false;'
  }).then(() => {
    browser.tabs.executeScript(tab.id, {
      file: '/dark.js',
      allFrames: true,
    });
  })
});

In the dark.js script, you only have to do if (window.disabled) return before your code to disable your plugin.