Как да инжектирате приложение React в разширение на Chrome като скрипт за съдържание
Разширенията за 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 адресите, в които искате да се зареди кодът ви. Например [„
Актуализирайте компонента на приложението
Премахване на логото за импортиране от „./logo.svg“; и заменете src за маркера за изображение с „https://facebook.github.io/react/img/logo.svg“.
Актуализирайте App.css, за да бъде по-представимо.
Добавете приложението към DOM
Тук всъщност вмъкваме скрипта за съдържание в DOM на https://www.google.com. Първо разгледайте DOM на уебсайта (или уебсайтовете), в който искате да поставите скрипт със съдържание. След това изберете елемент въз основа на мястото, където искате да добавите кода си към DOM.
Избрах
Внедряване
- След това изградете приложението за производство, като стартирате командата прежда стартирайте изграждане форма /package.json.
- Отворете раздела Разширения под още инструменти в менюто Персонализирайте и контролирайте Google Chrome (с трите вертикални точки в най-дясната част на лентата с инструменти на браузъра) или отворете chrome: // extensions.
- Поставете отметка в квадратчето Режим на програмист.
- Щракнете върху Load unpacked extension ... след това намерете и изберете папката на сглобяване в reakct-content-script / src /, за да заредите разширението.
Разширението не се зареди, защото имената на файловете „css“ и „js“, които посочихме в манифеста, са различни от тези, генерирани от Webpack.
Променете имената на изходните имена на изграждане
Можете просто да преименувате 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.
Това е. Благодаря за четенето и ме уведомете, ако имате въпроси.