1

In my extension (using the add-on SDK), I want to open an extension-local webpage (say, data/templates/page.html) in a tab. The page should be able to call SDK methods. Namely, I want to manipulate some data saved in the local storage and then display them.

In other words, I want a tab that behaves like a panel.

Can I use the tabs module and attach a contentScript to the page (though it's gonna be a rather long script)?.

The tab will be opened when a button is pressed in the navigation toolbar:

btn.addEventListener("click", 
    function(e) {
        //open tab here
    });

How can I open such a page?

MadeOfAir
  • 2,933
  • 5
  • 31
  • 39

1 Answers1

3

It's not hard, a lot of extensions are doing that:

const tabs = require('sdk/tabs');
const { data} = require('sdk/self');

tabs.open({
  url: data.url('yourpage.html'),
  onReady: function onReady(tab) {
    tab.attach({
      contentScriptFile: data.url('yourcontentscript.js')
    });
  }
});

You can find all the info you need in the tabs documentation on MDN.

ZER0
  • 24,846
  • 5
  • 51
  • 54
  • Thanks, it worked. One question though, the fishy `const {data}` above. What is that exactly?. Even dreamweaver is marking it as a syntax error. – MadeOfAir Jan 11 '14 at 21:10
  • 2
    These are Mozilla-specific additions to JavaScript that are giong to eventually find their way to being standard. const is described here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const and destructuring assignment syntax is discussed over here: http://stackoverflow.com/questions/204444/destructuring-assignment-in-javascript – therealjeffg Jan 11 '14 at 22:30
  • Ok, so that thing above pulls the `data` value from the resulting object. – MadeOfAir Jan 11 '14 at 22:55
  • @MadeOfAir, as @canuckistani said: the destructuring assigment is really useful in a module-centric envionment, because you can list all the functions and objects you want to use. So for instance: `const { encode, decode } = require('sdk/base64')`. Of course you can still use `var base64 = require('sdk/base64')` and then call the functions as method or assign them to other variables, it's up to you. – ZER0 Jan 12 '14 at 10:14
  • Well, sorry, but I can't use any SDK APIs from the `contentScriptFile`. For example, `require`, `PlacesUtils`, `Components` are all giving me reference errors. The page is opening fine though. That's why I accepted the answer. – MadeOfAir Jan 12 '14 at 20:01
  • You cannot use SDK APIs from the tab, because is a content page. When you open a tab from a button in the navigation you're in the "chrome code" (SDK side) not "content code". Once you open the page, the page itself you have to use regular javascript and if you want to communicate with the privileged code (chrome code) you can use `self.port` or `self.postMessage`. However, you do not need that if you just want to access to `localStorage`. – ZER0 Jan 13 '14 at 07:14
  • Can you @ZER0 please supply some documentation on chrome code ,content code and any other codes that I should know of? – MadeOfAir Jan 14 '14 at 06:21
  • Ok, I think i tasted it [here](https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/using_port). – MadeOfAir Jan 14 '14 at 08:31