Como recarregar automaticamente uma extensão do Chrome que estou desenvolvendo?

Gostaria que minha extensão do Chrome fosse recarregada toda vez que eu salvar um arquivo na pasta de extensão, sem ter que clicar explicitamente em "recarregar" no chrome: // extensions /. Isso é possível?

Editar: estou ciente de que posso atualizar o intervalo no qual o Chrome recarrega as extensões, o que é uma solução intermediária, mas prefiro fazer meu editor (emacs ou textmate) disparar ao salvar uma recarga ou pedir ao Chrome para monitorar o diretório para alterações.

Você pode usar o " Extensions Reloader " para Chrome:

Recarrega todas as extensões descompactadas usando o botão da barra de ferramentas da extensão ou navegando até " http: //reload.extensions "

Se você já desenvolveu uma extensão do Chrome, pode querer automatizar o processo de recarregar sua extensão descompactada sem a necessidade de acessar a página de extensões.

O "Extensions Reloader" permite recarregar todas as extensões descompactadas usando 2 maneiras:

1 - O botão da barra de ferramentas da extensão.

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

O ícone da barra de ferramentas recarregará extensões descompactadas usando um único clique.

O "recarregar pela navegação" destina-se a automatizar o processo de recarregamento usando scripts "pós-compilação" - basta adicionar uma navegação em " http: //reload.extensions " usando o Chrome ao seu script e você terá uma janela atualizada do Chrome.

Atualização: a partir de 14 de janeiro de 2015, a extensão é de código aberto e está disponível no GitHub .

Atualização : adicionei uma página de opções para que você não precise mais localizar e editar manualmente o ID da extensão. O CRX e o código-fonte estão em: https://github.com/Rob--W/Chrome-Extension-Reloader
Atualização 2: Adicionado atalho (consulte meu repositório no Github).
_{O código original, que inclui a funcionalidade básica, é mostrado abaixo .}

Crie uma extensão e use o método Ação do Navegador em conjunto com ochrome.extension.management API para recarregar sua extensão descompactada.

O código abaixo adiciona um botão ao Chrome, que recarrega uma extensão ao clicar.

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: Escolha qualquer ícone legal de 48 x 48, por exemplo:

em qualquer função ou evento

chrome.runtime.reload();

recarregará sua extensão ( documentos ). Você também precisa alterar o arquivo manifest.json , adicionando:

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

Criei um script embutido simples para recarregar a quente:

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

Ele procura alterações de arquivo no diretório de uma extensão. Quando uma alteração é detectada, ela recarrega a extensão e atualiza a guia ativa (para disparar novamente os scripts de conteúdo atualizados).

• Funciona verificando timestamps de arquivos
• Suporta diretórios aninhados
• Desativa-se automaticamente na configuração de produção

Outra solução seria criar o 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();
    }
  }
};

Esse script se conecta ao servidor de carregamento de fígado usando websockets. Em seguida, emitirá uma chamada chrome.runtime.reload () ao recarregar a mensagem de livereload. O próximo passo seria adicionar esse script para executar como script em segundo plano no manifest.json e pronto!

Nota: esta não é a minha solução. Estou apenas postando. Encontrei-o no código gerado do gerador de extensão do Chrome (ótima ferramenta!). Estou postando isso aqui porque pode ajudar.

As extensões do Chrome têm um sistema de permissão que não seria permitido (algumas pessoas no SO tiveram o mesmo problema que você ), portanto, solicitar que "adicione esse recurso" não funcionará na IMO. Há um e-mail dos Grupos do Google das extensões do Chromium com uma solução proposta (teoria) usando chrome.extension.getViews(), mas também não é garantido que funcione.

Se fosse possível adicionar a manifest.jsonalgumas páginas internas do Chrome chrome://extensions/, seria possível criar um plug-in que interagisse com a Reloadâncora e, usando um programa externo como o XRefresh (um plug-in do Firefox - existe uma versão do Chrome usando Ruby e WebSocket ), você alcançaria exatamente o que precisa:

O XRefresh é um plug-in do navegador que atualiza a página da Web atual devido à alteração do arquivo nas pastas selecionadas. Isso possibilita a edição de páginas ao vivo com seu editor HTML / CSS favorito.

