Jak dołączyć plik JavaScript lub bibliotekę do konsoli Chrome?

Czy istnieje prostszy (może natywny?) Sposób włączenia zewnętrznego pliku skryptu w przeglądarce Google Chrome?

Obecnie robię to tak:

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

appendChild() jest bardziej rodzimy sposób:

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

Czy korzystasz z frameworku AJAX? Przy użyciu jQuery byłoby to:

$.getScript('script.js');

Jeśli nie używasz żadnego frameworka, zobacz odpowiedź Harmena.

(Być może nie warto używać jQuery tylko po to, aby zrobić jedną prostą rzecz ( a może jest ), ale jeśli już go masz, możesz go również użyć. Widziałem strony internetowe, które mają załadowane jQuery, np. Z Bootstrap, ale nadal używaj DOM API bezpośrednio w sposób, który nie zawsze jest przenośny, zamiast używać do tego już załadowanego jQuery, a wiele osób nie zdaje sobie sprawy z faktu, że nawet getElementById()nie działa konsekwentnie na wszystkich przeglądarkach - zobacz tę odpowiedź aby uzyskać szczegółowe informacje. )

AKTUALIZACJA:

Minęły lata odkąd napisałem tę odpowiedź i myślę, że warto tutaj wskazać, że dziś możesz użyć:

• SystemJS
• Moduł ładujący
• jspm.io

aby dynamicznie ładować skrypty. Mogą one dotyczyć osób czytających to pytanie.

Zobacz także: Dyskusja płynnego 2014 Guya Bedforda: Praktyczne przepływy pracy dla modułów ES6 .

W nowoczesnych przeglądarkach możesz użyć pobierania, aby pobrać zasób ( dokumenty Mozilli ), a następnie eval, aby go uruchomić.

Na przykład, aby pobrać Angular1, musisz wpisać:

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

W chrome najlepszą opcją może być karta Snippets w sekcji Źródła w Narzędziach programisty.

Umożliwi Ci pisanie i uruchamianie kodu, na przykład na pustej stronie about:.

Więcej informacji tutaj: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=pl

Jako kontynuacja odpowiedzi @ maciej-bukowski powyżej ^^^ , w nowoczesnych przeglądarkach od teraz (wiosna 2017), które obsługują asynchronizację / czekaj, możesz załadować w następujący sposób. W tym przykładzie ładujemy bibliotekę html2canvas ładowania:

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

Jeśli uruchomisz fragment kodu, a następnie otworzysz konsolę przeglądarki, powinieneś zobaczyć, że funkcja html2canvas () jest teraz zdefiniowana.

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

Jeśli ktoś nie załaduje się, ponieważ jego skrypt narusza skrypt-src „Zasady bezpieczeństwa treści” lub „ponieważ niebezpieczne-eval” nie jest dozwolone ”, radzę używać mojego dość małego modułu-inżektora jako fragmentu narzędzi programistycznych, wtedy będziesz mógł załadować w ten sposób:

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>

to rozwiązanie działa, ponieważ:

1. Ładuje bibliotekę w xhr - co pozwala CORS z konsoli i pozwala uniknąć polityki skrypt-src.
2. Używa opcji synchronicznej xhr, która pozwala pozostać w kontekście konsoli / fragmentu kodu, dzięki czemu będziesz mieć pozwolenie na ewaluację skryptu i nie będziesz traktowany jako ewaluacja niebezpieczna.

Używam tego, aby załadować obiekt nokaut ko w konsoli

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

lub host lokalnie

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

Zainstaluj tampermonkey i dodaj następujący skrypt użytkownika z jednym (lub więcej) @matchokreślonym adresem URL strony (lub dopasowaniem wszystkich stron :) https://*np .:

// ==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;

})();

Ilekroć potrzebujesz biblioteki na konsoli lub we fragmencie, włącz określony UserScript i odśwież.

To rozwiązanie zapobiega zanieczyszczeniu przestrzeni nazw . Możesz użyć niestandardowych przestrzeni nazw, aby uniknąć przypadkowego zastąpienia istniejących zmiennych globalnych na stronie.