How can I make a link in firefox extension panel, to open in browser window / tab?

Question

So I am developing my first firefox addon and I have a simple panel which contains some content and a link. When I click on the link, link is opened in the panel itself. I want to be able to open this link in firefox tab or window. I tried searching mozdev documentation but didn't find any solution.

Answer 1

You can either add a target attribute to your links (as _blank if you want to open a new tab every time); or intercept any click you do in the panel's document, and then send a message to your add-on code, to open a tab. Something like:

document.documentElement.addEventListener("click", event => {
  let a = event.target.closest("a");

  if (a && a.href) {
    // replace `self` with `addon` if it's a trusted document and
    // it's not a `contentScriptFile`
    self.port.emit("open-link", a.href);
  }
});

Then in your index.js or main.js, you'll have something like:

const tabs = require("sdk/tabs");

let panel = Panel({ /* ... your panel ... */ });

panel.port.on("open-link", uri => tabs.open(uri));