Как создать расширения Chrome с React + Parcel

Atakan Goktepe

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

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

Сценарий

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

Итак, давайте начнем.

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

├── 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: Создание файлов проекта

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

Каждое расширение имеет JSON -форматированный файл манифеста, названный Mainesest.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": ["http://*/*", "https://*/*"],
      "js": ["src/build/main.js"]
    }
  ]
}

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

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

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

Как видите, есть два сценария построить и смотреть

Смотреть Команда наблюдает за вашим main.js и компилирует, если произошло изменение или если зависимости импортируются из main.js Отказ
построить Команда создает ваши файлы в 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"
  }
}

Шаг 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

Шаг 4: Написание всплывающего окна

Всплывание появляется в верхней части панели в Chrome, когда пользователь нажимает значок расширения.

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

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





  
    Getting Started Extension's Popup

В всплывающем окне есть кнопка, которая отправляет сообщение нашему 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()
      );
    });
  };
}

Chrome.tabs.sendmessage Метод разделяет сообщение со слушателем. Наш слушатель работает в main.js Отказ

Шаг 5: Рендеринг приложения React

На данный момент 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 (
       Your App injected to DOM correctly! 
    )
  }
}

// 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(, newDiv);
}

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

Импортированные библиотеки реагирования и реагирования.
Создан класс App для рендеринга реактуального элемента.
Добавлена функция слушателя событий для прослушивания сообщений, которые идут из Popup.js.
Создал injectApp Функция, которая создала div и вводила его в тело. Мы оказали наши <Приложение /> Компонент внутри него.

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

Для тестирования вашего расширения:

Если вы не создали свои файлы, постройте их, запустив NPM запустить сборку команда
Перейти к “Chrome://расширения”
Проверьте коммутатор «Режим разработчика»
Нажмите кнопку «Загрузить распакованную», затем выберите папку Project.

И WHOA! Вы создали расширение для Google Chrome. Ты обалденный!

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

Исходный код

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

Atakangktepe/React-Parcel-Extension-Boilerplate React – Parcel-Extension-Boilerplate – Chrome Усилительная котельная, построенная с REGEDES и посылкой (рендеры в контент … github.com

Выполнено!

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

Следуй за мной на Twitter и Github Действительно

Оригинал: “https://www.freecodecamp.org/news/building-chrome-extensions-in-react-parcel-79d0240dd58f/”