[feature request] add some actions to the right click menu about vite-vue3-chrome-extension-v3

[timelic]

This just what I need! Thanks for you help🥰

[mubaidr]

Add permissions:

{
  "name": "My extension",
  ...
  "permissions": [
    "contextMenus",
    "activeTab"
  ],
  "icons": {
    "16": "icon-bitty.png"
  },
  ...
}

then in your service_worker (i.e. background script), add listner for context menu click:

chrome.contextMenus.onClicked.addListener((info, tab) => {
  const { menuItemId, selectionText } = info;
  const { id, url } = tab;
  
  console.log({ id, url, menuItemId, selectionText });
});

[timelic]

I created this repo to test the code (in the latest commit). However, when I loaded this dev extension into Chrome, nothing seemed to happen, and no new item appeared in my right-click menu.

[mubaidr]

Add permissions:

{
  "name": "My extension",
  ...
  "permissions": [
    "contextMenus",
    "activeTab"
  ],
  "icons": {
    "16": "icon-bitty.png"
  },
  ...
}

then in your service_worker (i.e. background script), add listner for context menu click:

chrome.contextMenus.onClicked.addListener((info, tab) => {
  const { menuItemId, selectionText } = info;
  const { id, url } = tab;
  
  console.log({ id, url, menuItemId, selectionText });
});

This just add required permissions and event listeners to the extension. You need to actually create a context menu when installed, e.g.

chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        "title": 'My context Menu"',
        "contexts": ["page"],
        "id": "myContextMenuId"
    });
});

More details about context menu API here: https://developer.chrome.com/docs/extensions/reference/contextMenus/#type-ContextType