¿Cómo recargo automáticamente una extensión de Chrome que estoy desarrollando?

Me gustaría que mi extensión de Chrome se vuelva a cargar cada vez que guarde un archivo en la carpeta de extensiones, sin tener que hacer clic explícitamente en "volver a cargar" en Chrome: // extensiones /. es posible?

Editar: Soy consciente de que puedo actualizar el intervalo en el que Chrome recarga las extensiones, que es una solución intermedia, pero prefiero hacer que mi editor (emacs o textmate) se active al guardar una recarga o pedirle a Chrome que monitoree El directorio de cambios.

Puedes usar " Extensions Reloader " para Chrome:

Vuelve a cargar todas las extensiones desempaquetadas usando el botón de la barra de herramientas de la extensión o buscando " http: //reload.extensions "

Si alguna vez ha desarrollado una extensión de Chrome, es posible que haya querido automatizar el proceso de recarga de su extensión desempaquetada sin la necesidad de pasar por la página de extensiones.

"Extensions Reloader" le permite recargar todas las extensiones desempaquetadas de 2 maneras:

1 - El botón de la barra de herramientas de la extensión.

2 - Navegando a " http: //reload.extensions ".

El icono de la barra de herramientas volverá a cargar las extensiones desempaquetadas con un solo clic.

La opción "recargar navegando" está destinada a automatizar el proceso de recarga utilizando scripts de "post compilación". Simplemente agregue un buscador a " http: //reload.extensions " usando Chrome a su script, y tendrá una ventana de Chrome actualizada.

Actualización: a partir del 14 de enero de 2015, la extensión es de código abierto y está disponible en GitHub .

Actualización : he agregado una página de opciones, para que ya no tenga que buscar y editar manualmente la ID de la extensión. CRX y el código fuente están en: https://github.com/Rob--W/Chrome-Extension-Reloader
Actualización 2: Atajo agregado (vea mi repositorio en Github).
_{El código original, que incluye la funcionalidad básica, se muestra a continuación .}

Cree una extensión y use el método de Acción del navegador junto con la chrome.extension.managementAPI para volver a cargar la extensión desempaquetada.

El siguiente código agrega un botón a Chrome, que volverá a cargar una extensión al hacer clic.

manifest.json

{
    "name": "Chrome Extension Reloader",
    "version": "1.0",
    "manifest_version": 2,
    "background": {"scripts": ["bg.js"] },
    "browser_action": {
        "default_icon": "icon48.png",
        "default_title": "Reload extension"
    },
    "permissions": ["management"]
}

bg.js

var id = "<extension_id here>";
function reloadExtension(id) {
    chrome.management.setEnabled(id, false, function() {
        chrome.management.setEnabled(id, true);
    });
}
chrome.browserAction.onClicked.addListener(function(tab) {
    reloadExtension(id);
});

icon48.png: Elija cualquier buen icono de 48x48, por ejemplo:

en cualquier función o evento

chrome.runtime.reload();

volverá a cargar su extensión ( docs ). También necesita cambiar el archivo manifest.json , agregando:

...
"permissions": [ "management" , ...]
...

He creado una secuencia de comandos incrustable simple que realiza una recarga en caliente:

https://github.com/xpl/crx-hotreload

Observa los cambios de archivos en el directorio de una extensión. Cuando se detecta un cambio, vuelve a cargar la extensión y actualiza la pestaña activa (para volver a activar los scripts de contenido actualizados).

• Funciona comprobando marcas de tiempo de archivos
• Admite directorios anidados
• Se deshabilita automáticamente en la configuración de producción

Otra solución sería crear un script livereload personalizado (extension-reload.js):

// Reload client for Chrome Apps & Extensions.
// The reload client has a compatibility with livereload.
// WARNING: only supports reload command.

var LIVERELOAD_HOST = 'localhost:';
var LIVERELOAD_PORT = 35729;
var connection = new WebSocket('ws://' + LIVERELOAD_HOST + LIVERELOAD_PORT + '/livereload');

connection.onerror = function (error) {
  console.log('reload connection got error:', error);
};

connection.onmessage = function (e) {
  if (e.data) {
    var data = JSON.parse(e.data);
    if (data && data.command === 'reload') {
      chrome.runtime.reload();
    }
  }
};

