You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何为Firefox书签上下文菜单添加功能图标?

如何为Firefox书签上下文菜单添加功能图标?

嘿,刚好有个实用的方法能帮你实现这个需求!多亏了MC10的分享,我现在就是用这种方式给书签上下文菜单加图标,不用装插件,还能在离线环境下正常使用。

先给你看看对应的场景:右键点击Firefox书签栏里的文件夹时,菜单每一项的左侧都有空位,刚好可以用来放你想要的剪刀、双页、垃圾桶这类功能图标。

Firefox书签上下文菜单空白位置示例

具体实现方法:

  1. 准备图标文件:先把需要的图标(比如剪切用的剪刀、复制用的双页、删除用的垃圾桶、排序用的图标等)下载好,建议用SVG格式,然后存到本地的一个固定文件夹里,比如C:/Users/User/AppData/Roaming/Mozilla/Firefox/assets/(你可以根据自己的系统和路径调整)。
  2. 编写自定义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;
}
  1. 启用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

火山引擎 最新活动