gistfile1.js

var name = "javascript.options.strict";
require("sdk/preferences/service").set(name, false);

var self = require("sdk/self");

// data URI encoding of "some content"
var dataUrl1 = "data:text/plain;charset=utf-8;base64,c29tZSBjb250ZW50";

// data URI encoding of "some more content"
var dataUrl2 ="data:text/plain;charset=utf-8;base64,c29tZSBtb3JlIGNvbnRlbnQ="

var sidebar = require("sdk/ui/sidebar").Sidebar({
id: 'my-sidebar',
title: 'My sidebar',
url: dataUrl1,
onAttach: function (worker) {
  console.log("attaching");
},
onShow: function () {
  console.log("showing");
},
onHide: function () {
  console.log("hiding");
},
onDetach: function () {
  console.log("detaching");
}
});

require("sdk/widget").Widget({
id: "clickme",
label: "Click me",
content: "Show",
width: 50,
onClick: function() {
  console.log("you clicked me")
  sidebar.show();
}
});


require("sdk/widget").Widget({
id: "hide",
label: "Click me",
content: "Hide",
width: 50,
onClick: function() {
  console.log("you clicked me")
  sidebar.hide();
}
});

require("sdk/widget").Widget({
id: "change1",
label: "Click me",
content: "dataUrl1",
width: 50,
onClick: function() {
  console.log("you clicked me")
  sidebar.url = dataUrl1;
}
});

require("sdk/widget").Widget({
id: "change2",
label: "Click me",
content: "dataUrl2",
width: 50,
onClick: function() {
  console.log("you clicked me")
  sidebar.url = dataUrl2;
}
});