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

Благодаря на Umut за Hero Image

Този месец започнах да изграждам новия си продукт. Той помага да конвертирате всеки уебсайт в JSON, XML, CSV или друг формат. Написах собствено разширение за Chrome за насочване към полетата в уебсайтовете.

Повечето статии показват как можете да го направите в изскачащ прозорец. В тази статия ние ще визуализираме нашето приложение директно в съдържанието (със скриптове за съдържание). Ще ви покажа как да започнете да пишете разширение за хром, като използвате ReactJS и Parcel от нулата. Предполагам, че имате основни познания по JavaScript.

Забележка: Ако не искате да прочетете тази статия и просто искате да започнете да кодирате, можете да намерите Git repo в края.

Сценарият

Трябва да изобразим нашето приложение на посетения уебсайт, когато потребителят кликне върху бутона елемент на изобразяване в изскачащия прозорец.

Така че, нека започнем

Как ще изглежда проектът ни

Готова версия на проект
├── icon.png
├── manifest.json
├── node_модули
├── .babelrc
├── package.json
└── src
    ├── изграждане
    │ └── main.js [Ще използваме този файл за изграждане като скрипт за съдържание]
    ├── js [Къде се съхранява нашия файл за разработка]
    │ ├── компоненти [Съхраняваме компоненти в тази папка]
    │ │ └── Header.js
    │ ├── main.js [Основният ни файл, който прави нашето приложение]
    │ └── popup.js [Нашият JavaScript файл за изскачащ прозорец]
    └── popup.html [Нашият html файл за изобразяване на изскачащ прозорец след щракване върху иконата в лентата]

Стъпка 1: Създаване на проектни файлове

Първо, създайте manifest.json, тъй като имаме нужда от този файл за предоставяне на информация за разширението ни за Chrome.

Всяко разширение има JSON форматиран файл на манифеста, наречен manifest.json, който предоставя важна информация като име, версия и разрешения.

И ето как изглежда:

След създаването на файла на манифеста трябва да конфигурираме нашата проектна среда и структура.

Нека започнем да създаваме структура на проекта - затова отворете терминала си и следвайте моите стъпки!

Стъпка 2: Създаване на package.json

Както можете да видите, има два сценария изграждане и гледане

  • команда watch наблюдава вашия main.js и компилира, ако е имало промяна или ако зависимости са импортирани от main.js.
  • команда build изгражда вашите файлове във файла src / build / main.js.

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

  • Създайте изходна папка
mkdir src
  • Създайте папка с компоненти в папка src
mkdir src / js / компоненти
  • Създайте main.js, popup.js и popup.html файлове
докоснете src / js / main.js src / js / popup.js src / popup.html
Структура на проекта

Стъпка 4: Писане на изскачащото меню

Popup

Изскачащият прозорец се появява в горната част на лентата в Chrome, когато потребител кликне върху иконата на разширението.

Приложението React ще бъде представено в съдържанието, когато от изскачащото меню идва съобщение за startApp. Изскачащото меню ще сподели съобщение за startApp с приложението.

Редактирайте своя popup.html файл със следния HTML:

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

И редактирайте своя popup.js файл със следното:

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

Стъпка 5: Оказване на приложението React

В този момент main.js трябва да слуша съобщения, които идват от popup.js.

Можем да слушаме съобщения с метода chrome.runtime.onMessage.addListener. И ето как изглежда нашия main.js файл:

Нека да разгледаме какво направихме в main.js:

  1. Импортирани библиотеки на React и ReactDOM.
  2. Създадох App клас за изобразяване на React елемент.
  3. Добавена е функция за слушане на събития за слушане на съобщения, които идват от popup.js
  4. Създадохме функция injectApp, която създаде div и го инжектира в тяло. Направихме компонента си вътре в него.

Тествам го

За да тествате разширението си:

  • Ако не сте създали вашите файлове, изградете ги, като изпълните командата npm run build
  • Отидете на „chrome: // extensions“
  • Проверете превключвателя „Режим на програмист“
  • Щракнете върху бутона „Зареждане на разопаковано“, след което изберете папката на вашия проект.

И чакай! Създали сте разширение за Google Chrome. Ти си страхотен!

Разширението ви е предоставено!

Отворете инструментите си за разработчици и погледнете края на тялото - вашият елемент се е представил успешно!

Програмен код

Ето последното репо:

Свършен!

Благодаря, че прочетохте този урок. Това беше първата ми статия на английски! Ако е било полезно, моля, препоръчайте го, като натиснете бутона clap или (още по-добре) го споделете.

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