Question

附加SDK将面板附加到窗口小部件，如here所示。我希望通过工具栏按钮实现相同的效果使用附加SDK 。

我使用的工具栏按钮是type 菜单按钮，这意味着左侧是一个图标，并且有一个oncommand监听器。右侧是一个下拉箭头，显示其在点击时的内容。以下是使用附加SDK创建此类按钮的代码：

const doc = require('sdk/window/utils').getMostRecentBrowserWindow().document;

var navBar = doc.getElementById('nav-bar')
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'hylytit');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', data.url('resources/hylyt_off.png'));
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Hylyt.it');
btn.addEventListener('command', function(event) {
  if (event.button===0) btnClick();
  console.log(TAG+'button clicked');
}, false);
var panel = doc.createElement('panel');
panel.setAttribute('id', 'search-panel');
panel.addEventListener('command', function(event) {
    console.log(TAG+'dropdown clicked');
}, false);
var label = doc.createElement('label');
label.setAttribute('control', 'name');
label.setAttribute('value', 'Article List');
var textbox = doc.createElement('textbox');
textbox.setAttribute('id', 'name');
panel.appendChild(label);
panel.appendChild(textbox);
btn.appendChild(panel);
navBar.appendChild(btn);

上面的panel不是附加SDK面板，它是XUL panel，并且受到严格限制，因为它无法使用CSS进行样式设置。除此之外，尽管onCommand的{{1}}按预期发射，但小组的btn听众仍然不会开火。当我单击下拉按钮（只要它有子项）时，XUL面板会显示自己，但由于我无法访问其点击处理程序，因此我无法在点击时创建附加SDK面板。

所以我的问题是这个。有没有办法访问工具栏按钮的菜单部分的点击处理程序，还是有办法将附加SDK面板作为工具栏按钮的子项附加？

Answer 1

感谢您将我指向箭头面板的方向。有没有办法将HTML文件放在一个而不是动态创建XUL元素？我试图实现的效果类似于Pocket扩展，它在单击按钮部分时执行一项操作，在单击箭头时执行另一项操作。 - willlma 7小时前

你有900多名代表，你应该知道的更好。创建另一个问题主题是常识，而不是在评论接受时询问如何在评论中做一些不同的事情。

尽管如此，这是您完成Pocket工具栏按钮效果所做的工作。基于上面贡献者提供的代码。提出另一个问题，我会把它移到那里，你可以在那里接受我的解决方案。

var doc = document;

var navBar = doc.getElementById('nav-bar')
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'hylytit');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMjgwMTE3NDA3MjA2ODExODcxRjlGMzUzNEZGQkNGQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRUM5MTQ0MkJFNkUxMUUxOUM3NzgwMzc3MDc2Rjk1MCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRUM5MTQ0MUJFNkUxMUUxOUM3NzgwMzc3MDc2Rjk1MCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4MDExNzQwNzIwNjgxMTg3MUZFQTk0QUU4RTMwMEYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMTg3MUY5RjM1MzRGRkJDRkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5kJv/fAAAByUlEQVR42qRTPWvCYBC+mKiolFYURVSwfoCLkw4iGDM5WoO460/o4tKuHToV+gd0t5Ku4mQWJ8Fd/NhEpy6K3+ldakKsi+ALb3hzd89zd8+9L6MoCtyyOPpkMpl3m81WM5lMV4GOxyOsVqu3Xq/3qhIEg8Ga1+sFs9l8FcFut4P5fP6Cxz8CAvt8PmBZ9iqCw+Ggn9WaKTOB9/s9FAoF4Hn+LIjOZCMfxVGrWrWcFkRiWiwWiMfjIv6GOI77kGUZ1us15PN5SKVSz2ifttvtL2yBPRNRI1gsFiCK4pMkSVUE/GBrn5vN5i4ajVYxpFEsFuuRSIR1u91wQcAwDOAkwOl0VjBjCIFit9sdoOshl8sNsLp6IBCoOBwOME5LJSABqU8i8Pv91Kcwm83kdDrNk9/lcslYTYLi7HY7aBidIJvNTjqdziNpQBmIBDVIoFDT05TuPR6PCqbs2+0WBEGYqJWfbmKx2WxKo9FIDSAbtgDL5VLNQqRWq1Vtky4R6gDlcpnE/mYMV7nearUqw+FQJzEuDRyLxaBUKjXQVDVWoJNgFZV+vw/j8VgXi4DhcBiSySRl18H6+P5tAbekXC7p5DuLZ259jb8CDAAxmdyX9iaHkQAAAABJRU5ErkJggg==');
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Hylyt.it');
////
var toolbarbuttonPanel = doc.createElement('panel');
toolbarbuttonPanel.setAttribute('id', 'toolbarbutton-panel');
toolbarbuttonPanel.setAttribute('type', 'arrow');
var toolbarbuttonLabel = doc.createElement('label');
toolbarbuttonLabel.setAttribute('value', 'toolbarbutton panel');
toolbarbuttonPanel.appendChild(toolbarbuttonLabel);
////
////
var dropmarkerPanel = doc.createElement('panel');
dropmarkerPanel.setAttribute('id', 'dropmarker-panel');
dropmarkerPanel.setAttribute('type', 'arrow');
var dropmarkerLabel = doc.createElement('label');
dropmarkerLabel.setAttribute('value', 'dropmarker panel');
dropmarkerPanel.appendChild(dropmarkerLabel);
////

