how to use web worker in wxt project

[honwhy]

ask for help.
in content_scripts or background, can not use eval because safe-eval is not permitted in mv3 version. so I have the work around solution, as codes bellow, but i can't see any errors or expected behaviors.

// worker.ts
/* eslint-disable no-restricted-globals */
self.onmessage = (event: MessageEvent) => {
  const htmlContent = event.data
  // 创建一个虚拟的 DOM 环境来解析和执行脚本
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlContent, 'text/html')

  // 获取所有的 <script> 标签
  const scripts = doc.querySelectorAll('script')
  const results: any[] = []

  scripts.forEach((script) => {
    if (script.textContent) {
      try {
        // 使用 eval 执行 script 内容（注意：eval 是危险的，仅用于演示）
        const result = eval(script.textContent)
        // 假设我们想要获取定义的变量
        if (typeof result === 'object' && result !== null) {
          results.push(result)
        }
      }
      catch (error) {
        console.error('Error executing script:', error)
      }
    }
  })

  // 将结果发送回主线程
  self.postMessage(results)
}

// index.tsx
  useEffect(() => {
    const worker = new Worker(new URL('./worker.ts', import.meta.url))

    worker.onmessage = (event) => {
      setResult(event.data)
    }
    debugLogger('debug', 'collins worker', htmlContent)
    worker.postMessage(htmlContent)

    // 清理函数
    return () => {
      worker.terminate()
    }
  }, [htmlContent])

[aklinker1]

If you're using new URL("./worker.js", import.meta.url) syntax, understand that Vite was built for web environments, not extension environments. This probably resolves to "https://some-hostname/some/path/to/worker.js" at runtime, not a file in your chrome extension. Add a log to print the URL to be sure.

You probably need to use new URL(browser.runtime.getURL("/worker.js")) instead.

[honwhy]

some more info to provide, https://github.com/Rob--W/chrome-api/tree/master/patch-worker

[aklinker1]

Nice, didn't know that! You can just download that file and import it at the beginning of your content script to include the patch.

import "./patch-worker"

export default defineContentScript({ ... });

Didn't test this, but I'm pretty sure it will work.