Как да инжектирате приложение React в разширение на Chrome като скрипт за съдържание

Разширение за Chrome с приложение React, инжектирано като скрипт за съдържание

Разширенията за Chrome са чудесни инструменти, които ви позволяват да взаимодействате с браузъра и уебсайтовете по различни начини.

  • Действия на браузър и страница, които се показват като икони в лентата с инструменти на браузъра и могат да показват незадължителен изскачащ прозорец.
  • Страници с нов раздел, които отменят новия раздел по подразбиране
  • Страници с опции за конфигуриране на разширения на Chrome
  • Контекстни менюта на Chrome, които се появяват с десен клик
  • Известия, които се плъзгат в горния десен ъгъл на екрана
  • Скриптове за съдържание, които инжектират JavaScript в уеб страница и могат да променят потребителския й интерфейс

Тази статия е за зареждане на приложение React в скрипт със съдържание. Инсталирайте първо създайте-реагирайте приложение, ако нямате. Ето го хранилището, ако просто искате да видите кода.

Създайте ново приложение React

  • create-react-app react-content-script

Актуализирайте файла на манифеста

  • Намерете го в /public/manifest.json

Файлът manifest.json е необходим за предоставяне на важна информация за разширението на Chrome. За да бъде валидно разширението на Chrome, са необходими манифестацията_версия, име и версия. Масивът content_scripts е това, което ще инжектираме нашето приложение React в https://www.google.com/.

Можете да вмъкнете скрипт със съдържание в конкретна страница, както правим тук, или можете да използвате ключа за съвпадение, за да определите URL адресите, в които искате да се зареди кодът ви. Например [„"] зарежда съдържанието скрипт съвпада с който и да е валидна url схема.

Актуализирайте компонента на приложението

Премахване на логото за импортиране от „./logo.svg“; и заменете src за маркера за изображение с „https://facebook.github.io/react/img/logo.svg“.

Актуализирайте App.css, за да бъде по-представимо.

Добавете приложението към DOM

Тук всъщност вмъкваме скрипта за съдържание в DOM на https://www.google.com. Първо разгледайте DOM на уебсайта (или уебсайтовете), в който искате да поставите скрипт със съдържание. След това изберете елемент въз основа на мястото, където искате да добавите кода си към DOM.

Избрах

, но може би трябва да експериментирате, за да намерите това, което работи най-добре за вас. Възможно е изобщо да не е необходимо да инжектирате HTML.

Избор къде да инжектирате скрипта със съдържание

Внедряване

  • След това изградете приложението за производство, като стартирате командата прежда стартирайте изграждане форма /package.json.
  • Отворете раздела Разширения под още инструменти в менюто Персонализирайте и контролирайте Google Chrome (с трите вертикални точки в най-дясната част на лентата с инструменти на браузъра) или отворете chrome: // extensions.
  • Поставете отметка в квадратчето Режим на програмист.
  • Щракнете върху Load unpacked extension ... след това намерете и изберете папката на сглобяване в reakct-content-script / src /, за да заредите разширението.
грешка при зареждане на съдържанието скрипт

Разширението не се зареди, защото имената на файловете „css“ и „js“, които посочихме в манифеста, са различни от тези, генерирани от Webpack.

Webpack генерира CSS и JS имена на файлове

Променете имената на изходните имена на изграждане

Можете просто да преименувате main.css и main.js всеки път, когато има промени в изграждането ви, напр. main.cacbacc7.css и main.f0a6875b.js в този случай, но по-доброто решение е да промените изходните имена на файлове за конфигурация на Webpack, така че не е необходимо да актуализирате ръчно, когато искате да заредите разширението си. За да получите достъп /config/webpack.config/prod, трябва да извадите приложението Create React App.

  • Извадете от Create React App с изваждане на прежда и въведете y за потвърждение.
  • Премахнете генерираните хеши от изходните имена на CSS и JavaScript. Сравнете ORIGINAL с UPDATED в /config/webpack.config/prod.
// ... (Друга конфигурация)
// Забележка: дефинирана тук, защото ще се използва повече от веднъж.
// ORIGINAL // const cssFilename = 'static / css / [име]. [Contenthash: 8] .css';
// актуализиран
const cssFilename = 'статичен / css / [име] .css';
// ... (Друга конфигурация)
изход: {
    // Папката за изграждане.
    path: paths.appBuild,
    // Генерирани имена на JS файлове (с вложени папки).
    // Ще има един основен пакет и един файл на асинхронен фрагмент.
    // В момента не рекламираме разделяне на код, но Webpack го поддържа.
    // ORIGINAL // име на файл: 'static / js / [име]. [Chunkhash: 8] .js',
    // актуализиран
    име на файл: 'static / js / [name] .js',
// ... (Друга конфигурация)

Възстановете и презаредете и проверете дали имената на файловете са правилни, преди да заредите компилацията в Chrome.

Реагирайте приложението, инжектирано в скрипта за съдържание на разширение за Chrome

Това е. Благодаря за четенето и ме уведомете, ако имате въпроси.