Firefox ToolBar Button When Click Changes DOM?

Question

New to firefox development and trying my best to figure this out.

Say I want to call a function in tap_browser.js that will modify the DOM when the user clicks on the toolbar widget, how would I do this?

This is the code I have so far

require("toolbarwidget").ToolbarWidget({
    toolbarID: "nav-bar", // <-- Place widget on Navigation bar
    id: "tap-icon",
    label: "Tap",
    contentURL: data.url("favicon.png"),
    contentScriptFile: [data.url("tap_browser.js")]
});

I'm currently using a library to create the toolbar widget here: https://github.com/Rob--W/toolbarwidget-jplib

Noitidart Noitidart · Accepted Answer · 2014-03-06T17:39:49

I don't know too much SDK but I helped someone with something that does. Check this out:

var my_wid = widgets.Widget({
  id: "my-widget",
  label: "CLIIIICK",
  content: "CLICK ME",
  width: 100,
  onClick: function()
  {
      require('sdk/window/utils').getMostRecentBrowserWindow().gBrowser.contentDocument.documentElement.innerHTML = 'hi';
  }
});

what this does is it shows a panel with 0 width and height, you can put stuff in there, and when it shows it executes the onShow function to change the html of the current document. its not recommended to use innerHTML, addons arent accepted. Im just showing you a quick and dirty copy paste example. One that is different from the sdk doc page "Modifying the Page Hosted by a Tab"

Firefox ToolBar Button When Click Changes DOM?

1 Answers