navBar.appendChild(btn);

var mainPopupSet = document.querySelector('#mainPopupSet');
mainPopupSet.appendChild(dropmarkerPanel);
mainPopupSet.appendChild(toolbarbuttonPanel);

btn.addEventListener('click',function(event) {
    console.log('event.originalTarget',event.originalTarget);
    if (event.originalTarget.nodeName == 'toolbarbutton') {
        dropmarkerPanel.openPopup(btn);
    } else if (event.originalTarget.nodeName == 'xul:toolbarbutton') {
        toolbarbuttonPanel.openPopup(btn);
    }
}, false);

Answer 2

面板没有onCommand方法，请参阅MDN - Panels Article

您可以让您的面板风格化，给它类型箭头panel.setAttribute('type', 'arrow')，然后附加到您的按钮。我没有给它下面的箭头类型。

继承工作代码。将粘贴复制到暂存器并设置环境＆gt;然后浏览器运行它。

var doc = document; //to put this back in sdk do const doc = require('sdk/window/utils').getMostRecentBrowserWindow().document;

var navBar = doc.getElementById('nav-bar')
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'hylytit');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', ''); //i made this image blank because i dont have the image and im running from scratchpad
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Hylyt.it');

var panel = doc.createElement('panel');

btn.addEventListener('command', function(event) { //moved this below var panel = doc.createElement because panel needs to be crated before we write this function
  //if (event.button===0) btnClick();
  //console.log(TAG+'button clicked'); //what is TAG? its undefeined for me
    panel.openPopup(btn);
}, false);

panel.setAttribute('id', 'search-panel');
/*
panel.addEventListener('command', function(event) {
    console.log(TAG+'dropdown clicked'); //what is TAG? its undefeined for me
}, false);
*/
var label = doc.createElement('label');
label.setAttribute('control', 'name');
label.setAttribute('value', 'Article List');
var textbox = doc.createElement('textbox');
textbox.setAttribute('id', 'name');
panel.appendChild(label);
panel.appendChild(textbox);
btn.appendChild(panel);
navBar.appendChild(btn);

Answer 3

您可以使用Addon SDK和一些Jetpack模块创建工具栏按钮和面板。 Rob-W尝试toolbarwidget-jplib和browser-action-jplib。

您可以轻松地在工具栏中添加一个按钮，并使用css / html为您设置任何所需的样式：

var badge = require('browserAction').BrowserAction({
    default_icon: 'images/icon19.png', // optional
    default_title: 'Badge title',      // optional; shown in tooltip
    default_popup: 'popup.html'        // optional
});

将附加SDK面板链接到工具栏按钮

3 个答案: