使用Vite+React+TS+CRXJS开发Chrome扩展时executeScript加载文件失败

我用Vite、React、TypeScript和CRXJS开发Chrome扩展，这是第一个相关项目。点击index.html里的按钮时，想在当前标签页执行脚本，通过chrome.scripting.executeScript的files属性指定script.ts，但一直报“无法加载文件”的错误。

我推测问题出在构建环节：script.ts被转译为JavaScript并打包后，不再处于根目录，文件路径发生了变化，但我不知道打包后该如何指定新的文件路径。

相关配置与代码 #

manifest.json #

{
  "manifest_version": 3,
  "version": "1.0.0",
  "name": "Spotify Song Extractor",
  "action": {
    "default_popup": "index.html"
  },

  "permissions": ["tabs", "scripting", "nativeMessaging", "activeTab"],
  "host_permissions": [
    "http://open.spotify.com/track/*",
    "https://open.spotify.com/track/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "http://open.spotify.com/track/*",
        "https://open.spotify.com/track/*"
      ],
      "js": ["src/script.ts"],
      "run_at": "document_end"
    }
  ],
  "background": {
    "service_worker": "src/service-worker.ts",
    "type": "module"
  }
}

报错的service-worker.ts代码 #

chrome.runtime.onMessage.addListener((message /*, sender, sendResponse*/) => {
  if (message === 'get-details') {
    chrome.tabs.query({ active: true, currentWindow: true }, (tab) => {
      // Execute content script on the current page
      chrome.scripting
        .executeScript({
          target: {
            tabId: tab[0]?.id ?? 0,
          },

          files: ['script.ts'],
        })
        .then((result) => console.log('executed script: ', result))
        .catch((err) => {
          console.log('error running script', err)
        })
    })
  }
})

项目文件结构 #

根目录下包含：

• src文件夹（内含script.ts、service-worker.ts等文件）
• index.html
• manifest.json

已尝试的方法 #

我曾把script.ts放到public文件夹，虽然解决了路径问题，但文件没有被转译为JavaScript，因为其中定义了TypeScript类型，导致运行报错；而且构建后文件会进入asset文件夹，文件名是自动生成的，无法确定正确的引用方式。

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