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


263

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.


2
Parece ser mais rápido quando a recarga é desencadeada a partir da interface do usuário habilitado em chrome: // flags / # enable-aplicativos de DevTool app
Eric

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.
Oz Ramos

Onde está o seu garfo LiveJS, @Oz Ramos?
Josh

Ah, entendo: seu link "LiveJS" é na verdade um link para o seu fork, não para o LiveJS.
21413 Josh

6
Isso não responde à pergunta conforme solicitado, mas quero mencionar que parei de querer isso (ou qualquer outra extensão auxiliar de carregamento de extensão) depois que percebi que posso recarregar facilmente uma extensão pressionando ctrl-R ou cmd-R ( dependendo do SO) na janela em segundo plano da extensão. Acho que isso se encaixa melhor no meu fluxo de trabalho do que qualquer outra coisa que já tentei e também evita o problema de recarregar automaticamente quando os arquivos estão em um estado inconsistente.
Don escotilha

Respostas:


162

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 .


3
Essa é a melhor solução até agora, mas ainda não facilita a atualização da extensão toda vez que eu modifico um arquivo que está usando, que é o que eu estava procurando idealmente.
Andrey Fedorov 10/10

2
Obrigado. Queria mencionar que eu uso o PhpStorm e que adicionei um botão da barra de ferramentas que chama chrome.exe com o URL "reload.extensions". Sempre que quero testar o código, pressiono esse botão e o Chrome aparece com o complemento atualizado.
Arik #

30
Uau, eu apenas consegui fazer com que o gruntjs funcionasse com este plugin usando o grunt-open para abrir http://reload.extensionsquando um arquivo é modificado. Agora ele age exatamente como o carregamento de fígado, mas com uma janela cromada irritante se abrindo cada vez que modifico um dos arquivos de plug-in especificados: P. Obrigado!
21713 GabriLeRoux

1
@GabLeRoux Eu vim aqui apenas para descobrir se alguém já fez isso. Ele funciona como um encanto.
Polkovnikov.ph

1
@AlexanderMills, infelizmente, não consegui fazer isso sem abrir uma nova guia a cada vez. Se você encontrar uma solução melhor. Pelo menos, pode-se recarregar plugins com o github.com/arikw/chrome-extensions-reloader
GabLeRoux

58

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


1
@trusktr A resposta de Scott apenas recarrega a página de segundo plano. No entanto, as duas respostas podem ser combinadas (resposta Scotts + extensão auxiliar), para que uma extensão seja recarregada automaticamente quando o arquivo de uma extensão for alterado. No entanto, recomendo contra essa prática, pois os devtools são fechados após o recarregamento da extensão. Costumo mexer com uma extensão de teste e salvo frequentemente minhas alterações, mesmo quando a sintaxe está incompleta. Isso travaria minha extensão, se um recarregamento automático real estiver ativado.
Rob W

@RobW Bom ponto. Costumo salvar no meio da escrita do código, para que o código definitivamente interrompa o plug-in em questão.
trusktr

1
@Sudarshan Você sugeriu usar chrome.i18n.getMessage("@@extension_id"). No entanto, isso retorna o extensionID da extensão atual , o que não é útil porque uma extensão não pode ser recarregada usando a managementAPI (após a desativação, não é possível ativar a extensão novamente).
Rob W

41

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" , ...]
...

