Javascript 获取API卡在Chrome扩展弹出窗口的无限循环中

我正在构建一个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;

import React，{useState}来自“React”；
从“../../components/Results”导入结果；
函数ResultsPage（）{
const[results，setResults]=useState（[]）；
常量[ResultCount，SetResultCount]=useState（“”）；
常量显示结果=（数据）=>{
for（设i=0；i[…res，newResult]）；
}
};
const getSearchBarValue=（）=>{
常量搜索条选择器=
document.querySelector（“searchBarId”）
const searchBarValue=searchBarSelector.value.toLowerCase（）；
返回搜索值；
};
const getResults=（）=>{
chrome.tabs.query(
{active:true，lastFocusedWindow:true}，
功能（选项卡）{
设tab=tabs[0]；
chrome.scripting.executeScript(
{
目标：{tabId:tab.id}，
函数：getSearchBarValue，
},
（注入结果）=>{
const search=injectionResults[0]。结果；
控制台日志（搜索）；
if（search==null | | search.trim（）==“”）{
SetResultCount（“未检测到输入”）；
}否则{
取回(
`https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.com`, 
{}
)
。然后（（res）=>{
log（`API已成功连接！`）；
const data=res.json（）；
返回数据；
})
。然后（（数据）=>{
const numResults=data.length；
SetResultCount(
`我们找到了${numResults}个结果`
);
显示结果（数据）；
});
}
}
);
}
);
};
getResults（）；
返回(
);
}
导出默认结果页面；

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

有谁能看出我哪里出了问题，给我指出正确的方向吗

舱单：

"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"

“背景”：{
“服务工人”：“background.js”
},
“内容脚本”：[
{
“匹配项”：[“”]，
“js”：[“/static/js/main.chunk.js”，“/static/js/runtime main.js”]
}
],
“行动”：{
“默认弹出窗口”：“index.html”，
“默认图标”：“/images/icon.png”

提前谢谢