如何解决 chrome 扩展程序代码中实时覆盖 google-meet 面部图像的错误？

Question

1. https://meet.google.com/后面的URL设置不正确，引用了js文件。

---

2. loader.js 中的 document.body.insertBefore(script, document.body.firstChild) 给我一个错误，我不能在manifestV3中使用它吗？

• 显示的错误信息如下。 ※由于该网站被标记为垃圾邮件，因此无法发布详细的错误文本。

• 好像有错误，尤其是这里
  ・loader.js
  document.body.insertBefore（脚本，document.body.firstChild）

---

拒绝加载脚本“https://meet.google.com/tf-core.js”，因为它违反了内容安全策略指令

• 我们觉得很奇怪，这里由于某种原因在 https://meet.google 后面引用了 js 文件。

---

拒绝执行内联脚本，因为它违反了内容安全策略指令

---

未捕获（承诺）事件 语境 https://meet.google.com/ 堆栈跟踪 loader.js:36（未命名函数）

---

• extension.sh是代码中下载js文件的代码。该 shell 用于下载文件。

• 文件夹结构
  扩展
  -扩展.sh
  -main.js
  -loader.js
  -manifest.json
  -tf-后端-webgl.js -tf-converter.js -tf-core.js

---

扩展.sh

#!/usr/bin/env bash

#NOTE: if you are on macOS, update to bash v4 i.e brew install bash

rm -rf extension extension.zip
cp -r public extension 
cd extension
 
declare -A scripts0=(
    [file]='tf-core.js'
    [url]='https://unpkg.com/@tensorflow/[email protected]/dist/tf-core.js'
)
declare -A scripts1=(
    [file]='tf-converter.js'
    [url]='https://unpkg.com/@tensorflow/[email protected]/dist/tf-converter.js'
)
declare -A scripts2=(
    [file]='tf-backend-webgl.js'
    [url]='https://unpkg.com/@tensorflow/[email protected]/dist/tf-backend-webgl.js'
)
declare -A scripts3=(
    [file]='face-landmarks-detection.js'
    [url]='https://unpkg.com/@tensorflow-models/[email protected]/dist/face-landmarks-detection.js'
)

declare -n scripts
for scripts  in ${!scripts@}; do
  curl ${scripts[url]} -o ${scripts[file]}
  sed -i"" -e "s|${scripts[url]}|${scripts[file]}|g" main.js
done

zip -r extension.zip *
mv extension.zip ../

---

manifest.js

{
  "manifest_version": 3,
  "name": "Meet Face Hack Extension",
  "version": "0.0.1",
  "description": "Meet hack",
    "host_permissions": [
    "https://meet.google.com/"
  ],
  "content_scripts": [
    {
      "js": ["loader.js"],
      "matches": ["https://meet.google.com/*"],
      "run_at": "document_start"
    }
  ],
   "content_security_policy": {
    "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals;",
    "script-src":["'self'","https://unpkg.com"]
  },
  "web_accessible_resources": [
    {
      "resources": ["main.js", "lmMarkImg.js"],
      "matches": ["https://meet.google.com/*"]
    }
  ]
}

---

loader.js

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = src
    script.onload = () => {
      console.log(`loaded: ${src}`)
      resolve()
    }
    script.onerror = (e) => reject(e)
    document.body.insertBefore(script, document.body.firstChild)
  })
}

async function loadLocalScript(path) {
  const res = await fetch(chrome.runtime.getURL(path), {method: 'GET'})
  const text = await res.text()
  const script = document.createElement('script')
  script.textContent = text
  document.body.insertBefore(script, document.body.firstChild)
}


async function load() {
  loadLocalScript("lmMarkImg.js")
  
  await loadScript("tf-core.js")
  await loadScript("tf-converter.js")
  await loadScript("tf-backend-webgl.js")
  await loadScript("face-landmarks-detection.js")

  loadLocalScript("main.js")
}

window.addEventListener('load', async (evt) => {
  await load()
})

因为需要粘贴最少量的代码，所以没有粘贴main.js。有需要的话我会补充的。

Answer 1

1. 在 ManifestV3 的默认 ISOLATED 世界中运行的内容脚本无法设置

   textContent

   元素的

   script

   。删除 loadLocalScript 并在 loadScript 中使用

   script.src = chrome.runtime.getURL(path)

   。
2. 不要为 tf 脚本调用 loadScript，因为你没有它们，它们是 main.js 的一部分。

这是整个 loader.js：

for (const path of [
  'lmMarkImg.js',
  'main.js',
]) {
  const script = document.createElement('script')
  script.src = chrome.runtime.getURL(path);
  document.documentElement.appendChild(script);
  script.remove();
}