Manifest v3 从外部 API 获取数据

我正在开发一个与 Manifest v3 反应的浏览器(Chrome、Firefox)扩展。在我的应用程序中,我有一个搜索栏,我根据用户输入的值显示建议的单词(就像搜索引擎一样)。在 manifest v2 中,我曾经像这样加载这个脚本:

  "content_security_policy": "script-src 'self' https://suggest.finditnowonline.com; object-src 'self'" 

在 v3 中,这不再被支持,但我找不到如何让我的代码工作的方法。我在网上找到的最相关的资源是这个答案: Content Security Policy in Manifest V3 for Facebook Page Plugin

和这个文档: https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

但我无法理解如何从 background.js 页面实现我的脚本,因为每次用户在输入字段中键入内容时,它都需要动态获取 API。

这是反应代码:我在哪里获取 api

 useEffect(() => {
    const fetchSuggestedWords = async () => {
      try {
        const res = await fetchJsonp(`${process.env.SUGGESTED_WORDS_URL}${searchValue}`)
        const suggestedWordsArray = await res.json()
        setSuggestedWords(suggestedWordsArray[1].slice(0, 10))
        return
      } catch {
        console.log('error fetching suggested results')
      }
    }

    if (searchSuggestedWords) {
      fetchSuggestedWords()
    }
  }, [searchValue])

其中 searchValue 是在输入字段上触发 onChange 事件时的状态更新。

关于如何处理这种新格式的任何提示?人们会建议暂时不要切换到 Manifest v3 吗?

stack overflow Manifest v3 fetch data from external API
原文答案

答案:

作者头像

From what I gathered, you're trying to talk to an api and not load an external script.

If you're trying to load external, that will not work.

Fetching data on the other hand has multitudes of ways it can be done, not all are proper though.

Also I've noticed that you're misunderstanding the core keys of the async messaging system and service worker cycle.

Add a service worker *Background.js or svc-worker.js and give it a on message listener, try to at least handle messaging between your extension, if you're not sure, you can always get an example on github.

After that, it's a matter of setting the CSP and optimizing where you'll be fetching the data.

After a little while, I'm sure you'll get the hang of it.

the code in content should be like

content.js

inputElement.oninput = (e) => {let input = e.target.value; 
chrome.runtime.sendMessage({Origin: 'Content', Message: input})};

Handle the message in svc worker

svc-worker.js formatted

chrome.runtime.onMessage(request => {
const {Origin, Message} = request
// parse message
// fetch chain here
})

Please note, this is not the only way to handle this.

There's a billion different ways, if you want to add some of this data in a use Effect hook as a dependency, that's going to be tricky, as the data given obtained is always counted as different when obtained via message. < At least in my case scenario.