Chrome 扩展 - 弹出窗口中的存储更改侦听器答案

【问题标题】：Chrome extension - storage change listener in popupChrome 扩展 - 弹出窗口中的存储更改侦听器
【发布时间】：2022-01-11 11:57:03
【问题描述】：

我正在创建 web 应用程序和 react chrome 扩展程序。我希望扩展程序显示当前的网络应用程序身份验证状态（存储在 cookie 中）。下面的代码有效（后台脚本监听cookies的变化并将当前值存储在存储中，弹出脚本每隔1s从存储中提取当前值），但我想知道这种拉取是否是正确的方法。我尝试在弹出脚本中使用chrome.storage.onChanged，但它只触发了一次。

background.js

const domainName = 'localhost' // address of my web app
const cookieName = 'user'

chrome.cookies.onChanged.addListener(({ cookie, removed: isBeingRemoved }) => {
    if (cookie.domain === domainName && cookie.name === cookieName) {
        chrome.storage.sync.set({
            [cookieName]: !isBeingRemoved
                ? cookie.value
                : null,
        })
    }
})

popup.jsx

const [user, setUser] = useState(null)

const pullVariablesFromStorage = () => {
        chrome.storage.sync.get(['user'], function ({ user }) {
            setUser(user)
        })
}

 useEffect(() => {
        pullVariablesFromStorage()

        const intervalId = setInterval(() => {
            pullVariablesFromStorage()
        }, 1000)

        return () => clearInterval(intervalId)
 }, [])

return (
   <div>{user ? `Hi ${user}` : 'sign in using web app'}</div>
)

【问题讨论】：

对 Chrome 扩展了解不多，但我相信问题可能出在 popup.jsx 和 background.js 之间的通信上。所以请查看this question，希望对您有所帮助。
@RemiCrystal 是的，我还没有在 SO 上遇到过这个话题，this answer 发送消息对我有很大帮助，谢谢 :)

标签： javascript reactjs google-chrome-extension

【解决方案1】：

我通过使用消息解决了这个问题（我也忘记了在打开弹出窗口时获取 cookie），结果如下：

const domainName = 'localhost' // address of my web app
const cookieName = 'user'

chrome.cookies.onChanged.addListener(({ cookie, removed: isBeingRemoved }) => {
    if (cookie.domain === domainName && cookie.name === cookieName) {
        chrome.runtime.sendMessage({
            type: 'cookie_change',
            key: cookieName,
            value: !isBeingRemoved ? cookie.value : null,
        })
    }
})

const [user, setUser] = useState(null)

useEffect(() => {
        // get cookies when opening popup
        chrome.cookies.getAll({ domain: 'localhost' }).then((cookies) => {
            cookies.forEach(({ name, value }) => {
                if (name === 'user') {
                    setUser(value)
                }
            })
        })

        // while popup is opened wait for messages
        chrome.runtime.onMessage.addListener((message) => {
            if (message.type === 'cookie_change' && message.key === 'user') {
                setUser(message.value)
            }
        })
}, [])

return <div>{user ? `Hi ${user}` : 'sign in using web app'}</div>

【讨论】：