Este script se conecta al servidor livereload usando websockets. Luego, emitirá una llamada chrome.runtime.reload () al recargar el mensaje de livereload. El siguiente paso sería agregar este script para que se ejecute como script de fondo en su manifest.json, ¡y listo!

Nota: esta no es mi solución. Solo lo estoy publicando. Lo encontré en el código generado del generador de extensiones de Chrome (¡Gran herramienta!). Estoy publicando esto aquí porque podría ayudar.

Las extensiones de Chrome tienen un sistema de permisos que no lo permitiría (algunas personas en SO tenían el mismo problema que usted ), por lo que solicitarles que "agreguen esta función" no funcionará en mi opinión. Hay un correo de Chromium Extensions Google Groups con una solución propuesta (teoría) que utiliza chrome.extension.getViews(), pero tampoco se garantiza que funcione.

Si fuera posible agregar a manifest.jsonalgunas páginas internas de Chrome como chrome://extensions/, sería posible crear un complemento que interactuaría con el Reloadancla y, utilizando un programa externo como XRefresh (un complemento de Firefox, hay una versión de Chrome con Ruby y WebSocket ), lograrías justo lo que necesitas:

XRefresh es un complemento de navegador que actualizará la página web actual debido al cambio de archivo en las carpetas seleccionadas. Esto hace posible la edición de páginas en vivo con su editor HTML / CSS favorito.

No es posible hacerlo, pero creo que puede usar este mismo concepto de una manera diferente.

Puede intentar encontrar soluciones de terceros en lugar de eso, después de ver modificaciones en un archivo (no conozco emacs ni Textmate, pero en Emacs sería posible vincular una llamada de aplicación dentro de una acción "guardar archivo"), solo hace clic en una coordenada específica de una aplicación específica: en este caso es el Reloadancla de su extensión en desarrollo (deja una ventana de Chrome abierta solo para esta recarga).

(Loco como el infierno pero puede funcionar)

Aquí hay una función que puede usar para ver los archivos en busca de cambios y volver a cargar si se detectan cambios. Funciona sondeándolos a través de AJAX y recargándolos a través de window.location.reload (). Supongo que no deberías usar esto en un paquete de distribución.

function reloadOnChange(url, checkIntervalMS) {
    if (!window.__watchedFiles) {
        window.__watchedFiles = {};
    }

    (function() {
        var self = arguments.callee;
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (__watchedFiles[url] &&
                    __watchedFiles[url] != xhr.responseText) {
                    window.location.reload();
                } else {
                    __watchedFiles[url] = xhr.responseText
                    window.setTimeout(self, checkIntervalMS || 1000);
                }
            }
        };

        xhr.open("GET", url, true);
        xhr.send();
    })();
}

reloadOnChange(chrome.extension.getURL('/myscript.js'));

Tal vez llego un poco tarde a la fiesta, pero lo he resuelto creando https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

Funciona volviendo a cargar la chrome://extensionspágina, cada vez file.changeque se reciben eventos a través de websockets.

Puede encontrar un ejemplo basado en Gulp de cómo emitir file.changeeventos tras cambios de archivo en una carpeta de extensión aquí: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

¿Por qué volver a cargar toda la pestaña en lugar de simplemente usar la API de administración de extensiones para recargar / volver a habilitar extensiones? Actualmente, deshabilitar y habilitar extensiones nuevamente hace que se cierre cualquier ventana de inspección abierta (registro de consola, etc.), lo que encontré demasiado molesto durante el desarrollo activo.

Hay un complemento de recarga automática si está desarrollando usando webpack: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');

plugins: [
    new ChromeExtensionReloader()
]

También viene con una herramienta CLI si no desea modificar webpack.config.js:

npx wcer

Nota: se requiere un script de fondo (vacío) incluso si no lo necesita porque allí es donde inyecta el código de recarga.

Sus archivos de contenido como html y los archivos de manifiesto no se pueden cambiar sin la instalación de la extensión, pero creo que los archivos JavaScript se cargan dinámicamente hasta que la extensión se haya empaquetado.

Sé esto debido a un proyecto actual en el que estoy trabajando a través de la API de extensiones de Chrome, y parece que se carga cada vez que actualizo una página.

Tal vez una respuesta un poco tardía, pero creo que crxreload podría funcionar para usted. Es mi resultado de tratar de tener un flujo de trabajo de recarga al guardar durante el desarrollo.

