显示焦点面板

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

下面是构建一个工作示例：

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