Chrome extension: How to add an option on the right click menu of an HTML element using manifest v3?-CodePudding

I want to create a Chrome extension to get the background image of an HTML element so I added an option in the right-click menu. It worked in Manifest v2 but when I tried to update to Manifest v3 my code did not longer worked. Is there a thing I missed?

Here is my 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"
    }
  }

}

And here is my background.js file:

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

I tried to edit my manifest.json like that:

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

But that doesn't work.

CodePudding user response：

Please check the error output in DevTools of Service Worker.

Unchecked runtime.lastError: Extensions using event pages or Service Workers must pass an id parameter to chrome.contextMenus.create

Fixing this error prints the following error:

Unchecked runtime.lastError: Extensions using event pages or Service Workers cannot pass an onclick parameter to chrome.contextMenus.create. Instead, use the chrome.contextMenus.onClicked event.

Fix this error and your extension will work correctly.

background.js

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

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

CodePudding user response：

In manifest version 3, the background property is used to declare the background script for an extension, not the background property inside the browser_action property as it was in manifest version 2.

To fix your code, you can move the background property outside of the browser_action property and specify the path to your background script file. It should look something like this:

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

You may also need to update the code in your background script to use the new APIs introduced in manifest version 3. For example, the chrome.contextMenus.create method now requires you to pass in the id property for the context menu item. Here is an updated version of your background script:

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

For more information on how to migrate to manifest version 3, you can refer to the Migrating to Manifest V3 guide.