Javascript 如何解决chrome—extension代码中的错误，它会实时覆盖google—meet的面部图像'

1. www.example.com后面的URL设置不正确，引用了一个js文件.

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

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

• It seems that there is an error especially here
  ・loader.js
  document.body.insertBefore(script, document.body.firstChild)

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

• 我们认为js文件在www.example.com后面被引用是很奇怪的.

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

Uncatch(in promise) 上下文 https://meet.google.com/ 堆栈跟踪 loader. js:36(未命名函数)

• extension.sh 这个shell是用来下载文件的.

• 文件夹 struct
  延伸
  -face-kandmarks-detection.js
  -ImMarkIMG.js
  -extensions.sh
  -Main.js
  -loader.js
  -Manifest.json
  -tf-backend-webgl.js
  -tf-converter.js
  -tf-core.js
  

extensions.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/tfjs-core@2.4.0/dist/tf-core.js'
)
declare -A scripts1=(
    [file]='tf-converter.js'
    [url]='https://unpkg.com/@tensorflow/tfjs-converter@2.4.0/dist/tf-converter.js'
)
declare -A scripts2=(
    [file]='tf-backend-webgl.js'
    [url]='https://unpkg.com/@tensorflow/tfjs-backend-webgl@2.4.0/dist/tf-backend-webgl.js'
)
declare -A scripts3=(
    [file]='face-landmarks-detection.js'
    [url]='https://unpkg.com/@tensorflow-models/face-landmarks-detection@0.0.1/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

const video = document.createElement('video')
const canvas = document.createElement('canvas')
const canvasCtx = canvas.getContext('2d')
let model = null
let keepAnimation = false

let imageIndex = 0
function getImage() {
  const image = lmMarkImages[imageIndex]
  imageIndex += 1
  if (imageIndex == lmMarkImages.length) {
    imageIndex = 0
  }

  return image
}

function drawImage(prediction) {
  let imageIndex = 0
  const boundingBox = prediction.boundingBox
  const x = boundingBox.topLeft[0]
  const y = boundingBox.topLeft[1]
  const w = boundingBox.bottomRight[0] - x
  const h = boundingBox.bottomRight[1] - y

  // draw Rectangle for debug
  // canvasCtx.strokeStyle = "rgb(255, 0, 0)";
  // canvasCtx.strokeRect(x, y, w, h)

  const image = getImage()
  canvasCtx.drawImage(image, x, y, w, h)
}

async function updateCanvas() {
  if (!keepAnimation) return

  if (model) {
    canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height)

    const predictions = await model.estimateFaces({ input: video })
    for (const prediction of predictions) {
      drawImage(prediction)
    }
  }
  requestAnimationFrame(updateCanvas)
}

function isScreenSharing(constraints) {
  return !constraints.video.deviceId
}

function replaceStopFunction(stream, videoTrack) {
  if (!videoTrack) return

  videoTrack._stop = videoTrack.stop
  videoTrack.stop = function () {
    keepAnimation = false
    videoTrack._stop()
    stream.getTracks().forEach((track) => {
      track.stop()
    })
  }
}

const _getUserMedia = navigator.mediaDevices.getUserMedia.bind(
  navigator.mediaDevices
)

navigator.mediaDevices.getUserMedia = async function (constraints) {
  const srcStream = await _getUserMedia(constraints)

  if (isScreenSharing(constraints)) {
    return srcStream
  }

  video.srcObject = srcStream
  video.onloadedmetadata = function (e) {
    video.play()
    video.volume = 0.0
    video.width = video.videoWidth
    video.height = video.videoHeight
    canvas.width = video.width
    canvas.height = video.height

    keepAnimation = true
    updateCanvas()
  }

  const outStream = canvas.captureStream(10)
  const videoTrack = outStream.getVideoTracks()[0]
  replaceStopFunction(srcStream, videoTrack)

  return outStream
}

async function loadModel() {
  model = await faceLandmarksDetection.load(
    faceLandmarksDetection.SupportedPackages.mediapipeFacemesh
  )
  //console.log("model: loaded")
}

function main() {
  loadModel()
}

main()

因为粘贴最小数量的代码是必要的，所以Main.js没有粘贴.如有必要，我会补充.