While
1223145 – homepage_url should be displayed in about:addons
will keep the URL from showing up in about:addons right away, this will be useful once that bug is fixed.

I have a general question,
I have problems understanding end getting these add-ons to run.
I wanted to have a look at favorite color.
The docs talk about a manifest.json but from jpm this is actually called package.json.
so renamed the file but it was missing a name, a title, the format of the version was incorrect and I had to add an index.js.
When I could run it with jpm, the new browser window didn't had any browser action button, probably cuz the the json file lacks information about the icon.
Can somebody tell me why so many things are off?

We should have some basic guidance for people who want to add new examples or improve existing ones.

https://github.com/mdn/webextensions-examples/tree/master/beastify.

Hello friends,

I created my first web extension for Firefox and it worked just fine, however I'm wondering how can I define the width and height of the popup that appears when I click the icon in the toolbar?

any idea?

Thanks in advance

Now we support icons[1] we should include them in the examples.

[1] https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/icons

I see a gap in some examples like Beastify. I see it should be simple as possible, but the problem is that you did not make it clear enough that HTML page or HTML document must be loaded (or I did not realized it). It took few days to me to realize that when I open new Tab in Firefox, it is not html page (it looks like html doc but is not). As far as I understand the problem - the Window exists but the document was not created. So when I tried your addon nothing displayed in the Window.

The function

function insertBeast(beastURL) { var beastImage = document.createElement("img"); beastImage.setAttribute("src", beastURL); beastImage.setAttribute("style", "width: 100vw"); beastImage.setAttribute("style", "height: 100vh"); document.body.appendChild(beastImage); }
Can not create any document, because you did not check if the document exists and did not create the document in the case that the document does not exists (but window does). Please add the fix.

Also a back-reference to the second tutorial would be helpful. Also add a link to first tutorial to borderify.js . Because I did come here from different link and I did not see the explanation which is there. Now, I do not know the links which are to the rest of the examples, if there are some tutorials which I should see related to them.

API like :

chrome.browserAction.onClicked.addListener(send1);

Don't work on firefox 47 on Ubuntu 16.0.4 LTS . Could you mention that? Wasted a lot of time trying to make things work. Finally put it around a try catch to see "chrome.browserAction is undefined"

I am testing the context-menu-demo on Firefox 45.2 ESR. I am hitting a Node NotFoundError in ext-contextMenu.js in the handleEvent after selecting a menu item in the demo context menu.

handleEvent: function(event) {
let target = event.target;

target.removeEventListener("popuphidden", this);
for (let item of this._itemsToCleanUp) { 
  target.removeChild(item); **<=hitting NotFoundError here**
}
// Let's detach the top level items.
this._itemsToCleanUp.clear();

},

_itemsToCleanUp: new Set(),
};

Details:

https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs

In /beastify/content_scripts/beastify.js and /beastify/popup/choose_beast.js exists two time the beastNameToURL function.

Here's the list, courtesy of andym. I'll keep this report updated as we add new examples. When all entries are "done" or "not doing", this bug can be closed.

Of course, a single example add-on could (and probably should) demonstrate more than one API. So this does not necessarily mean that we need 50 examples.

Remaining:

chrome.webNavigation.onBeforeNavigate

Done:

chrome.browserAction.onClicked
chrome.browserAction.setBadgeText
chrome.browserAction.setBadgeBackgroundColor
chrome.browserAction.setTitle
chrome.browserAction.setIcon
chrome.contextMenus.create
chrome.contextMenus.onClicked
chrome.extension.getURL
chrome.extension.getBackgroundPage
chrome.i18n.getMessage
chrome.management.getAll
chrome.notifications.create
chrome.runtime.onInstalled
chrome.runtime.getManifest
chrome.runtime.reload
chrome.runtime.sendMessage
chrome.runtime.onMessage
chrome.runtime.connect
chrome.runtime.onConnect
chrome.storage.sync
chrome.storage.local
chrome.tabs.query
chrome.tabs.create
chrome.tabs.sendMessage
chrome.tabs.executeScript
chrome.tabs.onUpdated
chrome.tabs.update
chrome.tabs.onRemoved
chrome.tabs.reload
chrome.tabs.onCreated
chrome.tabs.get
chrome.tabs.onActivated
chrome.tabs.remove
chrome.windows.update
chrome.windows.getCurrent
chrome.windows.getAll
chrome.windows.create
chrome.webNavigation.onCommitted
chrome.webRequest.onErrorOccurred

