有没有办法从网页将项目添加到本机浏览器的上下文菜单？-解网

问：

至少根据我的经验，尝试为网站实现上下文菜单是很困难的。我主要使用 react 构建单页应用程序，其中上下文菜单通常是必需的。虽然直到今天，我还没有在 npm 上找到一个好的上下文菜单库。我目前选择的库是 react menu，它不错，但有问题，对性能不是很好。所有其他上下文菜单库似乎都缺少功能，或者已经停产了好几年。我想知道浏览器的内置上下文菜单是否可以由一个网站操作，就像 chrome.contextMenus API 一样。

我最近发现 chrome devtools 实际上只是一个普通的网页，在任何基于 chromium 的浏览器上，你都可以在这里访问它：devtools://devtools/bundled/devtools_app.html。当然，devtools 在许多地方使用自定义上下文菜单，例如在选项卡上。

此屏幕截图取自 ms edge，但 chrome 也会发生同样的情况

很明显，自定义上下文菜单可以以某种方式实现，考虑到我可以在普通的浏览器选项卡中重现此上下文菜单。我知道 devtools 在受浏览器保护的协议（devtools）中运行，该协议可能会被赋予额外的权限来访问用于上下文菜单的任何 api，但我不明白为什么 chromium 会故意限制使用这样的 api。

像这样的 api 将非常有用，我即将浏览 chrome devtools 源代码以找到它是如何实现的，但是在 api 由于某种原因仅限于普通网站的情况下，我想知道是否有人知道 devtools 中使用了什么 api。

javascript google-chrome-devtools contextmenu chromium

如果你按照@Slbox的评论去做，你可以提示用户安装一个扩展程序，然后在屏幕上给他们一个警告，说如果没有这个扩展程序，他们将无法充分发挥网站的潜力，并可能让他们等待 10-20 秒，然后让他们关闭窗口并添加一个选项，他们可以随时安装扩展程序。这似乎是个好主意（至少对我来说是这样）

答：

1赞 Simon Laux 8/5/2023 #1

据我所知，用于制作自定义本机上下文菜单的 api 不存在。

Firefox 有一个实验性/非标准的 api，但又被删除了：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu

因此，据我所知，在一般网络上是不可能的。尽管根据您的上下文，您可能有权修改本机上下文菜单：

通过浏览器扩展添加菜单项
- Firefox：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items
- 基于 Chromium 的浏览器：https://developer.chrome.com/docs/extensions/reference/contextMenus/
Electron 有一个 api 来创建自定义上下文菜单： https://www.electronjs.org/docs/latest/api/menu#render-process
我相信 chrome 开发工具为此使用内部 api。

0赞 JorensM 8/16/2023 #2

目前无法更改浏览器的本机上下文菜单，除非通过扩展。

您提到您已经尝试过上下文菜单库，我可以建议（无耻地插入）我的上下文菜单库吗？

有没有办法从网页将项目添加到本机浏览器的上下文菜单？

Is there a way to add items to the native browser's context menu from a webpage?

评论

评论