如何为Firefox书签上下文菜单添加功能图标?
如何为Firefox书签上下文菜单添加功能图标?
嘿,刚好有个实用的方法能帮你实现这个需求!多亏了MC10的分享,我现在就是用这种方式给书签上下文菜单加图标,不用装插件,还能在离线环境下正常使用。
先给你看看对应的场景:右键点击Firefox书签栏里的文件夹时,菜单每一项的左侧都有空位,刚好可以用来放你想要的剪刀、双页、垃圾桶这类功能图标。

具体实现方法:
- 准备图标文件:先把需要的图标(比如剪切用的剪刀、复制用的双页、删除用的垃圾桶、排序用的图标等)下载好,建议用SVG格式,然后存到本地的一个固定文件夹里,比如
C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/(你可以根据自己的系统和路径调整)。 - 编写自定义CSS:通过CSS的伪元素
::before给对应的菜单选项添加图标,以下是参考代码:
/* 按名称排序 - 添加排序图标 */ #placesContext_sortBy\:name::before { content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/sort.svg'); width: 16px; padding-right: 1em; /* 可以添加filter属性调整图标颜色,适配你的浏览器主题 */ } /* 剪切功能 - 添加剪刀图标 */ #placesContext_cut::before { content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/scissor.svg'); width: 16px; padding-right: 1em; } /* 复制功能 - 添加双页图标 */ #placesContext_copy::before { content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/two-pages.svg'); width: 16px; padding-right: 1em; } /* 删除功能 - 添加垃圾桶图标 */ #placesContext_delete::before { content: url('file://C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/bin.svg'); width: 16px; padding-right: 1em; }
- 启用CSS自定义:把这段CSS保存成文件(比如命名为
bookmark-menu-icons.css),放到Firefox用户文件夹下的chrome文件夹里(如果没有chrome文件夹就自己新建一个)。然后打开Firefox的about:config页面,找到toolkit.legacyUserProfileCustomizations.stylesheets选项,把它设置为true,最后重启Firefox就能看到效果啦。
小技巧:
- 如果你想给其他菜单选项加图标,可以右键菜单选项,选择“检查元素”,找到对应的元素ID,然后按照上面的格式添加对应的CSS代码就行。
- 可以通过调整
width属性修改图标大小,padding-right调整图标和文字之间的间距,让菜单看起来更协调。
备注:内容来源于stack exchange,提问作者doej1367




