错误：使用 chrome.scripting.executeScript 时无法加载文件：“script.ts”

Question

我正在使用 Vite 与 React、Typescript 和 CRXJS 开发一个 chrome 扩展。这是我的第一个项目。我有一个脚本，当单击 index.html 中的按钮时，我想在当前选项卡上执行该脚本。我使用 chrome.scripting.executeScript 和 files 属性来选择脚本，但它给了我错误无法加载文件。

我认为问题是当它构建时，script.ts不在根目录，因为它被转换为javascript然后捆绑，所以它有一个不同的文件路径，但我不知道如何选择新的文件路径包装好后。

我的清单.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)
        })
    })
  }
})

文件结构：

我尝试将其放在有效的公共文件夹中，但随后它没有被转换为 js 文件并保留为 ts 文件，这给出了一个错误，因为我在那里定义了一个类型。另外，当它构建完成后，它会进入资源文件夹，但会在生成的名称下，因此不确定如何选择它。

Answer 1

要在 React 和 Vite 扩展中创建单独的条目，需要对

vite.config.ts

 进行一些更改。一般来说，您需要指定整个构建的输出文件夹格式以及构建文件夹中每个单独条目的自定义输入和输出。

第1步：

首先，您需要将

outDir 添加到 vite.config.ts

 文件中的构建选项中，这指定了输出目录，在您的情况下，它将在 

src

 文件夹中输出 

dist

 目录。

export default defineConfig({
  plugins: [
    ....
  ],
  build: {
    outDir,
    ...
  }
});

第2步： 添加 outDir

 后，您需要通过在 Vite 构建配置中添加 

rollupOptions 来指定构建过程后所需的分隔条目。

import path, { resolve } from "path";
...
/* resolve root path  */
const root = resolve(__dirname, "src");
...

export default defineConfig({
  resolve: {
    /* create alias for src path */
    alias: {
      "@src": root,  
    },
  },
  plugins: [
    ....
  ],
  build: {
    outDir,
    rollupOptions: {
      ...
      input: {
        ...
        /* custom entries for dist directory */
        injectScript: resolve(root,'script.ts'),
      },
    }
  }
});

此后，您应该能够在

injectScript

 构建文件夹中找到 

index.js

 文件夹，其中包含单个 

dist

 文件。在清单文件中，您只需将内容脚本的 

js

 文件路径替换为 

src/injectScript/index.js

。希望这能有所帮助！