Cannot use the chrome.action API inside React components

[Hristiyan Maverov]

Hi everyone, I am trying to use the chrome.action API to set the badge text of my Chrome extension but I am getting this error:

Cannot read properties of undefined (reading 'setBadgeText')

For some reason, the API is not accessible from React. This is my code:

import { useState, useEffect } from 'react';

import viteLogo from '/vite.svg';

import './App.css';

function App() {

  const [count, setCount] = useState(0);

  useEffect(() => {

    // Use the chrome.action API here, e.g., to set badge text

    chrome.action.setBadgeText({ text: '0' });

  }, []);

  return (

    <>

//...

    </>

  );

}

export default App;