HTML5如何为选中元素在浏览器内置上下文菜单添加自定义条目

当前公开Web标准下不存在可面向普通用户生效的原生上下文菜单修改方案，仅特定场景下有可行实现路径：

标准公开Web场景（面向所有普通访问用户） #

• 所有主流浏览器均已废弃早年火狐支持的<menu>/<menuitem>原生扩展方案，该特性已从HTML标准中移除，无兼容可能
• 唯一可用的标准contextmenu事件仅支持拦截默认菜单弹出，替换为完全自定义的DOM菜单，无法对原生内置菜单的条目做任何修改

特定场景的实现方案 #

浏览器扩展场景 #

各主流浏览器均为扩展开放了官方contextMenusAPI，通过该API添加的菜单项会直接插入原生上下文菜单中，样式完全匹配浏览器原生样式，无需额外自定义样式。该方案仅在扩展授权的站点范围内生效，若你的需求仅针对特定站点，可以引导用户安装对应扩展实现。

自定义内核容器场景 #

如果你的页面是运行在Electron、CEF、NW.js等自定义浏览器内核的客户端容器内，可以直接调用容器提供的原生菜单API，直接自定义完整上下文菜单的条目，样式完全和系统原生菜单一致，支持任意自定义条目插入。

个人使用Hack方案 #

如果仅需要在你自己的本地浏览器中实现该效果，可以通过两种手段实现：

• 安装支持contextMenusAPI的自定义油猴脚本管理器，通过脚本调用扩展API插入自定义菜单项
• 针对火狐浏览器可以使用userChrome.js脚本注入底层浏览器逻辑，直接修改全局上下文菜单的条目；Chrome系浏览器可以通过修改内核dll的方式实现，但难度更高

以上个人使用的Hack方案均不兼容浏览器大版本更新，每次升级后都可能需要重新适配调整，且无法给普通站点用户复用

公开站点替代方案 #

如果需要面向所有普通用户提供右键扩展功能，目前唯一可行的方案是实现完全自定义的右键DOM菜单，可通过CSS模拟对应浏览器的原生菜单样式，最大程度降低用户使用违和感。

内容的提问来源于stack exchange，提问作者Eternity