Como incluir arquivo ou biblioteca JavaScript no console do Chrome?

Existe uma maneira mais simples (nativa, talvez?) De incluir um arquivo de script externo no navegador Google Chrome?

Atualmente estou fazendo assim:

document.head.innerHTML += '<script src="http://example.com/file.js"></script>';

appendChild() é uma maneira mais nativa:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);

Você usa alguma estrutura AJAX? Usando jQuery, seria:

$.getScript('script.js');

Se você não estiver usando nenhuma estrutura, veja a resposta de Harmen.

(Talvez não valha a pena usar o jQuery apenas para fazer uma coisa simples ( ou talvez seja ), mas se você já o carregou, também pode usá-lo. Vi sites que têm o jQuery carregado, por exemplo, com o Bootstrap, mas ainda assim use a API DOM diretamente de uma maneira que nem sempre é portátil, em vez de usar o jQuery já carregado para isso, e muitas pessoas não sabem que nem sequer getElementById()funciona de maneira consistente em todos os navegadores - consulte esta resposta para obter detalhes. )

ATUALIZAR:

Faz anos desde que escrevi esta resposta e acho que vale a pena destacar aqui que hoje você pode usar:

• SystemJS
• ModuleLoader
• jspm.io

carregar scripts dinamicamente. Isso pode ser relevante para as pessoas que estão lendo esta pergunta.

Veja também: A conversa fluente de 2014 de Guy Bedford: Fluxos de trabalho práticos para os módulos ES6 .

Nos navegadores modernos, você pode usar a busca para baixar o recurso ( Mozilla docs ) e depois avaliar para executá-lo.

Por exemplo, para baixar o Angular1, você precisa digitar:

fetch('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js')
    .then(response => response.text())
    .then(text => eval(text))
    .then(() => { /* now you can use your library */ })

No chrome, sua melhor opção pode ser a guia Snippets em Origens nas Ferramentas do desenvolvedor.

Isso permitirá que você escreva e execute o código, por exemplo, em uma página em branco about:.

Mais informações aqui: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Como acompanhamento da resposta de @ maciej-bukowski acima ^^^ , nos navegadores modernos a partir de agora (primavera de 2017) que suportam async / wait, você pode carregar da seguinte maneira. Neste exemplo, carregamos a biblioteca load html2canvas:

async function loadScript(url) {
  let response = await fetch(url);
  let script = await response.text();
  eval(script);
}

let scriptUrl = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'
loadScript(scriptUrl);

Se você executar o snippet e abrir o console do navegador, deverá ver a função html2canvas () agora definida.

var el = document.createElement("script"),
loaded = false;
el.onload = el.onreadystatechange = function () {
  if ((el.readyState && el.readyState !== "complete" && el.readyState !== "loaded") || loaded) {
    return false;
  }
  el.onload = el.onreadystatechange = null;
  loaded = true;
  // done!
};
el.async = true;
el.src = path;
var hhead = document.getElementsByTagName('head')[0];
hhead.insertBefore(el, hhead.firstChild);

Se alguém falhar ao carregar porque o script hes viola o script-src "Política de segurança de conteúdo" ou "porque a segurança não é permitida", aconselharei o uso do meu injetor de módulo muito pequeno como um snippet de ferramentas de desenvolvimento, então você poderá carregar assim:

imports('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js')
  .then(()=>alert(`today is ${moment().format('dddd')}`));

<script src="https://raw.githack.com/shmuelf/PowerJS/master/src/power-moduleInjector.js"></script>

esta solução funciona porque:

1. Carrega a biblioteca no xhr - o que permite o CORS do console e evita a política script-src.
2. Ele usa a opção síncrona do xhr, que permite que você permaneça no contexto do console / snippet, assim você terá a permissão para avaliar o script e não ser tratado como uma avaliação insegura.

Eu uso isso para carregar o objeto nocaute ko no console

document.write("<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-3.5.0.debug.js'></script>");

ou hospede localmente

document.write("<script src='http://localhost/js/knockout-3.5.0.debug.js'></script>");

Instale tampermonkey e adicione o seguinte UserScript a um (ou mais) @matchURL de página específico (ou a uma correspondência de todas as páginas :), https://*por exemplo:

// ==UserScript==
// @name         inject-rx
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Inject rx library on the page
// @author       Me
// @match        https://www.some-website.com/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
     window.injectedRx = rxjs;
     //Or even:  window.rxjs = rxjs;

})();

Sempre que você precisar da biblioteca no console ou em um snippet, ative o UserScript específico e atualize.

Esta solução evita a poluição do espaço para nome . Você pode usar espaços para nome personalizados para evitar a substituição acidental de variáveis ​​globais existentes na página.