[webext-bridge] No handler registered in 'content-script' to accept messages with id 'get-name'

[capoia]

Describe the bug

Hello, I need to send and receive content script messages with .vue files and vice versa. But whenever I try, I can't make my content script communicate with the .vue, and I even tried options, and I get the same error:

Reproduction

https://stackblitz.com/edit/github-hcxykr

System Info

System:
    OS: macOS 13.4
    CPU: (8) arm64 Apple M1
    Memory: 84.78 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Firefox: 113.0.2
    Safari: 16.5

Used Package Manager

yarn

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[opeadeyomoye]

For others that may run into a similar error, you may simply need to check that your sendMessage / onMessage import statements specify the right "endpoints" since these endpoints indicate the source and destination of each message according to webext-bridge's documentation.

i.e. within e.g. src/contentScripts/views/Sample.vue

import { ... } from 'webext-bridge/content-script'

While in your background script(s) it'll be:

import { ... } from 'webext-bridge/background'

and so on (other endpoints are popup, options, devtools and window)

---

Looks like you made your imports correctly @capoia . Do you think the error could've come up because you send the message in contentScripts/index.ts before the listener gets registered in contentScripts/App.vue (since the vue app is only initialized many lines after the sendMessage() call)?