Cómo inyectar una aplicación React en una extensión de Chrome como secuencia de comandos de contenido

Una extensión de Chrome con una aplicación React inyectada como script de contenido

Las extensiones de Chrome son excelentes herramientas que le permiten interactuar con el navegador y los sitios web de varias maneras.

  • Navegador y acciones de página que aparecen como iconos en la barra de herramientas del navegador y pueden mostrar una ventana emergente opcional.
  • Nuevas páginas de pestaña que anulan la nueva pestaña predeterminada
  • Páginas de opciones para configurar extensiones de Chrome
  • Menús contextuales de Chrome que aparecen con un clic derecho
  • Notificaciones, que se deslizan en la esquina superior derecha de la pantalla
  • Scripts de contenido, que inyectan JavaScript en una página web y pueden alterar su interfaz de usuario

Este artículo trata sobre cargar una aplicación React en un script de contenido. Instale create-react-app primero si no lo tiene. Aquí está el repositorio si solo quiere ver el código.

Crea una nueva aplicación React

  • crear-reaccionar-aplicación reaccionar-contenido-script

Actualiza el archivo de manifiesto

  • Encuéntralo en /public/manifest.json

El archivo manifest.json es necesario para proporcionar información importante para la extensión de Chrome. Se requiere manifest_version, nombre y versión para que la extensión de Chrome sea válida. La matriz content_scripts es lo que inyectaremos nuestra aplicación React en https://www.google.com/.

Puede inyectar un script de contenido en una página específica como lo estamos haciendo aquí o puede usar la clave de coincidencia para especificar las URL en las que desea que se cargue su código. Por ejemplo, [""] carga el script de contenido que coincide con cualquier esquema de URL válido

Actualice el componente de la aplicación

Eliminar el logotipo de importación de './logo.svg'; y reemplace el src para la etiqueta de imagen con "https://facebook.github.io/react/img/logo.svg".

Actualice App.css para que sea más presentable.

Añadir la aplicación al DOM

Aquí es donde realmente inyectamos el script de contenido en el DOM en https://www.google.com. Primero examine el DOM del sitio web (o sitios web) en el que desea inyectar un script de contenido. Luego, seleccione un elemento en función de dónde desea agregar su código al DOM.

Elegí la

, pero es posible que tengas que experimentar para encontrar lo que funciona mejor para ti. Es posible que ni siquiera necesite inyectar ningún HTML.

Seleccionar dónde inyectar el script de contenido

Desplegar

  • Luego, compile la aplicación para producción ejecutando el comando yarn run build form /package.json.
  • Abra la pestaña Extensiones debajo de más herramientas en el menú Personalizar y controlar Google Chrome (con los tres puntos verticales en el extremo derecho de la barra de herramientas del navegador) o navegue a chrome: // extensiones.
  • Marque la casilla de verificación Modo desarrollador.
  • Haga clic en Cargar extensión desempaquetada ... luego busque y seleccione la carpeta de compilación en react-content-script / src / para cargar la extensión.
error de carga de script de contenido

La extensión no se pudo cargar porque los nombres de archivo "css" y "js" que especificamos en el manifiesto son diferentes a los generados por Webpack.

Webpack genera nombres de archivos CSS y JS

Modificar los nombres de archivo de salida de compilación

Puede cambiar el nombre de main.css y main.js cada vez que haya cambios en su compilación, por ejemplo main.cacbacc7.css y main.f0a6875b.js en este caso, pero una mejor solución es modificar los nombres de los archivos de salida de la configuración de producción de Webpack para que no tenga que actualizarlos manualmente cuando desee cargar su extensión. Para acceder a /config/webpack.config/prod, debe expulsarlo de la aplicación Create React.

  • Expulse de la aplicación Create React con hilo ejecute eject y escriba y para confirmar.
  • Elimine los hashes generados de los nombres de archivo de salida CSS y JavaScript. Compare ORIGINAL con ACTUALIZADO en /config/webpack.config/prod.
// ... (Otra configuración)
// Nota: definido aquí porque se usará más de una vez.
// ORIGINAL // const cssFilename = 'static / css / [name]. [Contenthash: 8] .css';
// ACTUALIZADO
const cssFilename = 'static / css / [name] .css';
// ... (Otra configuración)
salida: {
    // La carpeta de compilación.
    ruta: rutas.appBuild,
    // Nombres de archivos JS generados (con carpetas anidadas).
    // Habrá un paquete principal y un archivo por fragmento asincrónico.
    // Actualmente no anunciamos la división de código, pero Webpack lo admite.
    // ORIGINAL // nombre del archivo: 'static / js / [name]. [Chunkhash: 8] .js',
    // ACTUALIZADO
    nombre de archivo: 'static / js / [name] .js',
// ... (Otra configuración)

Reconstruya, vuelva a cargar y verifique que los nombres de archivo sean correctos antes de cargar la compilación en Chrome.

Reacciona la aplicación inyectada en el script de contenido de Chrome Extension

Eso es. Gracias por leer y avíseme si tiene alguna pregunta.