Home-theater-designers
La función Inspeccionar elemento de su navegador web es una herramienta de desarrollo que le permite modificar los aspectos del front-end de un sitio web, incluidos HTML, CSS y JavaScript, y realizar cambios temporales. También puedes hacer mucho más con Inspect Element. Sin embargo, todos los cambios se pierden después de una actualización.
no puedo instalar nada en Windows 10MUO Vídeo del día DESPLÁCETE PARA CONTINUAR CON EL CONTENIDO
Pero a veces es posible que desees mantener los cambios durante un período prolongado o agregar funcionalidades adicionales para mejorar la experiencia del usuario. Una forma de hacer que los cambios de Inspeccionar elementos sean permanentes es mediante el uso de la extensión Tampermonkey. Le permite agregar scripts personalizados en páginas web, haciendo que los cambios sean permanentes en su máquina local.
Veamos cómo usar Tampermonkey para hacer que los cambios del elemento de inspección sean permanentes en su navegador local.
¿Qué es Tampermonkey y cómo instalarlo?
Tampermonkey, un administrador de scripts de usuario, es una extensión de navegador popular disponible para los principales navegadores web, incluidos Chrome, Edge, Opera Next y Firefox. Le permite crear y ejecutar scripts de usuario personalizados y existentes para modificar páginas web y corregirlas o mejorarlas.
También cuenta con una biblioteca de scripts de usuario creada por otros usuarios de Tampermonkey. Por ejemplo, puede utilizar el script de usuario del Descargador local de YouTube para descargar vídeos de YouTube usando Tampermonkey o ver vídeos de YouTube marcados sin iniciar sesión .
La extensión ejecuta los scripts de usuario guardados tan pronto como se carga la página web especificada, lo que hace que los cambios previstos parezcan permanentes.
Antes de comenzar a escribir un script, deberá instalar Tampermonkey. Entonces, comencemos instalando la extensión:
- Ve a la Página oficial de Tampermonkey . Detectará automáticamente su navegador web. De lo contrario, haga clic en cualquier pestaña de Chrome, Microsoft Edge, Firefox, Safari y Opera, según el navegador que esté utilizando.
- En el Descargar sección, haga clic en Obtener de la tienda . Serás dirigido a la tienda web de tu navegador.
- Haga clic en Instalar para agregar la extensión a su navegador. Siga las instrucciones que aparecen en pantalla para completar la instalación.
Si su navegador no aparece en la lista, pero está utilizando un navegador Chromium, debería poder instalar esta extensión desde el Tienda Chrome .
Una vez instalado, puede comenzar a escribir scripts de usuario personalizados utilizando JavaScript para realizar los cambios deseados en cualquier sitio web. No hace falta decir que necesitarás conocimientos básicos de HTML, CSS y JavaScript para escribir el script de usuario y realizar modificaciones con Tampermonkey.
Para demostrar las capacidades de Tampermonkey, escribiremos un script para agregar un botón de compartir de WhatsApp para compartir enlaces de artículos con sus contactos de WhatsApp.
Qué considerar antes de realizar modificaciones en los elementos del sitio web
Al realizar modificaciones en cualquier sitio web, es importante respetar sus políticas sobre el uso de JavaScripts de terceros. No intente ejecutar scripts de usuario arbitrariamente en ningún sitio web, especialmente cuando se trata de datos confidenciales.
Si bien Tampermonkey lo ayuda a modificar la apariencia y agregar funcionalidad a un sitio web, todos los cambios solo son visibles localmente en su navegador y no afectan la fuente.
Comenzando con Tampermonkey
Una vez que hayas planificado las modificaciones que deseas realizar en una página web, puedes comenzar a escribir tu guión. Se pueden crear nuevos scripts de usuario desde la barra de herramientas o el panel de control de Tampermonkey.
Para crear un nuevo script, haga clic en el Extensiones icono en la barra de herramientas del navegador y seleccione Mono manipulador . A continuación, seleccione Crear un nuevo guión . Esto abrirá un editor de secuencias de comandos en el panel de control de Tampermonkey.
El encabezado predeterminado de Tampermonkey o los comentarios de metadatos se ven así:
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://example.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Your code here...
})();Estos comentarios de metadatos incluyen información crucial sobre el nombre del script de usuario, el propósito previsto y los permisos, e indican a Tampermonkey cuándo ejecutar el script.
Para esta guía, nos centraremos en @fósforo directiva, también conocida como metadatos archivados. Tampermonkey utiliza esta directiva para garantizar que el script de usuario solo se aplique a un sitio web o páginas web específicas. En este caso, el siguiente script de usuario solo se ejecutará en example.com (reemplace la URL del sitio web según sus requisitos) y todas sus páginas.
Escribir un script de usuario para agregar un botón para compartir de WhatsApp
Al final de cada artículo de MakeUseOf, encontrará un widget para compartir para varias plataformas de redes sociales, excepto WhatsApp. Si bien puedes copiar y pegar la URL, un botón para compartir de WhatsApp es útil si compartes artículos con frecuencia en tu grupo de WhatsApp.
Puede crear un script de usuario en Tampermonkey para agregar un botón para compartir de WhatsApp al final del artículo. Integraremos el botón en el widget para compartir existente que le permitirá compartir la URL de la página web con sus contactos de WhatsApp.
Comencemos creando un botón básico para compartir en WhatsApp.
¿Cómo descargo Adobe Flash Player en mi Mac?
//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';Ahora que tenemos un botón básico para compartir en WhatsApp, vamos a agregarle un poco de estilo. Esto le dará al botón su color de fondo y texto, borde, relleno y estilo de cursor. Con un poco de retoque, puedes cambiar las propiedades del botón para ajustar la apariencia.
//add styling to the button
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';
Con el botón listo, es hora de probarlo. ¿Pero dónde lo colocas? Como práctica común, el botón de compartir suele colocarse al final de los artículos.
Sin embargo, en este caso, ya tenemos un widget para compartir al final de cada artículo. Por lo tanto, es ideal hacer que este botón de compartir forme parte del widget.
Para hacer esto, inspeccionaremos el widget para compartir existente para encontrar el contenedor principal que contiene los elementos para compartir y ubicarlo en el script de usuario. En la página web, presione Ctrl + Mayús + C para abrir Inspeccionar elemento. A continuación, seleccione el elemento del widget para compartir en la página para inspeccionarlo.
Verás que es un Después de seleccionar el elemento, insertemos el botón de compartir como hijo del mismo: Prensa Ctrl + S para guardar el guión. Si recarga la página, verá un botón para compartir insertado en el widget para compartir existente. Pero hacer clic en él no hará nada. Para que el botón funcione, crearemos una función para generar una URL para compartir de WhatsApp basada en la URL de la página actual. Puede utilizar location.href para devolver la URL de la página. A continuación, agreguemos un detector de eventos al botón. Al hacer clic, el navegador abrirá una nueva pestaña con un enlace para compartir de WhatsApp que le permitirá redactar un mensaje. Una vez que tengas el script de usuario listo, presiona Ctrl + S para guardar los cambios. Abre el Scripts de usuario instalados pestaña en Tampermonkey para ver todos los scripts de usuario instalados en su navegador. Para ver el script de usuario en acción, abra la página web de destino. Verás un verde Compartir botón. Al hacer clic en el botón, se le pedirá que abra el escritorio de WhatsApp, siempre que tenga la aplicación instalada. Luego puede seleccionar el contacto de la lista para enviar el enlace del artículo. Puede modificar aún más el script para agregar más mejoras. Por ejemplo, puede mostrar el ícono de WhatsApp en el botón o cambiar su ubicación usando la función InsertAfter(). Puede habilitar, deshabilitar o editar scripts de usuario individuales desde el panel de control de Tampermonkey. Alternativamente, haga clic en el icono de Tampermonkey en la barra de herramientas para desactivar todos los scripts de usuario activos a la vez. Tampermonkey es uno de los muchos administradores de scripts de usuario disponibles que le permiten modificar páginas web para mejorar su experiencia de navegación. Pequeñas modificaciones pueden ayudar a mejorar la accesibilidad y solucionar pequeñas molestias con su sitio web favorito. Antes de comenzar a escribir un script, verifique si ya existe un script de otros usuarios. Sin embargo, tenga cuidado al instalar scripts de usuario de terceros de fuentes desconocidas para evitar códigos maliciosos.const sharingDiv = document.querySelector ('div.sharing.bottom');if (sharingDiv) {
sharingDiv.appendChild(Whatsapp_btn);
}
function generateWALink() {
const pageURL = encodeURIComponent(window.location.href);
return `https://api.whatsapp.com/send?text=${pageURL}`;
}Whatsapp_btn.addEventListener('click', () => {
const whatsappURL = generateWALink();
window.open(whatsappURL, '_blank');
}); Guarde y ejecute el script de usuario
disco de Windows 10 funcionando al 100%
Hacer que los cambios de elementos de inspección sean permanentes usando Tampermonkey