Error in inject js while import Vue Component

[Rookiewan]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

inject/index.ts

import App from './App.vue'
console.log(App)

export {}

content/index.ts

import injectJsDemoSrc from '../inject/index.ts?script&module' and insert into body

error

but build success

Reproduction

// src/content/index.ts

import injectJsSrc from '../inject/index.ts?script&module'

const script = document.createElement('script')
script.src = chrome.runtime.getURL(injectJsSrc)
script.type = 'module'
document.head.prepend(script)

// src/inject/index.ts
import App from './App.vue'
console.log(App)

<!- src/inject/App.vue ->
<template>
  <div>hello</div>
</template>

run yarn dev

Logs

Uncaught TypeError: Error in invocation of runtime.connect(optional string extensionId, optional object connectInfo): chrome.runtime.connect() called from a webpage must specify an Extension ID (string) for its first argument.

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 311.13 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.53
    Safari: 16.0

Severity

blocking all usage of RPCE

[jacksteamdev]

Hey @Rookiewan 👋 Thanks for putting together this issue!

This error happens when Vite adds the Vite client to the Vue component. CRXJS modifies the client to work in a content script, but the content script relies on the Chrome API (whis is only available to content scripts, not injected scripts).

Usually, an injected main world script is plain vanilla JavaScript. CRXJS supports frameworks like Vue in a content script, but not necessarily in a main-world script.

What are you doing with an injected script that you can't with a content script?