Programmatically set checkbox on optionsPage

Add-ons Development
#1

I know, i can open the Options Page with the following code from background.js. But how can i set a checkbox in the optionspage? The checkbox has the id=‘mycheck’.

browser.runtime.openOptionsPage().then(function() {
// try to mark checkbox, but how can i access the object 'mycheck'?			
},onError);
#2

You cannot access options page document from background script.
I would either:

  • use URL search params or #hashtags and then parse them in the options page javascript (that way the url would work by itself even when opened from another source). You would ofcourse need to change the way the Options page is opened (manually creating new tab with “/options_page.html” url).
  • in your callback function send message to that tab (you can get tab info as parameter in that callback function) using browser.tabs.sendMessage(tabInfo.id, {type: 'options_auto_check', id: 'chechbox_id'}). And then make sure you have registered message listener in your options page.
#3

I think, i have a solution. It seems to work.

in background.js, i use:

debug = true;
browser.runtime.openOptionsPage();

and in options.js:

var background_page = browser.extension.getBackgroundPage();    
window.addEventListener('load', function () {
    	if(background_page.debug) {
    		document.getElementById("mdebug").checked = true;
    	}
    }, false);

The default value of debug is false. If some condition is met, its set to true. Then i can load the options page. The options page now checks the background variable debug, if it is true. If thats the case, its does its job. I dont know, if i get it wrong, but it works for me. Thx for your help.

#4

Wow, that is so much easier than passing messages. I notice it says on MDN that it doesn’t work in private windows, though, so I can’t use it for my extensions.

#5

But normally the option page doesn’t open in private window. The correct behaviour in Chrome and Opera is when navigating in private browsing, openOptionsPage() opens a normal window.
In Firefox, there is an issue with that because it can open multiple option pages in private browsing. Maybe you should use browser.tabs.create() instead.

#6

I would seriously advice you to not use this approach. It feels very spaghetti-like programming and it brings complexity to your solution (especially with the mutation of a local variable).
You can avoid the mutation using the messaging. This will also keep the workflow straightforward:

  1. the background script opens Options page
  2. background script sends message to the Options page
  3. Options page reacts to the message
#7

but how can i send a message to the options page after opening it with browser.runtime.openOptionsPage()? Where do i get the id of that tab? browser.tabs.create() isn’t a good variant. When i use this, the page is opened in a separate tab in full-size and not in the usual way embedded in the normal AddOns page.

#8

That’s true, also sending direct messages to the Options page tab opened through about:addons page would probably not work.

But you can still broadcast the message using browser.runtime.sendMessage. If you do this after the promise from browser.runtime.openOptionsPage() is resolved and if you register your browser.runtime.onMessage.addListener handler in the Options page, then it should all work.

Something like this:

// background.js
await browser.runtime.openOptionsPage();  // make sure your function is `async`
await browser.runtime.sendMessage({type: 'check_option_xxx'});

// options.js
browser.runtime.onMessage.addListener((data, sender) => {
  switch (data.type) {
    case 'check_option_xxx': checkCheckbox(); break;
  }
})
#9

For what it’s worth – I have no formal training in software development – I usually “pull” data when initializing the contents of the popup (or options page). This involves sending a message to the background script and then handling the response to configure forms, etc. As an example: