I wrote an article on WebExtensions that summarize some of the things that I think are important to get started with development. I tried to put the things up front that were unclear to me when I first started out. So I wanted to share it here so anyone interested can have a read:
(Feedback welcome)
@christiankaindl, thank you so much for sharing this! This is an awesome tutorial. Would you mind if we shared this with folks learning extension development through our Activate campaign?
Thank you very much. I would totally love it if you want to share it with your project. In the end I wrote it exactly for this purpose 
First off, that is a pretty good summary and good read for beginners. It is clear that you have put a lot of effort into it: I have read it and here are some hints for improvements and corrections:
Note: Google Chrome uses the
chromenamespace for its APIs. Firefox supports bothbrowserandchrome, so if you want to make your extension available cross-browser this is something you have to consider.
I’d mention that there are polyfills for the browser namespace. Generally, browser has a number of advantages which make it preferable over chrome.
The Background Script also runs across multiple browser instances (e.g. you have more than one Firefox window open at the same time)
If you open additional windows (Ctrl+N, double click the shortcut, …) they are opened in that same instance (same background process, same profile folder).
To launch a new instance, you have to launch Firefox with CLI args to prevent it from simply telling the existing instance to continue the command.
Different instances do not share their extension process(es).
Strictly speaking [UI pages] are somehow a hybrid between Content and Background Scripts.
UI pages have pretty much nothing in common with content scripts. They behave like they are iframes within the background page (ecxept that they are not in the DOM and are rendered elsewhere). If they are not opened in a private window of container tab, they can even access each others global scopes via browser.extension.getBackgroundPage()/.getViews(), because they are executed in the same process.
Background Scripts do not have access to a DOM
They do, it just won’t be rendered anywhere. But there are some useful things you can do with it, eg. attaching <script>s or iframes as sandboxes. I even attach a number of audio elements that I use for background playback to the DOM for debugging.
Debugging popups […] 1. On your previously opened debug window
This is quite a jump …
sometimes you need functionality that only privileged scripts an offer
can offer?
That’s it
Thanks, I didn’t know that! Added it to the article:
Note: Google Chrome uses the non-standard
chromenamespace for its APIs.browseruses JavaScript promises as return values for asynchronous APIs,chromeuses callbacks. For cross-browser extensions there is a polyfill for thebrowsernamespace that you can use in Google Chrome. Firefox supports bothbrowserandchrometo make it easier to port extensions from Google Chrome. If you develop a new extension with cross-browser compatibility, use thebrowsernamespace with the polyfill for Google Chrome.
Thanks for making that more clear. Although I think it is not nessecary for the article.
I changed the italic bit from the article as follows:
You can access the scope of other priviledged scripts with
browser.extension.getViews(), or the scope of the background script(s) only withbrowser.extension.getBackgroundPage().
I corrected that. Your idea seems interesting, with audio as debugging 
Can you share the code that you use for this?
Changed text:
Background Scripts can also access their own DOM, but it won’t be rendered anywhere.
Yeah, maybe. I think it is fine there, it’s the best context for it in the article, but I am open for suggestions where to put it.
Corrected.
Thank you so much for taking the time to give feedback 
️
What is happening with the site?
It looks like you’ve lost your Internet connection.
But you probably already knew that.
Either way, it’s a good opportunity to show you this cool offline page made with service workers, indicating just how cutting-edge we are over here at dev.to.
This must be frustrating, but to put it in context, Trump’s still president, so a poor Internet connection can’t be so bad, right? On the other hand, you don’t have access to the Internet, so maybe he’s been impeached by now, for all you know.
Have a nice day either way. Maybe you can go play outside, some fresh air could do you good. <3
Yeah that is probably a bug with their fancy service worker implementation
You can hit Ctrl+Shift+R (hard reload) and then it works