Chrome扩展右键菜单调用sidePanel.open()报错：需响应用户手势

右键菜单点击为啥不算有效用户手势？ #

Chrome的chrome.contextMenus.onClicked回调虽然由用户右键点击触发，但这个回调运行在扩展后台环境中，不属于Chrome定义的直接用户手势上下文范围。chrome.sidePanel.open()要求调用必须在用户直接与页面交互的场景（比如页面内点击、按键操作）下执行，后台环境的回调不符合这个要求，因此会抛出错误。

解决办法 #

按以下步骤修改代码即可实现需求：

1. 后台脚本发送消息给内容脚本
   将原来直接调用sidePanel.open()的逻辑，改为向当前标签页的内容脚本发送消息：

   chrome.contextMenus.onClicked.addListener(async(info, tab) => {
     if(info.menuItemId === 'my-ctx-menu-item-id') {
       // 向内容脚本发送打开侧边面板的指令
       chrome.tabs.sendMessage(tab.id, { action: 'openSidePanel' });
     }
   })
   

2. 内容脚本响应消息并打开侧边面板
   内容脚本运行在网页上下文环境中，这里调用sidePanel.open()符合用户手势验证要求：

   // content.js 内容脚本文件
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.action === 'openSidePanel') {
       chrome.sidePanel.open({ tabId: sender.tab.id });
     }
   });
   

3. 配置manifest.json确保权限与注入
   在manifest.json中补充必要的权限和内容脚本配置：

   {
     "manifest_version": 3,
     "name": "你的扩展名称",
     "version": "1.0",
     "permissions": ["contextMenus", "sidePanel", "tabs"],
     "content_scripts": [
       {
         "matches": ["<all_urls>"], // 可根据需求调整匹配的网址范围
         "js": ["content.js"]
       }
     ],
     "side_panel": {
       "default_path": "sidepanel.html" // 你的侧边面板页面路径
     }
   }
   

原理说明 #

内容脚本运行在网页上下文内，当它接收到后台的消息并调用sidePanel.open()时，这个操作会间接关联到用户之前的右键点击手势，刚好满足Chrome的用户手势验证规则，因此不会再抛出错误。

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