For firefox, there is a Low-Level API called dev / panel . This API allows you to integrate into the developer panel.

The documentation describes the path of add-on interaction with the panel. I understand that the panel can only respond to postMessage, which come from the add-on.

(I understand index.js as an addon. Under the panel is JS, which connects to the html panel)

The add-on should be started with the selection of f-ii from the panel. (Somehow, you need to call the high-level API from the low-level).

I implemented it as follows: addon sends a message to the panel

// index.js onReady: function() { // in this function you can communicate // with the panel document this.postMessage("add-on-ready", [panelSide]); //this.postMessage("add-on-ready2", [panelSide]); // This message may be received in logic-panel.js }

The panel will write the received message to the textarea and send a response to the addon only when pressing a certain button:

 //logic-panel.js window.addEventListener("message", function(event) { var toAddon = event.ports[0]; toAddon.start(); $(document).ready(function(){ $('#log').append(event.data + '\n'); }); switch(event.data){ case "add-on-ready": $(document).ready(function(){ $("#inspect").click(function(){ toAddon.postMessage("inspect"); }); $("#exit").click(function(){ toAddon.postMessage("exit"); }); }); break; default: toAddon.postMessage("event.data = " + event.data); alert("event.data = " + event.data); } });

Addon handles the answer. If the "inspect" button was pressed, then high-level APIs will be involved (namely, PageMod in the handleClick function):

 addonSide.onmessage = function(event) { console.log(event.data); switch(event.data){ case "inspect": console.log("run inspect"); handleClick(); console.log("run inspect end"); break; case "exit": console.log("push exit =("); break; default: MyPanel.postMessage("add-on-ready", [panelSide]); //not work } } function handleClick() { console.log("xpath"); var data = require("sdk/self").data; var pageMod = require('sdk/page-mod').PageMod({ include: ['*'], contentScriptFile: data.url("./addonside/xpath.js"), onAttach: function(worker) { worker.on('message', function(message) { console.log('mouseclick: ' + message); //////////////////////////////// // this.postMessage('mouseclick: ' + message, [panelSide]); // This message not may be received in logic-panel.js //////////////////////////////// }); } }); }

Question: how can I send postMessage to the panel from the handleClick () function? Maybe there is a more adequate way to call High-Level APIs using dev / panel?

    1 answer 1

    The problem was solved as follows:

    At the very beginning of index.js we declare var _MyPanel; , in onReady initialize

     onReady: function() { _MyPanel = this; _MyPanel.postMessage("add-on-ready", [panelSide]); }

    Now in the handleClick() function, you can send messages using the _MyPanel object:

     function handleClick() { console.log("xpath"); var data = require("sdk/self").data; var pageMod = require('sdk/page-mod').PageMod({ include: ['*'], contentScriptFile: data.url("./addonside/xpath.js"), onAttach: function(worker) { worker.on('message', function(message) { console.log('mouseclick: ' + message); _MyPanel.postMessage("mouseclick: " + message, [panelSide]); }); } }); }