CODEWITHSUNDEEP
javascriptfirefoxfirefox-addonfirefox-addon-sdk
dakov
dakov

Reputation: 1139

Firefox addon-sdk: get element of attached panel

I have a very simple firefox plugin - developing with addon-sdk. In tutorial, I found a mention of attached-panel to a toggle button, but I can't find a way to and (for example) onclick callback to button in this panel.

This is simplified panel: 

    <body>
        <table width="100%">
            <tr>
                <td colspan="2" align="center">
                    <input type="button" id="btnInject" value="Inject!">
                </td>
            </tr>
        </table>
    </body>
</html>

and here's a part of main.js file:

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

var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");

var button = ToggleButton({
  id: "my-button",
  label: "my button",
  icon: {
    "16": "./icon-16.png",
  },
  onChange: handleChange
});

var panel = panels.Panel({
  contentURL: self.data.url("popup.html"),
  onHide: handleHide
});

function handleChange(state) {
  if (state.checked) {
    panel.show({
      position: button
    });
  }
}

function handleHide() {
  button.state('window', {checked: false});
}

I need to assign onclick function, I've tried panel.getElementById('btnInject').onclick, but getElementById was not found as a function. Also tried a document object, but it wasn`t defined either.

Can anyone help me, how to access this element?

Upvotes: 0

Views: 362

Answers (1)

nmaier
nmaier

Reputation: 33162

You don't have direct access to the DOM of a panel. Instead, you'll need to attach a small content script and emit a message back to main.js using the panel.port API.

See the Communicating using port documentation for further information.

Upvotes: 3

Related Questions