Não é possível, mas acho que você pode usar esse mesmo conceito de uma maneira diferente.

Você poderia tentar encontrar soluções de terceiros que, depois de ver modificações em um arquivo (não conheço o emacs nem o Textmate, mas no Emacs seria possível vincular uma chamada de aplicativo a uma ação "salvar arquivo"), apenas clica em uma coordenada específica de uma aplicação específica: nesse caso, é o Reload âncora da sua extensão em desenvolvimento (você deixa uma janela do Chrome aberta apenas para essa recarga).

(Louco como o inferno, mas pode funcionar)

Aqui está uma função que você pode usar para monitorar arquivos em busca de alterações e recarregar se forem detectadas alterações. Ele funciona pesquisando-os via AJAX e recarregando-os através de window.location.reload (). Suponho que você não deve usar isso em um pacote de distribuição.

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'));

Talvez eu esteja um pouco atrasado para a festa, mas resolvi isso para mim criando https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

Ele funciona recarregando a chrome://extensionspágina, sempre que os file.changeeventos são recebidos via websockets.

Um exemplo baseado em Gulp de como emitir file.changeevento após alterações de arquivo em uma pasta de extensão pode ser encontrado aqui: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

Por que recarregar a guia inteira em vez de apenas usar a API de gerenciamento de extensões para recarregar / reativar as extensões? Atualmente, desabilitar e habilitar extensões novamente faz com que qualquer janela de inspeção aberta (log do console etc.) seja fechada, o que eu achei muito irritante durante o desenvolvimento ativo.

Existe um plug-in de recarga automática se você estiver desenvolvendo usando o webpack: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

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

plugins: [
    new ChromeExtensionReloader()
]

Também vem com uma ferramenta CLI, se você não deseja modificar o webpack.config.js:

npx wcer

Nota: é necessário um script em segundo plano (vazio), mesmo que você não precise, porque é aí que ele injeta o código de recarga.

Seus arquivos de conteúdo, como html e manifest, não podem ser alterados sem a instalação da extensão, mas acredito que os arquivos JavaScript sejam carregados dinamicamente até que a extensão seja compactada.

Eu sei disso por causa de um projeto atual que estou trabalhando na API de extensões do Chrome e parece carregar sempre que atualizo uma página.

Talvez uma resposta um pouco tarde, mas acho que o crxreload pode funcionar para você. É o resultado de tentar ter um fluxo de trabalho de recarregar e salvar durante o desenvolvimento.

Estou usando um atalho para recarregar. Não quero recarregar o tempo todo quando eu salvar um arquivo

Portanto, minha abordagem é leve e você pode deixar a função recarregar em

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();
    }
})

Agora pressione Ctrl + M no navegador Chrome para recarregar

Use npm initpara criar um package.json na raiz do diretório e, em seguida,

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

então crie um gulpfile.js

que se parece com:

/* 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"}));
});

Isso funciona para mim, desenvolvendo com o CrossRider. Você pode mudar o caminho em que assiste os arquivos, assumindo também que você possui o npm e o nó instalados.

Isenção de responsabilidade: eu mesmo desenvolvi esta extensão.

Clerc - para cliente de recarga de extensão ao vivo do Chrome

Conecte-se a um servidor compatível com LiveReload para recarregar automaticamente sua extensão sempre que salvar.

Bônus: com um pouco de trabalho extra de sua parte, você também pode recarregar automaticamente as páginas da Web que sua extensão altera.

A maioria dos desenvolvedores de páginas da Web usa um sistema de compilação com algum tipo de observador que cria automaticamente seus arquivos, reinicia o servidor e recarrega o site.

O desenvolvimento de extensões não precisa ser tão diferente. O Clerc traz essa mesma automação para os desenvolvedores do Chrome. Configure um sistema de compilação com um servidor LiveReload e o Clerc ouvirá eventos de recarregamento para atualizar sua extensão.

A única grande pegadinha são as alterações no manifest.json. Quaisquer pequenos erros de digitação no manifesto provavelmente causarão novas tentativas de recarga, e você ficará preso ao desinstalar / reinstalar sua extensão para que as alterações sejam carregadas novamente.

O Clerc encaminha a mensagem de recarregamento completa para o seu ramal após o recarregamento, para que você possa opcionalmente usar a mensagem fornecida para acionar outras etapas de atualização.

Os grandes caras do mozilla acabaram de lançar um novo https://github.com/mozilla/web-ext que você pode usar para iniciarweb-ext run --target chromium

Graças a @GmonC e @Arik e a algum tempo livre, consigo fazer com que isso funcione. Eu tive que mudar dois arquivos para fazer isso funcionar.

(1) Instale o LiveReload e a extensão do Chrome para esse aplicativo. Isso chamará algum script na alteração do arquivo.

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

(3) mude a linha #509para

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

(4) Agora instale outra extensão Extensions Reloaderque possui um manipulador de links útil que recarrega todas as extensões de desenvolvimento ao navegar para"http://reload.extensions"

(5) Agora mude a extensão background.min.jsdessa maneira

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

substituir com

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

Abra o aplicativo LiveReload, oculte o botão Extension Reloader e ative a extensão LiveReload clicando no botão na barra de ferramentas. Agora você recarregará a página e as extensões em cada alteração de arquivo enquanto usa todos os outros brindes do LiveReload (atualização de css, atualização de imagem etc.)

A única coisa ruim é que você terá que repetir o procedimento de alteração de scripts em todas as atualizações de extensão. Para evitar atualizações, adicione a extensão como descompactada.

Quando tiver mais tempo para mexer com isso, provavelmente criarei extensões que eliminam a necessidade de ambas as extensões.

Até então, estou trabalhando na minha extensão Projext Axeman

Acabei de encontrar um grunhido newish projeto baseado em que fornece bootstrapping, andaimes, algumas faculdades de pré-processamento automatizado e recarga automática (nenhuma interação é necessária).

Inicialize sua extensão do Chrome no Websecurify

Se você possui um Mac, a maneira mais fácil é usar o Alfred App!

Basta obter o Alfred App com o Powerpack , adicionar o fluxo de trabalho fornecido no link abaixo e personalizar a tecla de atalho desejada (eu gosto de usar ⌘ + ⌥ + R). Isso é tudo.

Agora, sempre que você usar a tecla de atalho, o Google Chrome será recarregado, independentemente do aplicativo em que você está naquele momento.

Se você deseja usar outro navegador, abra o AppleScript nos fluxos de trabalho do Alfred Preferences e substitua "Google Chrome" por "Firefox", "Safari", ...

Também mostrarei aqui o conteúdo do script / usr / bin / osascript usado no arquivo ReloadChrome.alfredworkflow para que você possa ver o que está fazendo.

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

O arquivo do fluxo de trabalho é ReloadChrome.alfredworkflow .

Quero recarregar (atualizar) minhas extensões da noite para o dia, é isso que uso em 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);

Atenciosamente, Peter

Eu bifurcada LiveJS para permitir a recarga ao vivo de Aplicativos empacotados. Basta incluir o arquivo no seu aplicativo e toda vez que você salvar um arquivo, o aplicativo será carregado automaticamente.

Conforme mencionado nos documentos: a seguinte linha de comando recarregará um aplicativo

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

então eu apenas criei um script de shell e chamei esse arquivo do gulp. Super simples:

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);
    }
);});

execute os comandos watch necessários nos scripts e chame a tarefa de recarregar quando desejar. Limpo, simples.

É aqui que softwares como o AutoIt ou alternativas brilham. A chave é escrever um script que emula sua fase de teste atual. Acostume-se a usar pelo menos uma delas, pois muitas tecnologias não vêm com caminhos claros de fluxo de trabalho / teste.

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, você altera o código para atender às suas necessidades de teste / iteração. Certifique-se de que os cliques na guia sejam verdadeiros onde a tag âncora está no site chrome: // extensions. Você também pode usar em relação aos movimentos do mouse na janela e outras macros.

Eu adicionaria o script ao Vim de uma maneira semelhante a esta:

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

Isso significa que, quando estou no Vim, pressiono o botão acima de ENTER (geralmente responsável por: | e \), conhecido como botão líder, e o sigo com uma letra maiúscula 'A', que salva e inicia o script da fase de teste.

Certifique-se de preencher as seções {input ...} no script Vim / hotkey acima, de forma apropriada.

Muitos editores permitirão que você faça algo semelhante com as teclas de atalho.

Alternativas ao AutoIt podem ser encontradas aqui .

Para Windows: AutoHotkey

Para Linux: xdotool, xbindkeys

Para Mac: Automator

Eu desenvolvo principalmente no Firefox, onde web-ext runrecarrega automaticamente a extensão após a alteração dos arquivos. Depois que estiver pronto, faço uma rodada final de testes no Chrome para garantir que não haja problemas que não apareceram no Firefox.

No entanto, se você deseja desenvolver principalmente no Chrome e não deseja instalar extensões de terceiros, outra opção é criar um test.htmlarquivo na pasta da extensão e adicionar vários SSCCEs a ela. Esse arquivo usa uma <script>tag normal para injetar o script de extensão.

Você pode usá-lo em 95% dos testes e recarregar manualmente a extensão quando desejar testá-la em sites ativos.

Isso não reproduz de forma idêntica o ambiente em que uma extensão é executada, mas é bom o suficiente para muitas coisas simples.

O autor recomendou a próxima versão desse plug-in do webpack: https://github.com/rubenspgcavalcante/webpack-extension-reloader . Funciona muito bem para mim.

Sim, você pode fazer isso indiretamente! Aqui está a minha solução.

Em manifest.json

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

No 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);
})();

Seu script injetado pode injetar outro script em qualquer local.

Outro benefício dessa técnica é que você pode simplesmente ignorar a limitação do mundo isolado . consulte o ambiente de execução do script de conteúdo

BROWSER-SYNC

Usando o incrível Browser-Sync

• atualizar navegadores (qualquer) quando o código-fonte for alterado (HTML, CSS, imagens, etc.)
• suporta Windows, MacOS e Linux
• você pode assistir suas atualizações de código (ao vivo) usando seus dispositivos móveis

Instalação no MacOS (veja a ajuda deles para instalar em outro sistema operacional)

Instale o NVM, para que você possa experimentar qualquer versão do 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

Como usar a sincronização do navegador para sites estáticos

Vamos ver dois exemplos:

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

A --serveropção permite executar um servidor local em qualquer lugar do terminal e --filesespecificar quais arquivos serão rastreados para alterações. Eu prefiro ser mais específico para os arquivos rastreados, portanto, no segundo exemplo, uso ackpara listar extensões de arquivos específicas (é importante que esses arquivos não tenham nomes de arquivos com espaços) e também ipconfigpara encontrar meu IP atual no MacOS.

Como usar a sincronização do navegador para sites dinâmicos

Caso você esteja usando PHP, Rails, etc., você já possui um servidor em execução, mas ele não é atualizado automaticamente quando você faz alterações no seu código. Então você precisa usar o--proxy opção para permitir que a sincronização do navegador saiba onde está o host desse 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

No exemplo acima, eu já tenho um aplicativo Rails em execução no meu navegador em 192.168.33.12:3000 . Realmente é executado em uma VM usando uma caixa Vagrant, mas eu poderia acessar a máquina virtual usando a porta 3000 nesse host. Eu gosto --no-notifyde parar a sincronização do navegador, enviando-me um alerta de notificação no navegador toda vez que altero meu código e --no-openinterromper o comportamento da sincronização do navegador que carrega imediatamente uma guia do navegador quando o servidor é iniciado.

IMPORTANTE: Caso esteja usando o Rails, evite usar o Turbolinks no desenvolvimento, caso contrário você não poderá clicar nos seus links enquanto estiver usando a --proxyopção.

Espero que seja útil para alguém. Eu tentei muitos truques para atualizar o navegador (até mesmo um post antigo que enviei sobre essa questão do StackOverflow usando o AlfredApp há algum tempo), mas esse é realmente o caminho a seguir; não há mais hacks, apenas flui.

CRÉDITO: Inicie um servidor da Web de recarga ao vivo local com um comando

Não pode ser feito diretamente. Desculpe.

Se você deseja vê-lo como um recurso, pode solicitá-lo em http://crbug.com/new