浏览器扩展--用React为它加分的详细指南现在，我们的浏览器扩展已经启动，并与Tailwind CSS和Parcel一

现在，我们的浏览器扩展已经启动，并与Tailwind CSS和Parcel一起运行，让我们看看如何让它变得更加互动。

你可以选择任何你熟悉的框架，我决定用React来做这件事。

我们的想法是加入React，以拥有一个互动的新标签浏览器扩展：

注意：如果你想跟着做，请使用以下GitHub分支。

安装依赖项

首先，我们必须让我们的项目知道我们计划使用React，所以让我们安装所需的依赖项：

npm i react react-dom

然后你可以继续创建一个src 文件夹。它将成为我们React应用程序的中心位置。

设置React

现在我们已经安装了所有东西，这两个是我们唯一需要的🤯。

我们可以继续渲染React应用程序。
打开你的new-tab.html 页面。到目前为止，这是我们应用程序的源代码，但让我们去掉HTML，把这个放在里面：

<body>
  <div id="app"></div>
  <script type="module" src="index.js"></script>
</body>

这将成为我们的注入点，因为我们可以在这里注入React。我们还添加了一个脚本，它将处理React的注入。

继续并创建这个index.js 文件：

import ReactDOM from 'react-dom';
import { App } from './src/App';

const app = document.getElementById('app');
ReactDOM.render(<App />, app);

现在我们可以继续创建这个App 组件。在你的src 目录中添加App.js 文件，并将以下内容放在里面：

export function App() {
  return (
    <div className='flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white'>
      <p>Welcome 👋</p>
    </div>
  );
}

这将渲染我们一开始就有的内容,让我们通过创建一个Counter.js 组件使其更具交互性:

import { useState } from 'react';

export default function Counter() {
  const [counter, setCounter] = useState(0);
  const increase = () => setCounter((count) => count + 1);
  const decrease = () => setCounter((count) => count - 1);
  return (
    <div>
      <button onClick={decrease}>-</button>
      <span className='px-4'>{counter}</span>
      <button onClick={increase}>+</button>
    </div>
  );
}

现在回到App.js 组件并导入计数器:

import Counter from './Counter';

export function App() {
  return (
    <div className='flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white'>
      <p>Welcome 👋</p>
      <br />
      <Counter />
    </div>
  );
}

现在，如果你运行你的watch或build命令，你应该能够使用你新的React驱动的浏览器扩展:

npm run build

注意：确保在加载扩展时使用dist 文件夹