Как создавать расширение Chrome с помощью React + Parcel

1656651971 kak sozdavat rasshirenie chrome s pomoshhyu react parcel

Атакан Гектепе

1*GIwcjdd76nYEvw-0nnJHvQ
Спасибо Умуту за изображение героя

В этом месяце я начал создавать новый продукт. Это помогает конвертировать любой веб-сайт в формат JSON, XML, CSV или любой другой. Я написал собственное расширение Chrome для указания поля на веб-сайтах.

В большинстве статей показано, как вы можете отобразить это во всплывающем окне. В этой статье мы воспроизводим нашу программу непосредственно в содержимом (с помощью сценариев содержимого). Я покажу вам, как начать писать расширение Chrome с помощью ReactJS и Parcel с нуля. Я предполагаю, что у вас есть базовые знания JavaScript.

Примечание: Если вы не хотите читать статью, а просто хотите начать кодировать, вы можете найти репо Git в конце.

Сценарий

Нам нужно отобразить наше приложение на посещенном веб-сайте, когда пользователь нажимает кнопку воспроизведения элемента во всплывающем окне.

Итак, начнём.

Как будет выглядеть наш проект

1*QnRGBL1cXupOHMcs9j-8jA
Готовый вариант проекта
├── 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: Создание файлов проекта

Во-первых, создайте manifest.jsonпоскольку этот файл нам необходим для предоставления информации о нашем расширении Chrome.

Каждое расширение имеет a JSON-отформатированный файл манифеста с названием manifest.jsonкоторый предоставляет важную информацию, например, название, версию и разрешения.

А вот как это выглядит:

{
  "manifest_version": 2,

  "name": "Name of your chrome extension",
  "description": "Description of your chrome extension.",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "src/popup.html"
  },

  "permissions": [
    "activeTab",
    "tabs"
  ],

  "content_scripts": [
    {
      "matches": [" "
      "js": ["src/build/main.js"]
    }
  ]
}
manifest.json

После создания файла манифеста нам нужно настроить среду и структуру проекта.

Давайте начнем создавать структуру проекта — откройте свой терминал и выполните мои шаги!

Шаг 2: Создание package.json

Как видите, сценариев два build и watch

  • watch команда следит за вашим main.js и компилируется, если были изменения или если зависимости импортированы из main.js.
  • build команда встраивает ваши файлы в src/build/main.js файл.
{
  "name": "extension-name",
  "version": "0.1.0",
  "description": "Description",
  "main": "src/js/main.js",
  "scripts": {
    "build": "parcel build src/js/main.js -d src/build/ -o main.js",
    "watch": "parcel watch src/js/main.js -d src/build/ -o main.js"
  },
  "author": "Atakan Goktepe",
  "dependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.6.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}
package.json

Шаг 3: Создание файлов и папок

mkdir src
  • Создайте папку компонентов в src папку
mkdir src/js/components
  • Создать main.js ,popup.js и popup.html файлы
touch src/js/main.js src/js/popup.js src/popup.html
1*Fw0Q_Psa48utH2QyuMyTvA
Структура проекта
1*to2qoGcoYAra7-NP7cG-Tw
Выскочить

Всплывающее окно появляется в верхней части панели Chrome при нажатии значка расширения.

Приложение React будет отображаться в содержимом, когда a startApp сообщение поступает из всплывающего окна. Во всплывающем окне отображается a startApp сообщения с программой.

Отредактируйте свой popup.html файл с таким HTML:

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style type="text/css">
      body {
        margin: 10px;
        white-space: nowrap;
      }

      #container {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }

      .start {
        border: 1px solid #000;
        border-radius: 15px;
        padding: 5px 15px;
        cursor: pointer;
      }
    </style>

    <script src="
  </head>

  <body>
    <div id="container">
     <!--
      Render react app in the visited website when the .start button is clicked.
     -->
      <button class="start">
        Render App
      </button>
    </div>
  </body>
</html>
popup.html

Во всплывающем окне есть кнопка, которая посылает сообщения на наш main.js файл, когда пользователь щелкает.

И отредактируйте свой popup.js файл с таким:

window.onload = () => {
  const $startButton = document.querySelector('.start');

  $startButton.onclick = () => {
    // Get active tab
    chrome.tabs.query({
      active: true,
      currentWindow: true,
    }, (tabs) => {
      // Send message to script file
      chrome.tabs.sendMessage(
        tabs[0].id,
        { injectApp: true },
        response => window.close()
      );
    });
  };
}
popup.js

chrome.tabs.sendMessage метод делится сообщением со слушателем. Наш слушатель работает в main.js.

Шаг 5: Воспроизведение React App

В этот момент main.js должны слушать сообщения, поступающие от popup.js.

Мы можем прослушивать сообщения с помощью chrome.runtime.onMessage.addListener метод. А вот как наши main.js файл выглядит:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <div> Your App injected to DOM correctly! </div>
    )
  }
}

// Message Listener function
chrome.runtime.onMessage.addListener((request, sender, response) => {
  // If message is injectApp
  if(request.injectApp) {
    // Inject our app to DOM and send response
    injectApp();
    response({
      startedExtension: true,
    });
  }
});

function injectApp() {
  const newDiv = document.createElement("div");
  newDiv.setAttribute("id", "chromeExtensionReactApp");
  document.body.appendChild(newDiv);
  ReactDOM.render(<App />, newDiv);
}
main.js

Давайте посмотрим, что мы сделали main.js:

  1. Импортированы библиотеки React и ReactDOM.
  2. Создан класс App для воспроизведения элемента React.
  3. Добавлена ​​функция прослушивания событий для прослушивания сообщений, поступающих из popup.js
  4. Создано injectApp функция, создавшая div и вставившая его в тело. Мы отдали свое <App /> компонент внутри него.

Тестирование

Чтобы проверить ваше расширение:

  • Если вы не создавали свои файлы, создайте их, запустив npm run build команда
  • Перейдите к «chrome://extensions»
  • Проверьте переключатель «Режим разработчика».
  • Нажмите кнопку «Загрузить распакованное» и выберите папку проекта.
1*FbvvIlSBVLPVpJo5GkwrSQ

И ой! Вы создали расширение для Google Chrome. Ты удивительный!

1*C-HOj6XRiQ7eolnH8YjTGA
Ваше расширение воспроизведено!

Откройте инструменты разработчика и посмотрите на конец тела – ваш элемент воспроизведен успешно!

Исходный код

Вот окончательное репо:

atakangktepe/react-parcel-extension-boilerplate
react-parcel-extension-boilerplate – шаблон расширения Chrome, созданный с помощью ReactJS и Parcel (отображает содержимое…github.com

Готово!

Спасибо, что прочитали это руководство. Это была моя первая статья на английском! Если это было полезно, порекомендуйте это, нажав кнопку хлопка? или (еще лучше) поделитесь им. ??

Следите за мной в Twitter и Github!

Добавить комментарий

Ваш адрес email не будет опубликован.