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

263

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.

Andrey Fedorov
fuente
2
Parece ser más rápido cuando la recarga se activa desde la interfaz de usuario habilitada en chrome: // flags / # enable-apps-devtool-app
Eric
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.
Oz Ramos
¿Dónde está tu tenedor LiveJS, @Oz Ramos?
Josh
Ah, ya veo: su enlace "LiveJS" es en realidad un enlace a su bifurcación, no a LiveJS.
Josh
66
Esto no responde la pregunta como se le preguntó, pero quiero mencionar que dejé de querer esto (o cualquier otra extensión auxiliar de carga de extensión) después de darme cuenta de que puedo recargar fácilmente una extensión presionando ctrl-R o cmd-R ( dependiendo del sistema operativo) en la ventana de fondo de la extensión. Creo que esto encaja en mi flujo de trabajo mejor que cualquier otra cosa que haya probado, y también evita el problema de la recarga automática cuando los archivos están en un estado inconsistente.
Don Hatch

Respuestas:

162

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 .

Arik
fuente
3
Esta es la mejor solución hasta ahora, pero todavía no facilita la actualización de la extensión cada vez que modifico un archivo que está utilizando, que es lo que estaba buscando idealmente.
Andrey Fedorov
2
Gracias. Quería mencionar que uso PhpStorm y que agregué un botón de barra de herramientas que llama a chrome.exe con la url "reload.extensions". Cada vez que quiero probar el código, presiono ese botón y Chrome aparece con el complemento actualizado.
Arik
30
Guau, me las arreglé para hacer que gruntjs trabaje con este complemento usando grunt-open para abrir http://reload.extensionscuando se modifica un archivo. Ahora actúa exactamente como livereload, pero con una ventana de cromo molesta que se abre cada vez que modifico uno de los archivos de complemento especificados: P. ¡Gracias!
GabLeRoux
1
@GabLeRoux Vine aquí solo para averiguar si alguien ya lo hizo. Funciona a las mil maravillas.
polkovnikov.ph 01 de
1
@AlexanderMills lamentablemente no pude hacerlo sin abrir una nueva pestaña cada vez. Si encuentras una mejor solución. Al menos, uno puede recargar complementos con github.com/arikw/chrome-extensions-reloader
GabLeRoux
58

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:
Google Chrome Google Chrome

Rob W
fuente
1
@trusktr La respuesta de Scott solo vuelve a cargar la página de fondo. Sin embargo, ambas respuestas pueden combinarse (respuesta Scotts + extensión auxiliar), de modo que una extensión se recarga automáticamente cuando cambia el archivo de una extensión. Sin embargo, lo recomiendo en contra de esta práctica, ya que las herramientas de desarrollo se cierran tras la recarga de la extensión. A menudo jugueteo con una extensión de prueba y frecuentemente guardo mis cambios, incluso cuando la sintaxis está incompleta. Eso bloquearía mi extensión, si se habilita una recarga automática real.
Rob W
@RobW Buen punto. A menudo guardo en el medio de la escritura del código, por lo que el código definitivamente romperá el complemento en cuestión.
trusktr
1
@Sudarshan Sugeriste usar chrome.i18n.getMessage("@@extension_id"). Sin embargo, esto devuelve la ID de extensión de la extensión actual , lo que no es útil porque una extensión no puede recargarse usando la managementAPI (después de deshabilitar, no tiene la posibilidad de habilitarla nuevamente).
Rob W
41

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" , ...]
...
Leonardo Ciaccio
fuente
para mí, esta solución solo funcionó si escribí chrome.runtime.reload () en el script en index.html donde se especifica en el archivo de manifiesto de la siguiente manera: ** "background": {"page": "index. html ", **. En mi archivo content_script js, no pude acceder a esta función. Creo que es por motivos de seguridad.
titusfx
Su script de contenido no puede hablar con las API de Chrome. Para que eso funcione, debes usar mensajes
marcelocra
cuando llamas chrome.runtime.reload(), ¿qué pasa realmente? ¿Se actualizan varias páginas / pestañas?
Alexander Mills
55
Supongo que deberíamos llamar chrome.runtime.reload()desde el guión de fondo
Alexander Mills
Trabajó para mi. Gracias
MikeMurko
39

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
Vitaly Gordon
fuente
3
Si está buscando una solución "con sabor a trago", esta es.
ow3n
1
funcionó muy bien ¿Has considerado hacer un paquete npm?
pixelearth
@pixelearth sí, por qué no. Hmm, pero ¿cuál sería el caso de uso entonces? Usted npm install crx-hotreloaden el directorio de la extensión y luego hace referencia al script como "scripts": ["./node_modules/crx-hotreload/hot-reload.js"]? Corrígeme si me equivoco.
Vitaly Gordon
1
@MilfordCubicle Sugeriría exportar un objeto que tenga un método que pueda llamar en su archivo background.js. Entonces, algo import reloader from 'hot-reload'en el script reloader.check ()
pixelearth
3
La respuesta necesita más votos a favor. Funciona bien en combinación con Webpack --watchtambién, porque puedes ponerlo en tu carpeta de compilación para que solo se actualice una vez que el proceso de compilación haya finalizado. No hay complementos de comandos de post-compilación de Webpack.
V. Rubinetti
10

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.

refaelio
fuente
9

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)