Estoy usando un atajo para recargar. No quiero volver a cargar todo el tiempo cuando guardo un archivo

Entonces mi enfoque es liviano, y puedes dejar la función de recarga en

manifest.json

{
    ...
    "background": {
        "scripts": [
            "src/bg/background.js"
        ],
        "persistent": true
    },
    "commands": {
        "Ctrl+M": {
            "suggested_key": {
                "default": "Ctrl+M",
                "mac": "Command+M"
            },
            "description": "Ctrl+M."
        }
    },
    ...
}

src / bg / background.js

chrome.commands.onCommand.addListener((shortcut) => {
    console.log('lets reload');
    console.log(shortcut);
    if(shortcut.includes("+M")) {
        chrome.runtime.reload();
    }
})

Ahora presiona Ctrl + M en el navegador Chrome para recargar

Use npm initpara crear un package.json en la raíz del directorio, luego

npm install --save-dev gulp-open && npm install -g gulp

luego crea un gulpfile.js

que se parece a:

/* File: gulpfile.js */

// grab our gulp packages
var gulp  = require('gulp'),
    open = require('gulp-open');

// create a default task and just log a message
gulp.task('default', ['watch']);

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('extensionData/userCode/**/*.js', ['uri']);
});

gulp.task('uri', function(){
  gulp.src(__filename)
  .pipe(open({uri: "http://reload.extensions"}));
});

Esto funciona para mí desarrollando con CrossRider, puede observar para cambiar la ruta en la que mira los archivos, también suponiendo que tiene npm y nodo instalados.

Descargo de responsabilidad: desarrollé esta extensión yo mismo.

Clerc - para Chrome Live Extension Reloading Client

Conéctese a un servidor compatible con LiveReload para volver a cargar automáticamente su extensión cada vez que guarde.

Bonificación: con un poco de trabajo extra de su parte, también puede recargar automáticamente las páginas web que su extensión altera.

La mayoría de los desarrolladores de páginas web usan un sistema de compilación con algún tipo de observador que construye automáticamente sus archivos y reinicia su servidor y recarga el sitio web.

El desarrollo de extensiones no debería ser tan diferente. Clerc trae esta misma automatización a los desarrolladores de Chrome. Configure un sistema de compilación con un servidor LiveReload, y Clerc escuchará los eventos de recarga para actualizar su extensión.

El único gran problema son los cambios en el manifest.json. Cualquier pequeño error tipográfico en el manifiesto probablemente provocará que fallen más intentos de recarga, y se quedará atascado desinstalando / reinstalando su extensión para que sus cambios se carguen nuevamente.

Clerc reenvía el mensaje de recarga completo a su extensión después de que se vuelve a cargar, por lo que opcionalmente puede usar el mensaje proporcionado para activar más pasos de actualización.

Los grandes chicos de mozilla acaban de lanzar un nuevo https://github.com/mozilla/web-ext que puedes usar para lanzarweb-ext run --target chromium

Gracias a @GmonC y @Arik y algo de tiempo libre, logré hacer que esto funcione. He tenido que cambiar dos archivos para que esto funcione.

(1) Instale LiveReload y Chrome Extension para esa aplicación. Esto invocará algún script en el cambio de archivo.

(2) abierto <LiveReloadInstallDir>\Bundled\backend\res\livereload.js

(3) cambie la línea #509a

this.window.location.href = "http://reload.extensions";

(4) Ahora instale otra extensión Extensions Reloaderque tenga un manejador de enlaces útil que recargue todas las extensiones de desarrollo al navegar a"http://reload.extensions"

(5) Ahora cambie esa extensión de background.min.jsesta manera

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader"))

reemplazar con

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader")&&(d.name!="LiveReload"))

Abra la aplicación LiveReload, oculte el botón Extension Reloader y active la extensión LiveReload haciendo clic en el botón en la barra de herramientas, ahora volverá a cargar la página y las extensiones en cada cambio de archivo mientras usa todas las otras ventajas de LiveReload (recarga CSS, recarga de imagen, etc.)

Lo único malo de esto es que tendrá que repetir el procedimiento para cambiar los scripts en cada actualización de extensión. Para evitar actualizaciones, agregue la extensión como desempaquetada.

Cuando tenga más tiempo para jugar con esto, probablemente crearé una extensión que elimine la necesidad de ambas extensiones.

