Addon problem #3: Onboarding using popup fails

Add-ons Development
#1

The discussion of onboarding in MDN (https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices) includes two possibilities: creating a new tab or showing a popup. I choose showing a popup as being less intrusive on the user who is installing my extension. But it is impossible to write code that does this.

For example, the following reasonable code fails with error message “Error: browserAction.openPopup may only be called from a user input handler”:

browser.runtime.onInstalled.addListener(function(details)
	{
	browser.browserAction.openPopup();
	}
);
#2

The sentence

You can onboard people through a […] popup on your toolbar button

is misleading. You can’t open the browser action after startup.

What you can do is open a popup window.

I’ve updated the documentation accordingly.

#3

Thank you for the clarification! I have also edited the documentation, to fix several syntax errors in the JavaScript examples.

#4

I tried to open a popup window on install or update, but nothing happens and there is no error message.

Code in background script:

		var strWindowFeatures="menubar=no,resizable,scrollbars,dependent,fullscreen";//close=no
		if (g.upwin)
			return;
		g.upwin=window.open('/update.html'+'?'+Math.floor(Math.random()*10000),"PM Notice",strWindowFeatures);
#5

You should use the proper browser.* API to open the window (see the example), not that legacy window.open() crap. That applies to most old APIs on the window global.

#6

NilkasG: “await” in your example gives an error message. Did you test it?

“SyntaxError: await is only valid in async functions and async generators.”

#7

Pretty sure @NilkasG always assumes that you’d use an async function or async () => {} when you see await. The examples I see on the linked page all have the callbacks declared as async.

#8

Thanks to all for the help. I have added the following to https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version to help others:

To obtain the version in your JavaScript code:

console.log(browser.runtime.getManifest().version);
#9

@freaktechnik Yes. Exactly that. If they aren’t already, given the heavy use of Promises in the APIs, async functions should really be one of the concepts thought in the WebExt introduction tutorials. Maybe I get around to adding that.

@daviddev Sure. Even though your code applies to all the manifest keys. I’d move it under the example, I think.

#10

I agree that all the ES6 async syntax deserves better explanation than it gets in most places, since it is now available in modern browsers. MDN does an okay job with Promises, I guess, but the additional syntax is not well presented.

While I can write fairly well, Promises are still new to me, so I’m not the right one to update MDN. I still think in terms of nested callback functions (ugh).

I’m still struggling with the WebExtensions environment, particularly the console error messages, which are often in cryptic system code or are missing entirely. I wish that some basic sync mechanism, like alert(), worked in this environment, so I can find my bugs. Setting breakpoints doesn’t always work as expected, either.

I’m finding development to be 10 times slower than normal for my PHP and JavaScript coding. I should be nearing completion of this password manager by now, and instead I am still trying to get basic command messaging working (the examples don’t do quite what I want to do, and they are too simple to be helpful). Today I spent all day trying to display a page on installation and update, and it still doesn’t completely work. It’s all too clumsy and slow as compared with normal programming for me.

Every time I want to run the special background debugger, I have to wait to see if I have to click Debug a second time due to a weird communication error, then I have to click a second or third OK in a popunder permission dialog. Such clumsiness.

I also wish that true async support was available now, so I can stop writing function after function just to defer execution. I’d much rather precede each code line with a character to indicate whether it is to be executed now or later (programming for the parallel Thinking Machine was a little like that, and it was dead easy as compared with await or Promises).