habilitar - desactivar javascript chrome

Extensión de Chrome para modificar el script de la página incluye y JS.

Question

Trabajo en una biblioteca javascript que los clientes incluyen en su sitio para incrustar un widget de UI. Quiero una forma de probar las versiones dev de la biblioteca en vivo en el sitio del cliente sin requerir que realicen cambios en su código. Esto facilitaría la depuración de problemas y la prueba de nuevas versiones.

Para hacer esto, necesito cambiar la secuencia de comandos include para que apunte a mi servidor dev, y luego invalide el método load () que se llama en la página para agregar un parámetro adicional para decirle a qué servidor apuntar cuando hace llamadas remotas.

Parece que puedo agregar JS a la página con una extensión de Chrome, pero no veo ninguna forma de modificar la página antes de que se cargue. ¿Hay algo que me esté faltando o las extensiones de Chrome no están permitidas para hacer este tipo de cosas?

Answer 1

Aquí hay una forma de modificar el contenido antes de que se cargue en la página utilizando la API de WebRequest . Esto requiere que el contenido se cargue en una variable de cadena antes de que vuelva el oyente onBeforeRequest. Este ejemplo es para javascript, pero debería funcionar igual de bien para otros tipos de contenido.

chrome.webRequest.onBeforeRequest.addListener(
    function (details) {
        var javascriptCode = loadSynchronously(details.url);
        // modify javascriptCode here
        return { redirectUrl: "data:text/javascript," 
                             + encodeURIComponent(javascriptCode) };
    },
    { urls: ["*://*.example.com/*.js"] },
    ["blocking"]);

loadSynchronously () se puede implementar con un XMLHttpRequest regular. La carga sincrónica bloqueará el bucle de eventos y está en deprecated en XMLHttpRequest, pero desafortunadamente es difícil evitarlo con esta solución.

Answer 2

Es posible que le interesen los ganchos disponibles en el navegador Opera. Opera solía tener * ganchos muy potentes , disponibles tanto para archivos de JavaScript de usuario (archivos de un solo archivo, muy fáciles de escribir y desplegar) y Extensiones. Algunos de estos son:

Antes de ExternalScript:

Este evento se activa cuando se encuentra un elemento de script con un atributo src. Puede examinar el elemento, incluido su atributo src, cambiarlo, agregarle más escuchas de eventos específicos o cancelar su carga por completo.

Un buen truco es cancelar su carga, cargar el script externo en una llamada AJAX, realizar un reemplazo de texto en él y luego reinyectarlo en la página web como una etiqueta de script o usar eval.

window.opera.defineMagicVariable:

Los JavaScripts de usuario pueden utilizar este método para anular las variables globales definidas por scripts normales. Cualquier referencia a la anulación del nombre global llamará a las funciones getter y setter proporcionadas.

window.opera.defineMagicFunction:

Los JavaScripts de usuario pueden utilizar este método para anular las funciones globales definidas por scripts normales. Cualquier invocación del nombre global que se invalida llamará a la implementación provista.

*: Opera recientemente cambió al motor Webkit, y parece que han eliminado algunos de estos ganchos. Sin embargo, todavía puedes encontrar Opera 12 para descargar en su sitio web.

Answer 3

He hecho una buena cantidad de desarrollo de extensiones de Chrome, y no creo que haya ninguna manera de editar una fuente de página antes de que sea procesada por el navegador. Las dos opciones más cercanas son:

• Los scripts de contenido le permiten agregar archivos JavaScript y CSS adicionales. Es posible que pueda usar estos scripts para volver a escribir las etiquetas de script existentes en la página, pero no estoy seguro de que funcionará, ya que cualquier etiqueta de script visible para su script a través del DOM ya está cargada o se está cargando.

• WebRequest permite secuestrar solicitudes HTTP, por lo que podría tener una extensión para redireccionar una solicitud de library.js a library_dev.js .

Asumiendo que su sitio es www.mysite.com y mantiene sus scripts en el directorio / js:

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        if( details.url == "http://www.mysite.com/js/library.js" )
            return {redirectUrl: "http://www.mysite.com/js/library_dev.js" };
    },
    {urls: ["*://www.mysite.com/*.js"]},
    ["blocking"]);

La fuente HTML tendrá el mismo aspecto, pero el documento introducido por <script src="library.js"></script> ahora será un archivo diferente. Esto debe lograr lo que quieres.

Answer 4

No es una extensión de Chrome, pero Fiddler puede cambiar la secuencia de comandos para que apunte a su servidor de desarrollo (consulte esta respuesta para obtener instrucciones de configuración del autor de Fiddler). Además, con Fiddler puede configurar una búsqueda y reemplazar para agregar ese parámetro adicional que necesita.