顯示焦點面板

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/