在多次触发的 chrome 扩展中更新反应挂钩？

Question

我在 chrome 扩展中使用反应钩子，但是当我更新状态时，它被触发了多次，当我只是控制台日志时它没有发生...

// browser.js
chrome.browserAction.onClicked.addListener(tab => {
    chrome.tabs.sendMessage(tab.id, {
        type: "toggle-popup"
    }, null);
});


// content.js
const [popup, setPopup] = useState(false);
    let number = 1
    const togglePopup = () => setPopup(!popup);
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
        if (request.type == "toggle-popup") {
            number++
            togglePopup()
            console.log(number)
            console.log(popup)
        }
})

它给了我这些结果...

//1st click on tab icon
2
false

//2nd click on tab icon
3
false
2
true

//3rd click
4
false
3
true
2
true
2
false

我只是希望它在点击时切换真/假以在页面上显示/隐藏 div（我不想使用 popup.js）。知道我做错了什么吗？

Answer 1

Function 组件的主体是 render 函数，您的代码在每次渲染时添加一个侦听器

// Runs on every render
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { setState(...) });

因此您需要使用 React API 来处理这些情况并消除您也遇到的关闭问题。

为此使用 useEffect 和 useRef 而不是局部变量。

const Content = () => {
  const [popup, setPopup] = useState(false);
  const numberRef = useRef(0);

  useEffect(() => {
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      const togglePopup = () => setPopup((prev) => !prev);
      if (request.type == "toggle-popup") {
        numberRef.current++;
        togglePopup();
      }
    });
  }, []);
};

...

在多次触发的 chrome 扩展中更新反应挂钩？

Updating react hook in a chrome extension firing multiple times?

browser-extension

google-chrome-extension

reactjs

use-state