[BUG] Cannot read properties of undefined (reading 'contextMenus')

[hhmy27]

What happened?

// code at src/background/index.ts
import "@plasmohq/messaging/background"

export {}

console.log(
  "Live now; make now always the most precious time. Now will never come again.",
)

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "openSidePanel",
    title: "Open side panel",
    contexts: ["all"]
  })
})

chrome.contextMenus.onClicked.addListener((info, tab) => {
  console.log("background open side panel")
  if (info.menuItemId === "openSidePanel") {
    chrome.sidePanel.open({ windowId: tab.windowId })
  }
})

I'm trying to add an "open side panel" button to the menu bar after the plugin is installed. When the user clicks on it, the side panel of Chrome will open. This part of the code is consistent with Chrome's official documentation, but when I use it on Plasmo, it prompts me with Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked'), which leaves me very confused. Does anyone know where the problem might be?

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

• [X] I would like to fix this BUG via a PR

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[hhmy27]

I found this section in the Plasmo documentation: If you already have a background.ts or background.js file, you will have to create a background folder and move your script to background/index.ts or background/index.js.

This implies that our background.js must be stored under the background/ directory, but once I do this, I encounter this error: Service worker registration failed. Status code: 15

This makes my service worker completely unusable, which is a serious issue for me, as it's almost impossible for me to continue developing. Can any developers of plasmo pay attention to this issue?

[hhmy27]

A possible reason is: Manifest v3 requires our background.js/ts to be mounted under the root path to be recognized, but our generated code declares it like this: "background": { "service_worker": "static/background/index.js" }, which leads to the service worker not being able to be mounted.

I have created a demo repo to help developers locate the bug: https://github.com/hhmy27/test-messaging

[AlexGodard]

@hhmy27 It seems like you're missing

    "permissions": [
      "contextMenus"
    ]

in your package.json. I tried adding it and it works after.

[chengfengfengwang]

@hhmy27 It seems like you're missing

    "permissions": [
      "contextMenus"
    ]

in your package.json. I tried adding it and it works after.

I encountered the same problem. After adding permissions, everything was okay. Sometimes the framework automatically adds the necessary permissions, and sometimes it does not. It might be better to mention this in the documentation.