Vue3+Vite开发Chrome扩展遇TS问题：语法错误与Service Worker注册失败

问题概述 #

• Service Worker注册失败，状态码为15
• background.ts文件出现语法错误：Uncaught SyntaxError: Unexpected token ':'，推测TypeScript未被正确识别或转译

配置详情 #

background.ts #

// Create a context menu item for the extension
chrome.contextMenus.create({
  id: "name",
  title: "title",
  contexts: ["selection"],
});

let selectedLanguages: { code: string; name: string; charset: string[] }[] = [];

main.ts #

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import PrimeVue from "primevue/config";

import "primevue/resources/themes/aura-light-purple/theme.css";

const app = createApp(App);
app.use(PrimeVue, {
  /* options */
});
app.mount("#app");

App.vue #

<script setup lang="ts">
import Popup from "./components/Popup.vue";
</script>

<template>
  <Popup />
</template>

tsconfig.json #

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "./src/**/*",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

manifest.json #

{
  "manifest_version": 3,
  "name": "Name",
  "version": "0.0.1",
  "description": "This is a description",
  "author": "",
  "action": {
    "default_popup": "index.html"
  },
  "background": {
    "service_worker": "/src/components/scripts/background.ts"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["/src/components/scripts/content.ts"]
    }
  ],
  "permissions": ["contextMenus", "storage"]
}

具体错误信息 #

1. Service Worker注册失败：Service worker registration failed. Status code: 15
2. 语法错误：Uncaught SyntaxError: Unexpected token ':' at http://localhost:5173//src/components/scripts/background.ts:8

已尝试操作 #

• 验证manifest.json中的文件路径正确性
• 检查tsconfig.json的TypeScript配置项
• 排查background.ts的语法错误

目前问题仍未解决，寻求相关解决方案。

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