如何在Chrome扩展内容脚本中注入Svelte组件到网页

我正在使用一款Svelte+TypeScript的Chrome扩展模板开发扩展，想要在网页上渲染Svelte组件，但在内容脚本中导入组件时出现错误。

当前内容脚本代码（src/pages/content/index.ts）：

import PriceCard from 'src/components/PriceCard.svelte'

const root = document.createElement('div')
const anchor = document.querySelector('.game_area_purchase_game_wrapper')
anchor.insertAdjacentElement('beforebegin', root)   

const priceCard = new PriceCard({
     target: root
 })

export default priceCard

报错信息：

Uncaught SyntaxError: Cannot use import statement outside a module

参考Svelte组件代码（src/components/PriceCard.svelte）：

<script lang='ts'>
    let name = 'Joe Bob'
</script>

<main>
     <h1>Welcome {name} !</h1>
</main>

未修改模板默认配置文件（如manifest.json、vite.config.ts等）。

这个错误的核心是内容脚本未被当作ES模块处理，或是打包后的代码未适配Chrome扩展的加载规则。针对该模板，可按以下步骤调整：

1. 修正Manifest配置（Manifest V3） #

如果使用Manifest V3，需在manifest.json的content_scripts中添加type: "module"声明，确保Chrome将内容脚本视为模块加载：

"content_scripts": [
  {
    "matches": ["<all_urls>"], // 替换为你的目标网站匹配规则
    "js": ["src/pages/content/index.ts"],
    "type": "module"
  }
]

若为Manifest V2，Chrome不支持内容脚本作为模块，需升级到V3或确保所有依赖被打包为单文件（无import语句）。

2. 确认Vite打包配置 #

确保模板的vite.config.ts正确配置了Svelte和Chrome扩展插件，比如：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { crx } from '@crxjs/vite-plugin'
import manifest from './src/manifest.json'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      src: path.resolve(__dirname, './src'),
    },
  },
  plugins: [svelte(), crx({ manifest })],
})

该配置会确保路径别名src/生效，同时@crxjs/vite-plugin会正确处理扩展的打包逻辑。

3. 调整导入路径（可选） #

若路径别名未生效，将导入路径改为相对路径：

// 替换原导入语句
import PriceCard from '../../components/PriceCard.svelte'

4. 重新打包加载扩展 #

修改配置后，执行npm run build重新打包，在Chrome扩展管理页面重新加载扩展，验证错误是否消失。

内容的提问来源于stack exchange，提问作者0pH