Question

我试图让按钮显示在＆＃34;自定义工具栏中＃34; Firefox上的列表（基于此tutorial (Custom_toolbar_button)）。

Customize toolbar http://iforce.co.nz/i/karfnfyi.fze.png

理论上，要自定义浏览器的这一部分。

Buttons http://iforce.co.nz/i/gtyq4tkw.3e5.png

这是我的button.xul文件

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css"
  href="chrome://helloworld/content/button.css" ?>
<!DOCTYPE overlay>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="helloworld-overlay">
    <script type="application/javascript" src="chrome://helloworld/content/button.js" />
    <!-- Firefox -->
    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="custom-button-1" />
    </toolbarpalette>
    <!-- button details -->
    <toolbarbutton id="custom-button-1" label="Custom" tooltiptext="My custom toolbar button" oncommand="CustomButton[1]()" class="toolbarbutton-1 chromeclass-toolbar-additional custombutton" />
</overlay>

和chrome.manifest

content helloworld chrome/
style chrome://global/content/customizeToolbar.xul chrome://helloworld/content/button.css

# Firefox
overlay chrome://browser/content/browser.xul chrome://helloworld/content/button.xul

我在Xul Explorer上测试了我的button.xul，结果很好（编译得很好）。

XUL explorer Custom Button http://iforce.co.nz/i/uq21lynt.qww.png

出于某种原因，我只是无法在Firefox中添加此按钮。

Answer 1

对于想要使用引导程序执行相同操作的其他人，您必须添加到浏览器调色板。

在此查看此要点并阅读说明： https://gist.github.com/Noitidart/9467045

好编辑所以现在你根本不需要思考。只需复制代码，粘贴到scratchbad，浏览器环境当然，然后点击运行。

它添加了一个带有orrange多维数据集的按钮作为其图像，一旦运行代码转到自定义，你就会看到它，你现在可以将它拖到插件栏，工具栏或极好的菜单面板。

复制粘贴这里的要点，以防github失败（笑）

var doc = document;
var win = doc.defaultView;

var toolbox = doc.querySelector('#navigator-toolbox');

var button = doc.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
button.setAttribute('id', 'bpMyBtn');
button.setAttribute('label', 'My Button');
button.setAttribute('tooltiptext', 'My buttons tool tip if you want one');
button.setAttribute('class', 'toolbarbutton-1 chromeclass-toolbar-additional');
button.style.listStyleImage = 'url("https://gist.githubusercontent.com/Noitidart/9266173/raw/06464af2965cb5968248b764b4669da1287730f3/my-urlbar-icon-image.png")';
button.addEventListener('command', function() {
    alert('you clicked my button')
}, false);

toolbox.palette.appendChild(button);

编辑：我更新了要点上的代码，因此在创建按钮后，它会将其移动到最后位置的nav-bar。

Answer 2

我想出了如何通过main.js（cfx init期间创建的docs添加必要的Button，其扩展名由cfx xps生成。

此外，我正在与#developer的开发人员讨论mozilla IRC，并表示以编程方式将Nav Bar添加到Nav Bar很快就会变得多余，因为下一版本的Firefox（version 29）将会提供使用Navigation Toolbar添加xul信息的功能。

Firefox扩展，向导航工具栏添加按钮（类似于LiveHeaders和FireBug）

2 个答案: