1. 确认环境：首先，您需要在本地计算机上安装Node.js和npm包管理器。

2. 创建React应用程序：通过使用create-react-app，来创建一个新的React应用程序。运行以下命令：

“`
npx create-react-app my-app
cd my-app
npm start
“`

3. 创建Chrome插件：在项目根目录下创建一个”manifest.json”文件，这是Chrome插件的主文件。

4. 编写React代码：在您的React应用程序中，创建一个新的组件。导出该组件并将其添加到您的Chrome插件中。以下是一个示例组件：

“`
import React from ‘react’;

class MyComponent extends React.Component {
render() {
return

Hello, World!

}
}

export default MyComponent;
“`

5. 安装必要的依赖：您需要安装React和ReactDOM以确保React组件在Chrome插件中实际运行。运行以下命令安装它们：

“`
npm install react react-dom –save
“`

6. 插入React组件：在Chrome插件的HTML文件中，使用以下代码将React组件嵌入到HTML中：

“`

<script src=”./index.bundle.js”></script>
“`

7. 编译React代码：使用 npm run build 命令编译React代码。然后，在Chrome插件的HTML文件中嵌入生成的JS bundle文件。

在Chrome扩展中使用React可能需要一些额外的工作，但这是基本的步骤，它们应该能够帮助您开始创建您的第一个Chrome扩展与React应用程序。

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。