【问题标题】:firefox addon : adding icon to context menufirefox插件:将图标添加到上下文菜单
【发布时间】:2010-09-11 10:49:44
【问题描述】:

我正在尝试构建一个firefox插件并且我想在右键单击内容菜单中添加图像/图标,例如,firebug在右键单击上下文菜单中有一个图标,

我想做类似的事情,我的插件也包含菜单项

上下文菜单中我的插件结构

[icon] [menu] 
            [menu item 1]
            [menu item 2]
            [menu item 3]
            [menu item 4]

我该怎么做?

【问题讨论】:

    标签: javascript firefox firefox-addon xul


    【解决方案1】:

    您必须设置image attribute,将class menu-iconic 指定给元素并存储图像以便您可以访问它。

    XUL:

    <menu id="someid" label='your label'
              class="menu-iconic"
              image='chrome://addon/skin/image.png'>
    ...
    </menu>
    

    JavaScript:

    您也可以动态设置或更改图像(首先获取对元素的引用):

    menu.setAttribute('image', 'chrome://addon/skin/image.png');
    

    【讨论】:

    • 谢谢,它成功了 :),在过去的 2 个小时里为此苦苦挣扎,终于 class = "menu-iconic" 完成了我的工作。但是有一个问题,它是如何在添加class 属性时变得标志性的?
    • 好吧,我猜 Firefox 使用了一些 CSS 来显示图像,也许还可以正确对齐文本。最后,XUL 界面也只是使用了 CSS 样式。
    【解决方案2】:

    您可以使用 image 属性使用新的 Mozilla Add-ons SDK 图像添加上下文菜单

    可选选项下:

    只需像这样添加图像属性

     var menuItem = contextMenu.Menu({
        include: "*.stackoverflow.com",
        label: "do something",
        image: "data:image/png;base64,iVBORw0KGgoAA ...",
        context: contextMenu.SelectorContext('div.someclass'),
        contentScriptFile: data.url("cs.js"),
        items: [
            contextMenu.Item({ label: "Item 1", data: "item1" }),
            contextMenu.Item({ label: "Item 2", data: "item2" }),
            contextMenu.Item({ label: "Item 3", data: "item3" })
          ]
    });
    

    image:项目的图标,一个字符串 URL。 URL 可以是远程的、对加载项数据目录中图像的引用或数据 URI。

    Mozilla context menu help page for Addon SDK

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-11
    • 1970-01-01
    • 2015-01-09
    • 1970-01-01
    • 2022-11-11
    • 1970-01-01
    相关资源
    最近更新 更多