Chrome扩展Manifest V3：右键菜单触发页面控制台命令实现问询

要实现右键菜单触发的代码在当前操作页面的控制台输出，你需要通过脚本注入的方式将代码执行在页面上下文，而非后台服务工作者的上下文里。以下是具体修改步骤：

1. 更新 manifest.json #

需要添加scripting权限，Manifest V3中注入脚本必须声明该权限：

{
  "name": "Hello",
  "description": "Hello world",
  "version": "0.1.107",
  "permissions": ["contextMenus", "scripting"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "manifest_version": 3
}

2. 修改 background.js #

将原来直接在后台打印的逻辑，替换为调用chrome.scripting.executeScript向当前标签页注入执行代码的函数：

chrome.contextMenus.create({
  id: 'hello',
  title: 'Hello world',
  contexts: ['page']
})

function contextClick(info, tab) {
  const { menuItemId } = info

  if (menuItemId === 'hello') {
    // 向当前标签页注入脚本，在页面上下文执行console.log
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        console.log("Hello world");
      }
    });
  }
}

chrome.contextMenus.onClicked.addListener(contextClick);

原理说明 #

• 原来的console.log运行在后台服务工作者的控制台中，所以你只能在扩展的后台页面控制台看到输出。
• 通过chrome.scripting.executeScript注入的函数会在当前页面的上下文环境中执行，对应的console.log就会出现在该页面的开发者工具控制台里。

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