Hasta entonces, estoy trabajando en mi extensión Projext Axeman

Acabo de encontrar un nuevo proyecto basado en gruñidos que proporciona bootstrapping, andamios, algunos profesores automatizados de preprocesamiento, así como recarga automática (no se necesita interacción).

Arranque su extensión de Chrome desde Websecurify

Si tienes una Mac, ¡la forma más fácil es con la aplicación Alfred!

Simplemente obtenga la aplicación Alfred con Powerpack , luego agregue el flujo de trabajo proporcionado en el siguiente enlace y personalice la tecla de acceso rápido que desee (me gusta usar ⌘ + ⌥ + R). Eso es todo.

Ahora, cada vez que use la tecla de acceso rápido, Google Chrome se recargará, sin importar en qué aplicación se encuentre en ese momento.

Si desea utilizar otro navegador, abra el AppleScript dentro de los flujos de trabajo de preferencias de Alfred y reemplace "Google Chrome" con "Firefox", "Safari", ...

También mostraré aquí el contenido del script / usr / bin / osascript usado en el archivo ReloadChrome.alfredworkflow para que pueda ver lo que está haciendo.

tell application "Google Chrome"
  activate
  delay 0.5
  tell application "System Events" to keystroke "r" using command down
  delay 0.5
  tell application "System Events" to keystroke tab using command down
end tell

El archivo de flujo de trabajo es ReloadChrome.alfredworkflow .

Quiero volver a cargar (actualizar) mis extensiones durante la noche, esto es lo que uso en background.js:

var d = new Date();
var n = d.getHours();
var untilnight = (n == 0) ? 24*3600000 : (24-n)*3600000; 
// refresh after 24 hours if hour = 0 else
// refresh after 24-n hours (that will always be somewhere between 0 and 1 AM)
setTimeout(function() {
    location.reload();
}, untilnight);

Saludos, Peter

He bifurcada LiveJS para permitir la recarga en vivo de aplicaciones empaquetadas. Simplemente incluya el archivo en su aplicación y cada vez que guarde un archivo, la aplicación se volverá a cargar automáticamente.

Como se menciona en los documentos: la siguiente línea de comando volverá a cargar una aplicación

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=[path to the app ]

así que acabo de crear un script de shell y llamé a ese archivo desde Gulp. Super simple:

var exec = require('child_process').exec;



gulp.task('reload-chrome-build',function(cb){

console.log("reload");

var cmd="./reloadchrome.sh"

exec(cmd,function (err, stdout, stderr) {
    console.log("done: "+stdout);

    cb(err);
    }
);});

ejecute los comandos de vigilancia necesarios en los scripts y llame a la tarea de recarga cuando lo desee. Limpio, simple.

Aquí es donde brillan software como AutoIt o alternativas. La clave es escribir un script que emule su fase de prueba actual. Acostúmbrese a usar al menos una de ellas, ya que muchas tecnologías no vienen con rutas de prueba / flujo de trabajo claras.

Run("c:\Program Files (x86)\Google\Chrome\Application\chrome.exe")
WinWaitActive("New Tab - Google Chrome")
Send("^l")
Send("chrome://extensions{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}{TAB}{TAB}{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Developer Tools")
Send("^`")

Obviamente, cambia el código para adaptarlo a sus necesidades de prueba / iteración. Asegúrese de que los clics en las pestañas sean fieles a la ubicación de la etiqueta de anclaje en el sitio de extensiones chrome: //. También puede usar en relación con los movimientos del mouse de la ventana y otras macros similares.

Agregaría el script a Vim de una manera similar a esta:

map <leader>A :w<CR>:!{input autoit loader exe here} "{input script location here}"<CR>

Esto significa que cuando estoy en Vim presiono el botón arriba de ENTER (generalmente responsable de: | y \) conocido como el botón líder y lo sigo con una 'A' mayúscula y guarda y comienza mi script de fase de prueba.

Asegúrese de completar las secciones {input ...} en el script Vim / hotkey anterior de manera adecuada.

Muchos editores le permitirán hacer algo similar con las teclas de acceso rápido.

Alternativas a AutoIt se pueden encontrar aquí .

Para Windows: AutoHotkey

Para Linux: xdotool, xbindkeys

Para Mac: Automator

