javascript Chrome扩展:如何使用manifest v3在HTML元素的右键菜单中添加选项?

li9yvcax  于 2022-12-02  发布在  Java
关注(0)|答案(2)|浏览(465)

我想创建一个Chrome扩展来获得HTML元素的背景图像,所以我在右键菜单中添加了一个选项。它在Manifest v2中工作,但当我试图更新到Manifest v3时,我的代码不再工作。我错过了什么吗?
下面是我的manifest.json

{

  "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.json

{
    "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"
    }
}

但这行不通。

qyyhg6bp

qyyhg6bp1#

请检查Service Worker的DevTools中的错误输出。
未检查的运行时。lastError:使用事件页面或Service Workers的扩展必须将id参数传递给chrome。contextMenus.create
修复此错误将打印以下错误:
未检查的运行时。lastError:使用事件页或服务工作者的扩展不能将onclick参数传递给chrome.contextMenus.create。请改用chrome.contextMenus.onClicked事件。
修复此错误,您的扩展将正常工作。
background.js

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'hoge',
    title: 'Get Background Image',
  });
});

chrome.contextMenus.onClicked.addListener((info) => {
  console.log("Example action")
});
dwbf0jvd

dwbf0jvd2#

在信息清单版本3中,background属性是用来宣告扩充功能的背景指令码,而不是像在信息清单版本2中一样,browser_action属性内的background属性。
若要修正程式码,您可以将background属性移出browser_action属性,并指定背景指令码档案的路径。它应该看起来像这样:

{
  "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": {
    "scripts": ["background.js"]
  }
}

您可能还需要更新后台脚本中的代码,以使用清单版本3中引入的新API。例如,chrome.contextMenus.create方法现在要求您传入上下文菜单项的id属性。以下是后台脚本的更新版本:

chrome.contextMenus.create({
  id: "get-background-image",
  title: "Get Background Image",
  contexts: ["all"],
  onclick: function(info, tab) {
    console.log("Example action");
  }
});

有关如何迁移到manifest版本3的更多信息,请参阅Migrating to Manifest V3 guide

相关问题