Not doing:

chrome.tabs.getSelected (deprecated)
chrome.tabs.onReplaced (Chrome-only)

I'm on Fx 47 and when I load the said extension and click the toolbar button, the options page doesn't open. What could I be missing?

So that users of Android can give them a try. We'll:

• sign them against AMO
• add them to github
• link them up somewhere
  ... script this so each time an add-on updates, we'll update this process.

https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n

How can I apply cookie inside popup? For example when I entered color code into input and closed popup I expected that color was stay here in input. But input stay empty. One more example: I want to toggle active class by click on buttons so I could change border color for them and save it after closing and opening popup. Say please how can I use cookies for such cases?

The WebExtension example favourite-colour appears to be working well, but always when I press the Save button it throws an exception which can be seen in the Console of the Developer Toolbar:
TypeError: this._recipeManager is null [Learn More] LoginManagerParent.jsm:77:9.
As the functionality does not seem to be affected, I woult rate it as a low priority fault.

I have one ready, based on
1197422 – Implement pageAction API for open extension API

Took out the browser_action to make it strictly a page_action demo.

Should be handy to verify a followup bug I submitted,

1218175 – pageAction extension no longer works after browser restart

Attempting to get the Beastify example signed on AMO results in a validation error.

Steps to reproduce:

1. Check out examples

2. Edit manifest.json to have a unique id

3. Create XPI (using these steps)

   zip -r ../my-addon.xpi *

4. Upload to AMO

Expected:

1. Validation succeeds
2. If "Do not list my add-on on this site (beta)" is checked, should be possible to download a signed version

What happens:

1. Your add-on failed validation with 1 error. Invalid minimum version number
2. Impossible to proceed to next steps

Screenshot:

https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks

https://github.com/mdn/webextensions-examples/tree/master/borderify

Been testing in Firefox 47, and have copied the manifest, background script and locale messaging line for line, but can't seem to get the actual actions to work (eg. no body outline).

Are their steps not listed in the readme that are required? eg. Some firefox flags or something?

This is a nice collection of add-ons, but would be nice to have a fork-and-go repository with a single add-on.

...see #34

When i try to load a http request under https page, it block by browser "Mixed content".
As some reason, we can not use Firefox about:config or Server Access-Control-Allow-Origin
What should i do? Firefox 49

Using options_ui doesn't help to get the options page to appear. I downloaded the repo, checked with favourite-colour. Everything works except there is no "options" in about:addons

The mentioned extension relies on runtime's openOptionsPage() which does not seem to work.

Clicking on the toolbar button returns this to the browser console:
chrome.runtime.openOptionsPage is not a function background.js:2:0

Is it a global problem with openOptionsPage() or is the extension doing something incorrectly?

https://github.com/mdn/webextensions-examples/tree/master/user-agent-rewriter

So this is more a report it actually works, disguised as a minor issue that on Firefox OS people might think it does not work at first.

After installing the add-on on a firefox os device from a git working directory via WebIDE one has to go into the Settings->Add-ons panel and set it to Enabled.

It's great to have these examples. Thanks, Will!

It always show in console that chrome is not defined. I am unable to connect to background page from the page/content loaded in iframe.

from the popup html, 'Move active tab' does not work properly...
chrome.tabs.move([tab.id], {index: 0}) might not be responding
remove and reload works perfectly fine.

It is missing the "applications" property in the manifest

Hello,

When I run the "Beastify" addon on Firefox Developer Edition 45.0a2 (2016-01-03), the "paw" icon is there, it opens the popup with 3 buttons, but nothing happens when I click these buttons.

Looking at my OS console, I found this messages :

Extension error: Error opening input stream (invalid filename?): moz-extension://b4f0c458-8e3b-4aa8-bb3c-5ff7d692969b/popup/content_scripts/beastify.js undefined undefined
[[Exception stack
undefinedCurrent stack
runSafeSyncWithoutClone@resource://gre/modules/ExtensionUtils.jsm:25:110
tryInject@resource://gre/modules/ExtensionContent.jsm:191:9
execute@resource://gre/modules/ExtensionContent.jsm:267:5
executeScript@resource://gre/modules/ExtensionContent.jsm:387:5
receiveMessage@resource://gre/modules/ExtensionContent.jsm:590:9
]]

