Chrome扩展Manifest v3：HTML元素右键菜单功能失效问题排查

我开发了一款Chrome扩展，用于获取HTML元素的背景图，在右键菜单中添加了对应选项，该功能在Manifest v2中可正常运行，但升级到Manifest v3后代码不再生效，想知道是否遗漏了某些配置。

Manifest v2 配置 #

{ 
  "description": "Get background image of an HTML element",
  "manifest_version": 2,
  "name": "BackgroundImage get",
  "version": "0.0.0.1",
  "homepage_url": "https://www.example.com",
  "icons": {
    "48": "icons/icon48.png"
  },
  
  "background": {
    "scripts": ["background.js"]
  },

  "permissions": [
    "activeTab",
    "contextMenus"
  ],

  "browser_action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

原background.js #

chrome.contextMenus.create({
    title: 'Get Background Image',
    onclick: function(e){
        console.log("Example action")
    }
}, function(){})

我尝试的Manifest v3配置 #

{
    "manifest_version": 3,
    "name": "BackgroundImage get",
    "description": "Get background image of an HTML element",
    "version": "0.0.1",
    "icons": {
        "16": "icons/icon16.png",
        "32": "icons/icon32.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    },
    "action": {
        "default_title": "Background Image",
        "default_popup": "popup.html"
    },
    "permissions": [
        "contextMenus"
    ],
    "background": {
        "service_worker": "background.js"
    }
}

Manifest v3相对于v2有核心机制变更，你的问题主要出在Service Worker生命周期和API使用规则上，以下是需要修改的关键点：

1. 调整右键菜单的创建逻辑 #

Manifest v3的背景页是Service Worker，它会在闲置时自动终止，直接在脚本顶层调用chrome.contextMenus.create可能不会执行。需要将创建逻辑放到chrome.runtime.onInstalled事件中，确保扩展安装/更新时触发：

同时，Manifest v3不再支持在chrome.contextMenus.create中直接定义onclick回调，必须单独监听chrome.contextMenus.onClicked事件：

修改后的background.js：

// 扩展安装/更新时创建右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'get-background-image', // 新增ID，方便后续识别菜单
    title: 'Get Background Image',
    contexts: ['all'] // 指定菜单触发的上下文，比如页面、选中元素等，默认可能不显示
  });
});

// 监听右键菜单点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'get-background-image') {
    console.log("Example action");
    // 后续获取背景图需要向当前页面注入Content Script，可在此添加对应逻辑
  }
});

2. 补充必要权限 #

要实现获取页面元素背景图的功能，需要向页面注入脚本，因此需要添加scripting权限；activeTab权限可让你临时访问当前激活的标签页，避免申请过宽的权限：

修改Manifest v3的permissions字段：

"permissions": [
  "contextMenus",
  "activeTab",
  "scripting"
],

3. 可选：移除不必要的Popup配置 #

如果你不需要点击扩展图标打开弹窗，可以删除action中的default_popup字段，不影响右键菜单功能，保留也不会造成问题。

最终Manifest v3配置 #

{
    "manifest_version": 3,
    "name": "BackgroundImage get",
    "description": "Get background image of an HTML element",
    "version": "0.0.1",
    "icons": {
        "16": "icons/icon16.png",
        "32": "icons/icon32.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    },
    "action": {
        "default_title": "Background Image"
    },
    "permissions": [
        "contextMenus",
        "activeTab",
        "scripting"
    ],
    "background": {
        "service_worker": "background.js"
    }
}

完成以上修改后，重新加载扩展，右键菜单即可正常显示并触发点击事件。后续若要实现获取背景图的具体逻辑，还需通过chrome.scripting.executeScript向页面注入脚本，获取目标元素的backgroundImage样式。

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