将内容脚本注入 Chrome 选项卡时出现问题（Manifest V3）

Question

I'm building a Chrome Extension that needs to detect DOM events (click, mouseover, etc.) on any tab the user switches to or opens during a recording session. The way that seems most appropriate to do this is using the scripting API to inject a script that set's the appropriate event listeners and can post messages back to the chrome.runtime API to collect data.

However, I'm unable to inject the content Script successfully. My project is a Vue3 + Vite + Manifest V3 Chrome Extension, and in my background.js on the appropriate chrome.tabs listeners I'm executing:

  chrome.scripting.executeScript({
    target: { tabId },
    files: ['src/content_scripts/events.js']
  });

The documentation clearly states that a relative path from the directory root is required. However, no matter how I structure that path, it says the file isn't found.

The exact error I'm receiving is:

Uncaught (in promise) Error: Could not load file: 'src/content_scripts/events.js'.

Also, my manifest.js file is:

{
  "manifest_version": 3,
  "name": "walkthrough.ai capturer",
  "version": "1.0.0",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128x128.png"
  },
  "permissions": [
    "desktopCapture",
    "tabCapture",
    "scripting",
    "activeTab",
    "tabs"
  ],
  "host_permissions": ["https://*/*", "http://*/*"],
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png"
    },
    "default_title": "Open Options"
  },
  "background": {
    "service_worker": "src/background/index.js",
    "type": "module"
  }
}

Any ideas on what could be happening?

Thank you

Answer 1

How about using chrome.runtime.getURL('where content script is from you are calling this API') instead of moving the content script file to public folder?

That way I get my file path correctly after building the project.

Answer 2

After doing some more digging on @wOxxOm 's suggestion, I was able to figure it out.

The content script wasn't showing up in the build folder, which is where the scripting API was looking for it to be a relative import from.

In order to solve the issue, I put the content script in my /public folder so that it gets placed in the /dist folder when the project is built.

This worked for now. Thank you!