The addon now works if I change a line in the popup/choose_beast.js source code, from :

  chrome.tabs.executeScript(null, {
    file: "content_scripts/beastify.js" 
  });

to :

  chrome.tabs.executeScript(null, {
    file: "../content_scripts/beastify.js" 
  });

I don't know if it's a Firefox bug or a typo in the Beastify source code ?

Thank you in advance

When I use a hash value in URL with a colon (%3A) (e.g. chrome.extension.getURL("my-page.html#%3A")), the opened page shows "The address isn't valid".

Not sure whether this is right place to report this bug, but there were no answers on IRC and I am not familiar with mailing lists, so I am leaving it here.

Steps to reproduce:
1.Install the following webextension as a temporary add-on:
history-deleter.zip
2.Navigate a bit through google images in order to gather some browsing history.

Expected results:
The entire content is correctly displayed in the panel.

Actual results:
When the URLs are too long the webextension panel does not auto-resize according to the links length and the last 5 visited sites are not entirely displayed.

Additional notes:

• This issue reproduces on Firefox 51.0a1 (2016-09-05) and Firefox 50.0a2 (2016-09-05) under Windows 10 64-bit.
• Please see the attached screenshot:
  

Given that we expect the examples to be copied and re-used, we should probably remove the applications section, or at least the id from all the add-ons. That way developers can copy them and get them signed on AMO and check out the whole process without having to get into ID collisions.

Maybe wait till web-ext lands with no id support: mozilla/web-ext#178

The link to the correct repository is wrong:
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples

Many developers who are new to WebExtensions will be used to the modern conveniences of building JavaScript web applications in EcmaScript 6, 7, and higher. I would like to see an example that shows how to construct a WebExtension using these JavaScript features. Here are some nice things to demonstrate in an example:

• Using ES6/7 code not already supported by Firefox, such as:
  • import statements
  • async / await
  • object rest / spread
  • ... and really anything else supported by transpilation
• Building / running an extension with code transpilation with either:
  • babel or
  • rollup

This example would serve as a guide for developers who would like to write a WebExtension in newer JavaScript syntax.

Building this example may also reveal shortcomings in the platform or tools (like web-ext). Please file bugs!

Btw, you should probably publish a direct link on each page to where community can go ahead and fix minor bugs like this.

https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button

Hi, tabs-tabs-tabs & favourite-colour dont work for me. Tested in firefox 45 linux and windows.
tabs-tabs-tabs:
->"Move active tab to the beginning of the window"
->"Move active tab to the end of the window"
->"Duplicate active tab"

On chrome runs

https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging

How to build xpi file from your Beastify folder ?
I tried to use your sample in github and zipped to be zip file . Then , i renamed it to xpi file but it was not working in my firefox .

When ui.js runs it throws a reference error:"chrome is not defined" on

var port = chrome.runtime.connect();

Looks like ui.js runs in the context of the page loosing the access to web extension API.
Anyone knows why this happen? I'm really interested in this feature

Tested on Firefox ESR 45.2.0 ( that does support chrome.runtime.connect() )
Debugged with Browser Toolbox

Hi,

Two problems,
1.try install your context-menu-demo extension, try to uninstall it and install it multiple times, then you can see there are multiple same contextmenus
2.I developed a extension last week, it works fine, and changed nothing after a week, things goes wrong, I can see an error in the browser console, it says "Port error: Could not establish connection. Receiving end does not exist". i googled around, and tried every solution(api version, backgroundjs->backgroundpage,etc) suggested, error still appear in the console. Then i try to install your demo extensions. each of them throw an error "chrome is not defined". But after 12 hours, i tried again. all of them and my extension worked again. However, after 3 hours by then, error throwed again.

firefox 48

I think it's the internal bugs, please let me know if there is any fix to this problem,

Thanks.

Some examples (eg inpage-toolbar-ui ) inject code into a webpage. I would assume if the webpage isn't under our control it can easily delete, obscure and otherwise manipulate the displayed iframe?

When we make the switch to using mozilla.json, then we will need to update all the examples.

Tracker: mozilla/addons#61