Chrome扩展Manifest V3下content script调用chrome.storage.sync报错如何解决

数据老陈

2026-10-2

报错原因排查

以下是该问题的高频触发原因：

扩展重新加载后未重启测试页面：你在扩展管理页点击重新加载扩展后，已打开的网页中注入的旧版content script会丢失chrome API访问权限，仅刷新页面不会更新注入的content script，属于Chrome扩展开发的常见问题。
chrome变量被意外覆盖：content script中如果定义了同名的chrome变量、或者引入的第三方脚本覆盖了全局chrome对象，会导致storage属性丢失。
浏览器更新后权限重置：Chrome版本更新后可能会重置扩展的权限配置，导致存储权限被关闭。
content script注入时机过早：如果配置了run_at: document_start，会出现chrome API还未完全挂载就执行代码的情况。

解决方案

按优先级执行以下操作：

基础修复：打开扩展管理页（chrome://extensions/）点击对应扩展的「重新加载」按钮，彻底关闭测试页面后重新打开，80%的场景可直接解决问题。
权限检查：打开扩展详情页，确认「存储」、「访问所有网站数据」权限都处于开启状态。
代码容错改造：在代码中增加存在性判断，同时补充存储值为空的容错逻辑，可选增加消息通信降级方案：

// contentScript.js 改造后代码
document.addEventListener("paste", (event) => {
  let paste = event.clipboardData.getData('text');
  var lookalike = isLikeWallet(paste)
  if (lookalike) {
    if (chrome?.storage?.sync) {
      chrome.storage.sync.get("wallets", (items) => {
        var wallets = items.wallets || [];
        if(!wallets.includes(paste)) {
          alert('alert')
        }
      });
    } else {
      // 降级方案：通过消息传递让background操作存储
      chrome.runtime.sendMessage({
        type: 'checkWallet',
        data: paste
      }, (res) => {
        if (res.needAlert) alert('alert')
      })
    }
  }
});

如果使用降级方案，需要在background.js中补充监听逻辑：

// background.js 新增代码
chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
  if (req.type === 'checkWallet') {
    chrome.storage.sync.get("wallets", (items) => {
      const wallets = items.wallets || [];
      sendResponse({needAlert: !wallets.includes(req.data)})
    })
    return true; // 必须声明，支持异步返回响应
  }
})

排查变量覆盖：检查content script全量代码，确认没有自定义chrome全局变量的逻辑。

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