Principalmente desarrollo en Firefox, donde web-ext runautomáticamente recarga la extensión después de que cambian los archivos. Luego, una vez que está listo, realizo una ronda final de pruebas en Chrome para asegurarme de que no haya ningún problema que no aparezca en Firefox.

Sin embargo, si desea desarrollar principalmente en Chrome y no desea instalar extensiones de terceros, entonces otra opción es crear un test.htmlarchivo en la carpeta de la extensión y agregarle un montón de SSCCE . Ese archivo luego usa una <script>etiqueta normal para inyectar el script de extensión.

Puede usarlo para el 95% de las pruebas y luego volver a cargar manualmente la extensión cuando desee probarla en sitios activos.

Eso no reproduce idénticamente el entorno en el que se ejecuta una extensión, pero es lo suficientemente bueno para muchas cosas simples.

El autor recomendó la próxima versión de ese complemento de paquete web: https://github.com/rubenspgcavalcante/webpack-extension-reloader . Funciona muy bien para mi.

¡Sí, puedes hacerlo indirectamente! Aquí está mi solución.

En manifest.json

{
    "name": "",
    "version": "1.0.0",
    "description": "",
    "content_scripts":[{
        "run_at":"document_end",
        "matches":["http://*/*"],
        "js":["/scripts/inject.js"]
    }]
}

En inject.js

(function() {
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.async = true;
    script.src = 'Your_Scripts';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
})();

Su script inyectado puede inyectar otro script desde cualquier ubicación.

Otro beneficio de esta técnica es que puede ignorar la limitación del mundo aislado . ver entorno de ejecución de script de contenido

NAVEGADOR-SINCRONIZACIÓN

Usando la increíble sincronización de navegador

• actualizar los navegadores (cualquiera) cuando cambie el código fuente (HTML, CSS, imágenes, etc.)
• compatible con Windows, MacOS y Linux
• incluso podría ver las actualizaciones de su código (en vivo) usando sus dispositivos móviles

Instalación en MacOS (vea su ayuda para instalar en otro sistema operativo)

Instale NVM, para que pueda probar cualquier versión de Node

brew install nvm             # install a Node version manager
nvm ls-remote                # list available Node versions
nvm install v10.13.0         # install one of them
npm install -g browser-sync  # install Browser-Sync

Cómo usar la sincronización del navegador para sitios estáticos

Veamos dos ejemplos:

browser-sync start --server --files . --host YOUR_IP_HERE --port 9000

browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000

La --serveropción le permite ejecutar un servidor local en cualquier lugar en el que se encuentre en su terminal y le --filespermite especificar qué archivos se rastrearán para los cambios. Prefiero ser más específico para los archivos rastreados, por lo que en el segundo ejemplo que uso ackpara enumerar extensiones de archivo específicas (es importante que esos archivos no tengan nombres de archivo con espacios) y también uso ipconfigpara encontrar mi IP actual en MacOS.

Cómo usar la sincronización del navegador para sitios dinámicos

En caso de que esté utilizando PHP, Rails, etc., ya tiene un servidor en ejecución, pero no se actualiza automáticamente cuando realiza cambios en su código. Por lo tanto, debe usar el --proxyinterruptor para que la sincronización del navegador sepa dónde está el host para ese servidor.

browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open

En el ejemplo anterior, ya tengo una aplicación Rails ejecutándose en mi navegador 192.168.33.12:3000. Realmente se ejecuta en una VM usando un cuadro Vagrant, pero pude acceder a la máquina virtual usando el puerto 3000 en ese host. Me gusta --no-notifydetener la sincronización del navegador enviándome una alerta de notificación en el navegador cada vez que cambio mi código y --no-opendetener el comportamiento de sincronización del navegador que carga inmediatamente una pestaña del navegador cuando se inicia el servidor.

IMPORTANTE: en caso de que esté usando Rails, evite usar Turbolinks en el desarrollo, de lo contrario no podrá hacer clic en sus enlaces mientras usa la --proxyopción.

Espero que sea útil para alguien. He intentado muchos trucos para actualizar el navegador (incluso una publicación anterior que he enviado sobre esta pregunta de StackOverflow usando AlfredApp hace tiempo), pero este es realmente el camino a seguir; no más hacks, simplemente fluye.

CRÉDITO: Inicie un servidor web de recarga en vivo local con un comando

No se puede hacer directamente. Lo siento.

Si desea verlo como una característica, puede solicitarlo en http://crbug.com/new