¿Cómo editar y manipular cualquier página web?

Editar una página

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, cree 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.

Sitio web de edición de Javascript

Puede interactuar con DevTools utilizando el ratón o el teclado. Los atajos de teclado proporcionan una forma rápida de acceder a la funcionalidad, y son necesarios para la accesibilidad. Varias herramientas son cada vez más accesibles a través del teclado y de tecnologías de asistencia como los lectores de pantalla.

DevTools te da una cantidad increíble de poder para inspeccionar, depurar y cambiar el producto web que se muestra actualmente en el navegador. La mayoría de las herramientas muestran los cambios en directo. Las actualizaciones en vivo hacen que las herramientas sean increíblemente útiles para refinar la apariencia y la navegación o la funcionalidad de un proyecto web sin necesidad de actualizarlo o construirlo.

Aparte de un par de herramientas de iconos (la herramienta Inspeccionar y Emulación de Dispositivos), DevTools se divide en y un conjunto de herramientas con pestañas, como la herramienta Elementos, la herramienta Consola y la herramienta Fuentes. Dentro del menú de comandos, las herramientas se denominan paneles. La pestaña de una herramienta contiene un panel que contiene la UI de la herramienta.

Las herramientas están organizadas en un conjunto de pestañas en la barra de herramientas principal y en la barra de herramientas del cajón. La mayoría de las herramientas también se denominan paneles. Un panel es la interfaz de usuario interna de una herramienta. Una herramienta tiene una pestaña que puede estar presente en la barra de herramientas principal y en la barra de herramientas del cajón.

Editar página chrome android

La siguiente imagen ilustra algunos de los términos más comunes utilizados para describir las diversas partes de una típica página web de la Universidad de Houston. Algunas de ellas se relacionan directamente con la estructura subyacente de las “Regiones” de la página, otras con los diálogos de edición y otras con la jerga general de la web.

Una concantenación de los nombres de sistema de las carpetas anidadas relevantes, incluyendo todas las carpetas ancestrales directas de una página hasta la carpeta de inicio del sitio (o del área) – más el nombre del sistema de la página/archivo – más la extensión del archivo (por ejemplo, “.php” para los activos de tipo página). Dentro del CMS puede ver los IDs de CMS de los activos mostrados en la barra de direcciones de su navegador.    Consulte las notas adicionales que siguen a este cuadro.

Basado en la configuración de los metadatos de la carpeta de inicio de un sitio o área y en el texto del título de la carpeta correspondiente; basado en la configuración de Mostrar como cabecera de la carpeta. “Reinicia” la herencia del menú de navegación izquierdo para mostrar sólo los elementos descendientes de la carpeta elegida. Para cambiar, edite los metadatos de la carpeta correspondiente: Editar carpeta >> Diálogo de metadatos >> Título Editar carpeta >> Diálogo de metadatos >> ¿Mostrar como cabecera?

Inspeccionar el cromo de los elementos

Este artículo ha sido redactado por Mitch Harris. Mitch Harris es un experto en tecnología de consumo con sede en el área de la bahía de San Francisco. Mitch dirige su propia empresa de consultoría informática llamada Mitch the Geek, que ayuda a particulares y empresas con la tecnología de la oficina en casa, la seguridad de los datos, el soporte remoto y el cumplimiento de la ciberseguridad. Mitch es licenciado en Psicología, Inglés y Física y se graduó con honores en la Universidad del Norte de Arizona.

Cualquier bromista puede ver el potencial de ser capaz de cambiar temporalmente la forma en que un sitio web aparece en su ordenador, y hay un montón de aplicaciones prácticas de ser capaz de ajustar la forma en que un sitio web aparece a usted también[1].

Este artículo ha sido redactado por Mitch Harris. Mitch Harris es un experto en tecnología de consumo con sede en el área de la bahía de San Francisco. Mitch dirige su propia empresa de consultoría informática llamada Mitch the Geek, que ayuda a particulares y empresas con la tecnología de la oficina en casa, la seguridad de los datos, el soporte remoto y el cumplimiento de la ciberseguridad. Mitch es licenciado en Psicología, Inglés y Física y se graduó con honores en la Universidad del Norte de Arizona. Este artículo ha sido visto 316.318 veces.