GmonC
fuente
7

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'));
Scott
fuente
Puede hacer, agregar: reloadOnChange (chrome.extension.getURL ('/ manifest.json'));
Scott
Intenté pastebin.com/mXbSPkeu , pero la extensión no está actualizada (entradas de manifiesto, secuencia de comandos de contenido, acción del navegador) (Ubuntu 11.10, Chrome 18). El único archivo actualizado es la página de fondo (los console.logmensajes modificados aparecen).
Rob W
"mira los archivos en busca de cambios y vuelve a cargarlos si se detectan cambios". Por mi vida, no puedo ver cómo esto sabría que un archivo ha cambiado. ¡Por favor, ayúdame a entender que suena increíble!
JasonDavis
oo Ahora veo, está almacenando una copia del contenido de los archivos y comparando la versión en caché con la versión en vivo de ajax ... ¡listo!
JasonDavis
6

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.

Robin Drexler
fuente
¡bonito! Veo que tiene un RP para una nueva función reload () actualizada.
caesarsol
4

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.

Eugene Kulabuhov
fuente
Archivado ya :( apuntando a github.com/rubenspgcavalcante/webpack-extension-reloader que es un navegador cruzado, y aún está en desarrollo activo :)
con--
3

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.

RobertPitt
fuente
No sé qué versión estaba usando, pero como 16.0.912.63 m, Chrome vuelve a cargar todos los archivos automáticamente. Excepto el manifiesto.
Zequez
@Zequez: Los archivos no se vuelven a cargar para mí. :(
Randomblue
Tienes razón. Estaba desarrollando la página de Opciones, que llama a los scripts desde que retienen el documento y, por lo tanto, los vuelvo a cargar. Los scripts content_script no se
vuelven a
3

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.

Mattias Wadman
fuente
3

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

Johan Hoeksma
fuente
También puede usar la función de recarga en el navegador Acción para que se vuelva a cargar al hacer clic en el botón. stackoverflow.com/questions/30427908/…
powerd
Sí, puede cargar chrome.runtime.reload () en cualquier lugar. Yo uso: editor> ctrl + s> alt + tab> ctrl + m. Tener la consola background..js abierta. Es rápido, sin usar un mouse
Johan Hoeksma
2

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.

Antonio
fuente
2

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.

skylize
fuente
1

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

Aleksandar Toplek
fuente
1

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

ProDataLab
fuente
1

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 .

Es ma
fuente
1

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

Peter Driessen
fuente
0

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.

Oz Ramos
fuente
0

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.

yeahdixon
fuente
0

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

maelwyn
fuente
0

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.

Ian Dunn
fuente
-1

¡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

wukong
fuente
¿No me funciona? Si intento script.src = 'foo.js', busca una url relativa al sitio web actual. Si intento la ruta completa, obtengo: No se permite cargar el recurso local: 'archivo: ///../foo.js'
Jesse Aldridge
-2

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

Es ma
fuente
-4

No se puede hacer directamente. Lo siento.

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

Kinlan
fuente
1
Se puede hacer, esta no es una respuesta adecuada. Solo eche un vistazo a las otras respuestas y le dirán eso.
ICanKindOfCode