焦点面板上显示

Question

我正在使用加载项生成器在插件工具栏中创建一个图标，用于打开面板。

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,
});

我想让面板在我点击图标后立即获得焦点。如果我在点击鼠标之前激活了面板，下面的代码将keyup事件发送到插件。

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

有没有办法集中面板并立即报告按键？

Answer 1

我认为问题是您需要在打开面板时在内容脚本中运行代码，而不是在加载文档时。要执行此操作，您需要在面板对象上发出面板事件“show”时向内容脚本中发出事件。这是一个如何工作的例子：

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();
    });
});

这是Builder中的一个工作示例：

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