Question

I am using the Add-on Builder to create an icon in the addon toolbar which opens a panel.

var panel = require("panel").Panel({
    contentURL: data.url("panel.html"),
    contentScriptFile: [
        data.url("panel.js"),
    ]
});

var widget = new Widget({
    id: "player",
    label: "Player",
    contentURL: data.url('icon.png'),
    panel: panel,
});

I want the panel to get the focus as soon as I click the icon. The following code to send a keyup event to the addon just works if I have activated the panel before with a mouse click.

$(document).keyup(function(event) {
   event = event || window.event;
   self.port.emit('keyup', event.keyCode);
   return false;
});

Is there a way to focus the panel and report key presses instantly?

Answer 1

I think the issue is that you need to run code in your content script when the panel is opened, not when the document is loaded. To do this you need to emit an event into the content script when the panel event ‘show’ is emitted on the panel object. Here’s an example of how this would work:

main.js:

var data = require("self").data;

var panel = require("panel").Panel({
    contentURL: data.url('panel.html'),
    contentScriptFile: [data.url('jquery.js'), data.url('panel.js')]
});

panel.on('show', function() {
    console.log('main: opened panel')
    panel.port.emit('opened', true);
});

panel.port.on('keyup', function(keyCode) {
    console.log(keyCode);
});

require("widget").Widget({
    id: 'my-widget',
    contentURL: data.url('favicon.ico'),
    label: 'Click for panel...',
    panel: panel
});

panel.js:

$(function() {

    $(document).keyup(function(event) {
       event = event || window.event;
       self.port.emit('keyup', event.keyCode);
       return false;
    });


    self.port.on('opened', function(data) {
        console.log('panel: opened panel')
        $('#my-input').focus();
    });
});

Here’s a working example in Builder:

https://builder.addons.mozilla.org/addon/1047238/latest/