javascript - Fetch API 在 Chrome 扩展弹出窗口中陷入无限循环

Question

我正在构建一个 chrome 扩展，它采用网站搜索栏的值并在我的数据库中获取类似的产品。我在 react 中构建扩展，在我的 App.js 文件中，我有一个 getResults() 函数：

import React, { useState } from "react";
import Results from "../../components/Results";

function ResultsPage() {
  const [results, setResults] = useState([]);
  const [resultsCount, setResultsCount] = useState("");

  const displayResults = (data) => {
    for (let i = 0; i < data.length; i++) {
      const newResult = {
        product_url: data[i].product_url,
        product_name: data[i].product_name,
      };

      setResults((res) => [...res, newResult]); 
    }
  };

  const getSearchBarValue = () => {
    const searchBarSelector =
      document.querySelector("#searchBarId")

    const searchBarValue = searchBarSelector.value.toLowerCase();
    return searchBarValue;
  };

  const getResults = () => {
    chrome.tabs.query(
      { active: true, lastFocusedWindow: true },
      function (tabs) {
        let tab = tabs[0];
        chrome.scripting.executeScript(
          {
            target: { tabId: tab.id },
            function: getSearchBarValue,
          },
          (injectionResults) => {
            const search = injectionResults[0].result;
            console.log(search);

            if (search == null || search.trim() === "") {
              setResultsCount("No input detected");
            } else {
              fetch(
                `https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.com`, 
                {}
              )
                .then((res) => {
                  console.log(`API connected successfully!`);
                  const data = res.json();
                  return data;
                })
                .then((data) => {
                  const numResults = data.length;

                  setResultsCount(
                    `We found ${numResults} results`
                  );

                  displayResults(data);
                });
            }
          }
        );
      }
    );
  };

  getResults();

  return (
    <>
      <Results
        results={results}
        resultsCount={resultsCount}
      />
    </>
  );
}

export default ResultsPage;

我想在 chrome 扩展弹出窗口打开后调用此函数一次。我尝试只在 App.js 中调用该函数，但在打开弹出窗口后它似乎陷入了获取请求的无限循环。我尝试使用后台脚本与内容脚本通信并调用该函数，但问题是，如果您在清单文件中启用了 default_popup（如中所述），则无法使用 chrome.action.onClicked() 事件chrome.action 的 Google 文档），所以我无法向内容脚本发送消息。

任何人都可以看到我要去哪里错并指出我正确的方向吗？

显现：

"background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["/static/js/main.chunk.js", "/static/js/runtime-main.js"]
    }
  ],
  "action": {
    "default_popup": "index.html",
    "default_icon": "/images/icon.png"

提前致谢！

标签： javascriptreactjsgoogle-chrome-extensionfetch-api