javascript - para - plugins chrome developer
¿Cómo recargo automáticamente una extensión de Chrome que estoy desarrollando? (22)
Acabo de encontrar un nuevo proyecto basado en gruntjs que proporciona bootstrapping, andamios, algunos profesores de preprocesamiento automatizados, así como la recarga automática (no se necesita interacción).
Arranque su extensión de Chrome desde Websecurify
Me gustaría que mi extensión de Chrome se vuelva a cargar cada vez que guardo un archivo en la carpeta de la extensión, sin tener que hacer clic explícitamente en "recargar" en chrome: // extensions /. es posible?
Edición: soy consciente de que puedo actualizar el intervalo en el que Chrome vuelve a cargar las extensiones, que es una solución a medio camino, pero prefiero hacer que mi editor (emacs o textmate) se active en la recarga o pedirle a Chrome que supervise El directorio para cambios.
Aquí es donde brillan software como AutoIt o alternativas. La clave es escribir un script que emule su fase de prueba actual. Familiarícese con el uso de al menos una de ellas, ya que muchas tecnologías no vienen con rutas de flujo de trabajo / pruebas 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 que se adapte a sus necesidades de prueba / iteración. Asegúrese de que los clics en las pestañas sean fieles a donde está la etiqueta de anclaje en el sitio chrome: // extensions. También puede utilizar en relación con los movimientos del ratón de la ventana y otras macros similares.
Yo agregaría el script a Vim de una manera similar a esto:
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 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 secuencia de comandos de la fase de prueba.
Asegúrese de completar las secciones {entrada ...} en la secuencia de comandos Vim / hotkey anterior.
Muchos editores te permitirán hacer algo similar con las teclas de acceso rápido.
Alternativas a AutoIt se pueden encontrar here .
Para Windows: AutoHotkey
Para Linux: xdotool, xbindkeys
Para Mac: Automator
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 encuestándolos a través de AJAX y recargando 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''));
Como se menciona en los documentos: la siguiente línea de comando recargará 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 desee. Limpio, simple.
Descargo de responsabilidad: yo mismo desarrollé esta extensión.
Clerc - para Chrome Live Extension Reloading Client
Conéctese a un servidor compatible con LiveReload para recargar automáticamente su extensión cada vez que guarde.
Bonificación: con un poco de trabajo adicional de su parte, también puede volver a cargar automáticamente las páginas web que modifica su extensión.
La mayoría de los desarrolladores de páginas web utilizan un sistema de compilación con algún tipo de observador que construye automáticamente sus archivos, reinicia su servidor y vuelve a cargar el sitio web.
Desarrollar 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 gotcha es cambios en el manifest.json. Cualquier error tipográfico pequeño en el manifiesto probablemente causará más intentos de recarga y los errores quedarán bloqueados al desinstalar / reinstalar su extensión para que los cambios se carguen nuevamente.
Clerc reenvía el mensaje de recarga completa a su extensión después de que se recargue, de modo que opcionalmente puede usar el mensaje provisto para desencadenar más pasos de actualización.
Gracias a @GmonC y @Arik y algo de tiempo libre, me las arreglo para que esto funcione. He tenido que cambiar dos archivos para que esto funcione.
(1) Instale LiveReload y Chrome Extension para esa aplicación. Esto llamará a algún script en el cambio de archivo.
(2) Abra <LiveReloadInstallDir>/Bundled/backend/res/livereload.js
(3) cambie la línea #509 a
this.window.location.href = "http://reload.extensions";
(4) Ahora instale otra extensión Extensions Reloader que tiene un útil controlador de enlace que Extensions Reloader cargar todas las extensiones de desarrollo al navegar a "http://reload.extensions"
(5) Ahora cambia el background.min.js esa extensión de esta 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 se cambiarán en cada archivo mientras usa todas las demás funciones de LiveReload (recarga de css, recarga de imagen, etc.)
Lo único malo de esto es que tendrá que repetir el procedimiento de cambio de scripts en cada actualización de extensión. Para evitar actualizaciones, agregue la extensión como desempaquetada.
Cuando tenga más tiempo para perder el tiempo con esto, probablemente crearé una extensión que elimine la necesidad de estas dos extensiones.
Hasta entonces, estoy trabajando en mi extensión Projext Axeman
He hecho un simple script incrustado haciendo recarga en caliente:
https://github.com/xpl/crx-hotreload
Busca 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 las marcas de tiempo de los archivos.
- Soporta directorios anidados
- Se desactiva automáticamente en la configuración de producción.
Las Extensiones de Chrome tienen un sistema de permisos que no lo permitiría (algunas personas en SO tuvieron el mismo problema que usted ), por lo que solicitarles que "agreguen esta característica" no va a funcionar IMO. 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 al manifest.json algunas páginas internas de Chrome como chrome://extensions/ , sería posible crear un complemento que interactúe con el ancla Reload , y, utilizando un programa externo como XRefresh (un Firefox Complemento: hay una versión de Chrome que utiliza Ruby y WebSocket), usted lograría exactamente lo que necesita:
XRefresh es un complemento del 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 de HTML / CSS favorito.
No es posible hacerlo, pero creo que puedes usar este mismo concepto de una manera diferente.
Podría intentar encontrar soluciones de terceros en lugar de eso, después de ver las modificaciones en un archivo (no sé 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, se trata del anclaje de Reload de su extensión en desarrollo (deja una ventana de Chrome abierta solo para esta recarga).
(Loco como el infierno pero puede funcionar)
Me desarrollo principalmente en Firefox, donde web-ext run la extensión web-ext run automáticamente la extensión después de que los archivos cambian. Luego, una vez que está listo, hago una última ronda de pruebas en Chrome para asegurarme de que no haya ningún problema que no aparezca en Firefox.
Sin embargo, si desea desarrollarse principalmente en Chrome y no desea instalar extensiones de terceros, entonces otra opción es crear un archivo test.html en la carpeta de la extensión y agregarle un montón de SSCCE''s . Ese archivo luego usa una etiqueta <script> normal para inyectar el script de extensión.
Podría usar eso para el 95% de las pruebas, y luego volver a cargar la extensión manualmente cuando desee probarlo en sitios activos.
Eso no reproduce de forma idéntica el entorno en el que se ejecuta una extensión, pero es lo suficientemente bueno para muchas cosas simples.
No se puede hacer directamente. Lo siento.
Si desea verlo como una característica, puede solicitarlo en http://crbug.com/new
Otra solución sería crear un script personalizado de livereload (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 mediante websockets. Luego, emitirá una llamada chrome.runtime.reload () al volver a cargar el mensaje desde livereload. El siguiente paso sería agregar esta secuencia de comandos para que se ejecute como secuencia de comandos de fondo en su archivo 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.
Puedes usar " Extensions Reloader " para Chrome:
Recarga todas las extensiones desempaquetadas usando el botón de la barra de herramientas de la extensión o navegando a " http: //reload.extensions "
Si alguna vez ha desarrollado una extensión de Chrome, es posible que haya deseado automatizar el proceso de recarga de la extensión desempaquetada sin la necesidad de pasar por la página de extensiones.
"Extensions Reloader" le permite recargar todas las extensiones desempaquetadas de dos 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 "recarga por navegación" está diseñada para automatizar el proceso de recarga usando scripts "post build". Simplemente agregue un navegador 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 .
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
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 inyectar.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 puedes ignorar la limitación del mundo aislado . Ver contenido del entorno de ejecución de script.
Sus archivos de contenido tales como html y archivos de manifiesto no se pueden cambiar sin la instalación de la extensión, pero creo que los archivos de JavaScript se cargan dinámicamente hasta que la extensión se ha empaquetado.
Lo sé 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 llego un poco tarde a la fiesta, pero lo he resuelto por mí creando https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln
Funciona recargando la página chrome://extensions , siempre que los eventos de file.change través de websockets.
Un ejemplo basado en Gulp de cómo emitir el evento file.change ante cambios de archivo en una carpeta de extensión se puede encontrar aquí: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher
¿Por qué volver a cargar la pestaña completa en lugar de usar la API de administración de extensiones para volver a cargar / volver a habilitar las extensiones? Al deshabilitar y habilitar extensiones nuevamente, la ventana de inspección abierta (registro de la consola, etc.) se cierra, lo que me pareció demasiado molesto durante el desarrollo activo.
Tal vez un poco tarde la respuesta, pero creo que crxreload podría funcionar para usted. Es mi resultado de tratar de tener un flujo de trabajo de recarga al guardar mientras se desarrolla.
Use npm init para 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í al desarrollar con CrossRider, puede que vea cómo cambia la ruta en la que ve los archivos, también suponiendo que tiene npm y un nodo instalado.
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" , ...]
...
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 cargará automáticamente.
Actualización : agregué una página de opciones para que 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: Se ha agregado un acceso directo (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 API chrome.extension.management para volver a cargar la extensión desempaquetada.
El código a continuación agrega un botón a Chrome, que recargará 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 : icon48.png cualquier icono agradable de 48x48, por ejemplo:
Google Chrome http://icons.iconarchive.com/icons/google/chrome/48/Google-Chrome-icon.png
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 provisto 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 uses la tecla de acceso rápido, Google Chrome se volverá a cargar, independientemente de la aplicación que estés en ese momento.
Si desea utilizar otro navegador, abra 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 utilizado 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 .