使用React开发Firefox扩展如何避免点击图标时重复运行代码？

popup 页面的默认运行逻辑就是每次打开时重新初始化、关闭时直接销毁整个页面上下文，你遇到的每次点击扩展图标重跑全部代码的情况是正常现象，不属于开发思路错误。 #

方案1：通过扩展存储实现数据缓存（推荐，轻量化满足需求） #

你不需要维持popup页面的持续运行，只需要保证数据的更新频率符合要求即可，通过浏览器扩展专属存储就能实现：

• 和普通网页的localStorage不同，browser.storage.local/browser.storage.sync（Chrome扩展对应为chrome.storage.local/chrome.storage.sync）不绑定域名，属于扩展全局可用的持久化存储，适合跨页面存数据
• 实现逻辑：
  • 每次打开popup时，先从存储中读取缓存的接口数据和last_update_time（上次数据更新时间戳）
  • 计算当前时间和last_update_time的差值，不足1小时则直接用缓存数据渲染页面
  • 差值达到1小时则发起新的API请求，拿到新数据后把新数据和当前时间戳一起写入存储，再渲染页面

方案2：通过后台脚本实现全局定时更新 #

如果有更复杂的后台运行需求，可以在扩展中引入background后台脚本：

• background是扩展的全局运行上下文，只要浏览器不关闭、扩展不被禁用，就会持续运行，定时器、状态都可以放在这里维持
• 你可以把每小时拉取一次API的定时器放在background脚本中，每次拿到新数据就写入扩展存储，popup打开时直接读取存储中的最新数据即可，不需要关心数据更新逻辑
• manifest v2 配置示例，在你的现有manifest.json中加入以下字段：

"background": {
  "scripts": ["background.js"],
  "persistent": true
}

React开发环境browser变量未定义 #

• Firefox扩展开发时，只需要在用到browser变量的JS/JSX文件头部添加/* global browser */注释即可，该注释会告知eslint将browser识别为全局变量，执行yarn build构建时不会抛出异常
• Chrome扩展开发时，把所有browser替换为chrome即可
• 构建完成后的扩展产物运行时，浏览器会自动注入browser/chrome全局变量，不会出现未定义报错
• 若需要本地开发执行yarn start正常运行，可以添加环境变量判断，开发环境用localStorage模拟扩展存储的读写逻辑，生产构建时自动切换为扩展存储API，即可避免本地运行报错

内容的提问来源于stack exchange，提问作者Yuniac