CODEWITHSUNDEEP
javascriptfirefoxfirefox-addonfirefox-addon-sdk
Navaneeth K N
Navaneeth K N

Reputation: 15501

How to anchor a panel to a DOM element?

I have an add-on which binds to the onKeyPress event of all the text controls on the page. When typing some text, I am sending a message to add-on script from the content script, which will show a panel with some data. This works well, but the panel is not properly positioned. I would like to position the panel anchored to the text control.

Panel's show() function takes DOM element where it should anchor. But I am not sure about passing the DOM element from content script to add-on process. It looks like I can pass only JSON serializable values.

Any help to address this issue will be great.

Upvotes: 1

Views: 318

Answers (2)

Pankaj Kharka
Pankaj Kharka

Reputation: 86

Instead of using mainPanel.show(), use view.panel = mainPanel;:

myWidget = require('widget').Widget({
      id: "text-entry",
      label: "StrikeBase",
      contentURL: data.url("icon.png"),
//    panel: mainPanel,
      // Instead using this
      onClick: function(view) { 
//        mainPanel.show();
         // Instead using this              
          view.panel = mainPanel;
      }
    });

Upvotes: 1

Wladimir Palant
Wladimir Palant

Reputation: 57651

Passing a DOM node from content scripts to extension scripts is impossible. This is by design - extension scripts should never deal with the DOM directly, they might even run in a separate process (something that was part of the original planning for the Add-on SDK).

Currently, the only way to get a DOM node in extension scripts is to use low-level APIs to access the DOM directly rather than via content scripts. For example, you can get to the page open in the active browser window:

var windowUtils = require("window-utils");
var browser = windowUtils.activeBrowserWindow;
var wnd = browser.content;
var element = wnd.document.getElementById("foobar");

However, these low-level APIs aren't guaranteed to be stable and the window-utils module isn't even fully documented (e.g. activeBrowserWindow property isn't listed in the documentation). Use them at your own risk and be prepared that they might stop working in a future version of the SDK. Injecting an HTML element into the document that merely looks like a panel (as suggested by canuckistani) might indeed be a better choice.

Upvotes: 2

Related Questions