Saltar al contenido

Anular el archivo Javascript en Chrome

Basta ya de indagar en otras webs porque has llegado al lugar exacto, tenemos la solución que deseas y sin complicaciones.

Solución:

Con Chrome 65 esto se ha vuelto trivial.

Uso de anulaciones locales: Chrome 65

¿Qué es?
Es una característica nueva que nos permite anular el código/css de un sitio web con una copia local que se conserva entre sesiones. Una vez que anule un archivo, permanecerá hasta que elimine la anulación.

Cómo configurarlo?

  1. Abra el panel Fuentes.
  2. Abra la pestaña Anulaciones. Abrir pestaña de anulaciones
  3. Haga clic en Configurar anulaciones.
  4. Seleccione en qué directorio desea guardar sus cambios.
  5. En la parte superior de la ventana gráfica, haga clic en Permitir para otorgar a DevTools acceso de lectura y escritura al directorio.
  6. Haz tus cambios. Después de agregar una carpeta, puede cambiar a la pestaña de red y hacer clic derecho en cualquier archivo y seleccionar “Guardar para anular”. Ya he anulado scripts.js para que se muestre con un “punto azul”.

Hay complementos y herramientas en Chrome para estos fines:

  1. cromo Herramientas de desarrollopestaña Anulaciones locales (compatible con Chrome 65)
  2. Solicitado
  3. Anulación de recursos
  4. También es posible que desee utilizar Tamper, que es una extensión de devtools basada en mitmproxy que le permite editar archivos remotos localmente y enviarlos directamente a Chrome. (pero es más dolor de cabeza instalarlo y usarlo)

Elija el que le resulte más fácil de usar.

Puede crear una extensión de Chrome usted mismo. Es sorprendentemente fácil y toma solo unos minutos si usa una herramienta como Yeoman Chrome Extension. Cree un nuevo directorio y ejecute el generador.

yo chrome-extension

Introduzca un nombre para su extensión y una breve descripción. Seleccione Page Action y que quieres usar Content Scripts. Puede ignorar otras opciones: siga esta excelente guía si tiene dudas, pero es realmente sencillo.

? What would you like to call this extension? insert-script
? How would you like to describe this extension? replace a function with another function
? Would you like to use UI Action? Page Action
? Would you like more UI Features? Content Scripts
? Would you like to set permissions? 

..etc. Ahora tienes una estructura de directorios como esta

app
  bower_components
  images
  _locales
  scripts.babel
      background.js
      chromereload.js
      contentscript.js

no poder reemplace un script remoto cargado existente con otro script, ya que el script ya está cargado en el DOM. Pero puede insertar un nuevo script al final del cuerpo que anula la función que desea reemplazar. Las funciones son variables, si agrega una nueva función al documento con el mismo nombre que una función existente, la nueva función se ejecutará en lugar de la anterior, exactamente como si declarara una nueva variable con el mismo nombre que una variable existente. Ahora abre y edita contentscript.js :

'use strict';

console.log(''Allo 'Allo! Content script');

El código podría verse así

'use strict';

var code = `
    function foo() 
        alert('foo');
    
`;

var script = document.createElement('script');
script.textContent = code;
document.body.appendChild(script);

Observe el literal de la plantilla. Necesitamos insertar el código como un string, pero con acentos graves es más legible. Reemplazar foo() con la función que desea anular.

No hay necesidad de implementación o agrupación. Puede instalar su extensión directamente desde la ruta donde ejecutó el generador

  1. ir a chrome://extensions
  2. comprobar el modo desarrollador
  3. haga clic en cargar extensión desempaquetada
  4. Seleccione manifest.json de tu camino
  5. después de eso, solo tiene que presionar recargar en la página de extensiones cuando haya realizado cambios en contentscript.js.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *