React组件调用chrome.action API报错：无法读取setBadgeText属性

错误原因 #

1. 开发环境限制：在Vite等本地开发服务中，全局chrome对象不存在，只有当扩展被正确加载到Chrome浏览器的扩展环境中时，该对象才会可用。
2. 上下文隔离：Manifest V3中，Popup页面属于独立的页面上下文，虽然允许访问chrome.action，但需确保代码仅在扩展运行环境中执行。

解决方案1：添加环境判断避免开发报错 #

在调用API前先检查chrome对象是否存在，既保证开发时不报错，也不影响扩展正常运行：

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  useEffect(() => {
    // 仅在扩展上下文执行API调用
    if (typeof chrome !== 'undefined' && chrome.action) {
      chrome.action.setBadgeText({ text: '0' });
    }
  }, []);

  return (
    <>
      <h1>Vite + React</h1>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

解决方案2：通过Background Service Worker管理徽章（Manifest V3推荐方案） #

Manifest V3更建议在后台服务工作线程中管理扩展UI状态，可直接在background.js中初始化徽章：

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({ text: '0' });
});

如果需要从Popup页面动态更新徽章，可通过消息通信实现：

// Popup中的React组件
useEffect(() => {
  if (typeof chrome !== 'undefined') {
    chrome.runtime.sendMessage({ type: 'UPDATE_BADGE', text: '0' });
  }
}, []);

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'UPDATE_BADGE') {
    chrome.action.setBadgeText({ text: message.text });
  }
});

额外注意事项 #

• 必须将扩展加载到Chrome中测试：开启Chrome扩展管理页的开发者模式，加载打包后的扩展文件夹（如Vite构建的dist目录），不要直接在Vite预览页面测试扩展API。
• 若使用TypeScript，需安装Chrome扩展类型声明：npm install @types/chrome --save-dev，避免类型报错。

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