Cambiar el código fuente del sitio web
Chrome DevTools es un potente conjunto de herramientas de desarrollo web integradas en el navegador Chrome. Una de las características más útiles de DevTools para los desarrolladores web es la capacidad de editar en vivo el HTML y CSS de una página. Esta funcionalidad permite a cualquier desarrollador, incluso a los que tienen menos conocimientos de HTML y CSS, crear rápidamente un prototipo e iterar sobre posibles cambios en una página web.
Hay dos formas rápidas de abrir el inspector. La primera es abrir DevTools con F12, seleccionar la pestaña “Elementos” y hacer clic en el icono del cursor en la parte superior izquierda. La segunda forma, más rápida, es utilizar el atajo de teclado Ctrl+Mayús+C. Si trabajas habitualmente en un entorno Linux, es muy probable que hayas utilizado este atajo por accidente muchas veces cuando querías copiar un texto.
Una vez seleccionado un elemento, puedes interactuar con él de muchas maneras. Si haces clic con el botón derecho del ratón sobre el HTML en la pestaña “Elementos” y seleccionas “Editar como HTML”, podrás realizar ediciones en vivo en el marcado de una página web que Chrome renderizará inmediatamente una vez que hayas terminado de editar.
Document body contenteditable true’; document designmode on’; void 0
La primera versión del archivo manifest.json, donde los tres atributos requeridos.Estos atributos nos dicen:¡Y hemos terminado! ¡Todo el código necesario ha sido escrito! En nuestro caso, nuestra extensión es bastante inútil por ahora, ¡pero podemos seguir adelante y añadirla a Chrome! Cargue su extensión en su navegadorAhora vaya a chrome://extensions y haga clic en el botón “Load unpacked” para seleccionar el directorio de su extensión personalizada. Para ver los tres botones, el “Modo de desarrollador” de la derecha debe estar activado.Captura de pantalla de mi página chrome://extensiones, con una sola extensión.¡Ahora deberías ver tu extensión en la misma página! ¡Enhorabuena! Tu extensión debería aparecer ahora en la página chrome://extensions.Si necesitas editar algún archivo en el directorio seleccionado, tendrás que hacer clic en el botón de actualización para volver a cargar la extensión en Chrome. De lo contrario, tus cambios no aparecerán en tu extensión.Ahora, vamos a ver cómo podemos añadir algunas funcionalidades a nuestra extensión. Inyectar un script para modificar un sitio web¿Recuerdas nuestro sitio web de ejemplo? Si vas allí y abres las DevTools (con F12), puedes escribir esta simple línea de código para arreglar nuestro error:document.querySelector(‘div.featured-box-right’).remove();
Editar el sitio web actual lesezeichen
A través de LifeSavvy Media DESDE LIFESAVVSolo Stove Fire Pit 2.0 Review: La bandeja de cenizas extraíble facilita la limpieza. Reseña del horno de pizza Roccbox de Gozney: Calidad de restaurante en un paquete portátil DE REVIEW GEEKKing Bee II Microphone Review: El bombo es cuestionableReseña del cargador doble USB-C Nexode Mini 45W de UGREEN: La energía perfectamente portátil
Las páginas web son solo documentos que muestra tu navegador. Pero, ¿y si pudieras escribir directamente en cualquier página web para modificarla? Puedes hacerlo, y no necesitas una extensión del navegador: es una función integrada en todos los navegadores modernos.
Podrías utilizar esta función para limpiar una página web antes de imprimirla, para probar cómo quedarán los cambios en una página web o incluso para gastar una broma a la gente. Será igual que editar un documento de Word, sin necesidad de jugar con el HTML.
Ahora puedes cerrar la consola, si quieres, y editar la página web actual como si fuera un documento editable. Haz clic en algún lugar para insertar el cursor y escribir el texto. Utiliza las teclas de retroceso o supresión para eliminar texto, imágenes y otros elementos.
Inspeccionar el elemento
Acciones del artículoModificar una página webUno de los casos de uso más comunes para una extensión es modificar una página web. Por ejemplo, una extensión puede querer cambiar el estilo aplicado a una página, ocultar determinados nodos DOM o inyectar nodos DOM adicionales en la página.
En este artículo veremos ambos métodos para cargar un script.Modificación de páginas que coinciden con un patrón de URLEn primer lugar, cree un nuevo directorio llamado “modify-page”. En ese directorio, crea un archivo llamado “manifest.json”, con el siguiente contenido:
Nota: Dado que la propiedad “js” de content_scripts es una matriz, puedes utilizarla para inyectar más de un script en las páginas que coincidan. Si hace esto, las páginas comparten el mismo ámbito, al igual que los múltiples scripts cargados por una página, y se cargan en el orden en que aparecen en el array.
Modificación de páginas mediante programación¿Qué pasa si todavía quieres comer páginas, pero sólo cuando el usuario te lo pida? Actualicemos este ejemplo para que inyectemos el script de contenido cuando el usuario haga clic en un elemento del menú contextual.
En este script estamos creando un elemento del menú contextual, dándole un id y un título específicos (el texto que se mostrará en el menú contextual). A continuación, configuramos un escuchador de eventos para que cuando el usuario haga clic en un elemento del menú contextual, comprobemos si se trata de nuestro elemento eat-page. Si lo es, inyectamos “page-eater.js” en la pestaña actual utilizando la API tabs.executeScript(). Esta API toma opcionalmente un ID de pestaña como argumento: hemos omitido el ID de pestaña, lo que significa que el script se inyecta en la pestaña actualmente activa.