React JS. Crear una extensión para Chrome

Aprende a crear una extensión para Google Chrome en apenas 10 minutos a partir de un proyecto de React JS

1. Configurando el archivo manifest.json

"browser_action": {  "default_popup": "index.html",  "default_title": "Coronavirus"},
"manifest_version": 2,
"permissions": [  "storage"],
"icons": [{  "src": "favicon.ico",  "sizes": "64x64 32x32 24x24 16x16",  "type": "image/x-icon"},{  "src": "logo192.png",  "type": "image/png",  "sizes": "192x192"},{  "src": "logo512.png",  "type": "image/png",  "sizes": "512x512"}],
"icons": {  "16": "icon16.png",  "24": "icon24.png",  "32": "icon32.png",  "128": "icon128.png"}
Image for post
Image for post

2. Generando el build de nuestra aplicación

3. Instalando la extensión en chrome

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

4. Habilitando la ejecución de scripts externos

{
...,
"content_security_policy": "script-src 'self' 'sha256-XXX'; object-src 'self'"

5. Configurar nuestra extensión para que actúe sobre elementos de las páginas web

Eject de nuestra aplicación

yarn run eject

Modificando la configuración de webpack

Modificando el archivo manifest

Image for post
Image for post
Image for post
Image for post

Toque final

Image for post
Image for post

Conclusión

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store