parcel react_如何使用React + Parcel构建Chrome扩展

parcel react

by Atakan Goktepe

通过Atakan Goktepe

如何使用React + Parcel构建Chrome扩展 (How to build Chrome extensions with React + Parcel)

This month, I started to build my new product. It helps convert any website to JSON, XML, CSV, or any other format. I wrote my own Chrome extension for pointing to the fields in websites.

这个月，我开始制造我的新产品。 它有助于将任何网站转换为JSON，XML，CSV或任何其他格式。 我写了自己的Chrome扩展程序来指向网站中的字段。

Most articles show how you can render it in a popup. In this article, we will render our app directly in the content (with Content Scripts). I will show you to how to start writing a chrome extension using ReactJS and Parcel from scratch. I will assume you have basic knowledge of JavaScript.

大多数文章都展示了如何在弹出窗口中呈现它。 在本文中，我们将直接在内容中呈现我们的应用程序(使用Content Scripts )。 我将向您展示如何从头开始使用ReactJS和Parcel编写chrome扩展。 我将假定您具有JavaScript的基本知识。

Note: If you don’t want to read this article and just want to start coding, you can find the Git repo at the end.

注意：如果您不想阅读本文，而只是想开始编码，则可以在末尾找到Git存储库。

场景 (The Scenario)

We need to render our app on the visited website when a user clicks the render element button in the popup.

当用户单击弹出窗口中的渲染元素按钮时，我们需要在访问的网站上渲染我们的应用程序。

So, let’s get started.

因此，让我们开始吧。

我们的项目外观 (How our project will look)

├── icon.png├── manifest.json├── node_modules├── .babelrc├── package.json└── src    ├── build     │   └── main.js [We will use that build file as content script]    ├── js [Where our development file is stored]    │   ├── components [We are storing components in this folder]    │   │   └── Header.js    │   ├── main.js [Our main file, that renders our app]    │   └── popup.js [Our javascript file for popup]    └── popup.html [Our html file for rendering popup after clicking the icon in the bar]

步骤1：创建项目文件 (Step 1: Creating Project Files)

Firstly, create manifest.json, as we need that file for providing information about our Chrome extension.

首先，创建manifest.json ，因为我们需要该文件来提供有关我们的Chrome扩展程序的信息。

Every extension has a JSON-formatted manifest file, named manifest.json, that provides important information like name, version, and permissions.

每个扩展都有一个JSON格式的清单文件，名为manifest.json ，提供重要信息，例如名称，版本和权限。

And here is how it looks:

这是它的外观：

After creating the manifest file, we need to configure our project environment and structure.

创建清单文件后，我们需要配置项目环境和结构。

Let’s start creating out project structure — so open your terminal and follow my steps!

让我们开始创建项目结构-打开终端并按照我的步骤进行！

步骤2：建立package.json (Step 2: Creating package.json)

As you can see, there are two scripts build and watch

如您所见，有两个脚本可以build和watch

• watch command watches your main.js and compiles if there was a change or if dependencies are imported from main.js.

  watch命令watch您的main.js并进行编译，如果有更改或是否从main.js导入了依赖main.js 。

• build command builds your files into the src/build/main.js file.

  build命令将您的文件构建到src/build/main.js文件中。

步骤3：建立档案和资料夹 (Step 3: Creating files and folders)

• Create a source folder
  创建一个源文件夹

mkdir src

• Create a components folder in src folder

  在src文件夹中创建一个components文件夹

mkdir src/js/components

• Create main.js ,popup.js and popup.html files

  创建main.js ， popup.js和popup.html文件

touch src/js/main.js src/js/popup.js src/popup.html

步骤4：编写弹出窗口 (Step 4: Writing the Popup)

The popup appears at the top of the bar in Chrome when a user clicks the icon of the extension.

当用户单击扩展程序的图标时，弹出窗口将显示在Chrome栏中的顶部。

The React App will be rendered in the content when a startApp message comes from the popup. The popup will share a startApp message with the app.

当从弹出窗口发出startApp消息时，React App将在内容中呈现。 弹出窗口将与该应用共享一个startApp消息。

Edit your popup.html file with the following HTML:

使用以下HTML编辑您的popup.html文件：

There is a button in the popup which sends a message to our main.js file when a user is clicked.

弹出窗口中有一个按钮，当单击用户时，该按钮会将消息发送到我们的main.js文件。

And edit your popup.js file with the following:

并使用以下代码编辑popup.js文件：

chrome.tabs.sendMessage method shares the message with a listener. Our listener is working in the main.js.

chrome.tabs.sendMessage方法与侦听器共享消息。 我们的侦听器正在main.js工作。

步骤5：渲染React App (Step 5: Rendering React App)

At this point, main.js should listen to messages which are coming from popup.js.

此时， main.js应该侦听来自popup.js消息。

We can listen to messages with the chrome.runtime.onMessage.addListener method. And here is how our main.js file looks:

我们可以使用chrome.runtime.onMessage.addListener方法收听消息。 这是我们的main.js文件的外观：

让我们看看在main.js我们做了main.js ： (Let’s look at what have we done in main.js:)

1. Imported React and ReactDOM libraries.
   导入的React和ReactDOM库。
2. Created an App class for rendering a React element.
   创建了一个用于渲染React元素的App类。

3. Added an event listener function for listening for messages which are coming from popup.js

   添加了事件侦听器功能，用于侦听来自popup.js消息

4. Created an injectApp function that created a div, and injected it into a body. We rendered our <App /> component inside it.

   创建了一个injectApp函数，该函数创建了一个div，并将其注入到主体中。 我们在其中渲染了<App />组件。

测试它 (Testing it)

For testing your extension:

为了测试您的扩展程序：

• If you didn’t build your files, build them by running the npm run build command

  如果您没有构建文件，请通过运行npm run build命令来构建它们

• Go to “chrome://extensions”
  转到“ chrome：// extensions”
• Check the “Developer Mode” switcher
  检查“开发人员模式”切换器
• Click the “Load Unpacked” button, then select your project folder.
  单击“加载解压缩”按钮，然后选择您的项目文件夹。

And Whoa! You have created an extension for Google Chrome. You are awesome!

哇！ 您已经为Google Chrome创建了扩展程序。 你真棒！

Open your developer tools and look at the end of the body — your element rendered successfully!

打开您的开发人员工具，查看正文的末尾-您的元素成功渲染！

源代码 (Source Code)

Here’s the final repo:

这是最终的仓库：

atakangktepe/react-parcel-extension-boilerplatereact-parcel-extension-boilerplate - A Chrome extension boilerplate built with ReactJS and Parcel (renders in content…github.com

atakangktepe / react-parcel-extension-boilerplate react-parcel-extension-boilerplate-使用ReactJS和Parcel构建的Chrome扩展样板(内容提供… github.com

做完了！ (Done!)

Thanks for reading through this tutorial. It was my first article in English! If it has been helpful, please recommend it by hitting the clap button ? or (even better) share it. ??

感谢您阅读本教程。 这是我的第一篇英文文章！ 如果有帮助，请点击拍手按钮？ 或(甚至更好)分享。 ??

Follow me on Twitter and Github!

在Twitter和Github上关注我！

翻译自: https://www.freecodecamp.org/news/building-chrome-extensions-in-react-parcel-79d0240dd58f/

parcel react