para mim, essa solução só funcionou se eu escrevi chrome.runtime.reload () no script index.html, onde é especificado no arquivo de manifesto da seguinte maneira: ** "background": {"page": "index. html ", **. No meu arquivo js content_script, não consegui acessar esta função. Eu acredito, é para reseons de segurança.
titusfx

Seu script de conteúdo não pode falar com APIs do Chrome. Para que isso funcione você precisa para mensagens de uso
marcelocra

quando você liga chrome.runtime.reload(), o que realmente acontece? várias páginas / guias são atualizadas?
Alexander Mills

5
Eu estou supondo que devemos chamar a chrome.runtime.reload()partir do script de fundo
Alexander Mills

Trabalhou para mim. Graças
MikeMurko

39

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

3
Se você está procurando uma solução com sabor de gole, é isso.
ow3n

1
funcionou muito bem. Você já pensou em criar um pacote npm?
pixelearth 15/09/17

@pixelearth sim, por que não. Hmm, mas qual seria o caso de uso então? Você npm install crx-hotreloadestá no diretório da extensão e depois faz referência ao script como "scripts": ["./node_modules/crx-hotreload/hot-reload.js"]? Me corrija se eu estiver errado.
Vitaly Gordon

1
@MilfordCubicle Gostaria de sugerir a exportação de um objeto que possui um método que você poderia chamar no seu arquivo background.js. Então, algo import reloader from 'hot-reload'então no script reloader.check ()
pixelearth

3
A resposta precisa de mais votos. Também funciona bem em combinação com o Webpack --watch, porque você pode simplesmente colocá-lo na pasta de compilação, para que ele só seja atualizado após o término do processo de compilação. Não há plugins de comando pós-compilação Webpack complicados.
Rubinetti

10

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.


9

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)


7

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

Pode fazer, adicione: reloadOnChange (chrome.extension.getURL ('/ manifest.json'));
22412 Scott

Eu tentei pastebin.com/mXbSPkeu , mas a extensão não é atualizada (entradas de manifesto, script de conteúdo, ação do navegador) (Ubuntu 11.10, Chrome 18). O único arquivo atualizado é a página de plano de fundo (as console.logmensagens alteradas são exibidas).
23612 Rob Rob W

"observe os arquivos em busca de alterações e recarregue se forem detectadas alterações." Pela minha vida, não consigo ver como isso saberia que um arquivo mudou? Por favor, ajude-me a entender, pois parece incrível!
21416 JasonDavis

oo eu vejo agora, está armazenando uma cópia do conteúdo dos arquivos e comparando a versão em cache com a versão ao vivo do ajax ... inteligente!
precisa saber é o seguinte

6

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.


legais! Vejo que você tem um PR para uma nova função atualizada reload ().
caesarsol

4

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.


Já arquivado :( apontando para github.com/rubenspgcavalcante/webpack-extension-reloader, que é um navegador cruzado, e ainda está em desenvolvimento ativo :) :)
con--

3

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.


Não sei qual versão você estava usando, mas como 16.0.912.63 m, o Chrome recarrega todos os arquivos automaticamente. Exceto o manifesto.
Zequez

@Zequez: Os arquivos não são recarregados para mim. :(
Randomblue

Você está certo. Eu estava desenvolvendo a página Opções, que chama os scripts de dentro do documento e, portanto, os recarrega. Os scripts content_script não são recarregados = /
Zequez 30/01

3

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.


3

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


Você também pode usar a função recarregar no browserAction para que ela seja recarregada com o clique do botão. stackoverflow.com/questions/30427908/…
powerd

Sim, você pode carregar chrome.runtime.reload () em qualquer lugar. Eu uso: editor> ctrl + s> alt + tab> ctrl + m. Tendo o background..js do console aberto. É rápido, sem o uso de um mouse
Johan Hoeksma 13/06/19

2

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.


2

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.



1

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


1

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


1

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 .


1

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


0

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.


0

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.


0

É 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


0

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.



-1

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


Não está trabalhando para mim? Se eu tentar script.src = 'foo.js', ele procurará um URL em relação ao site atual. Se eu tentar o caminho completo, obtenho: Não é permitido carregar o recurso local: 'file: ///../foo.js'
Jesse Aldridge

-2

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


-4

Não pode ser feito diretamente. Desculpe.

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


1
Isso pode ser feito, essa não é uma resposta adequada. Basta dar uma olhada nas outras respostas e elas lhe dirão isso.
ICanKindOfCode
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.