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

221

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>';
technocake
źródło
6
Czy chcesz, aby szybkie rozwiązanie zawierało plik na losowej stronie internetowej, na której otworzyłeś Narzędzia dla programistów?
Christian Tellnes,
7
Zrobiłem dodatek, aby to zrobić: pobierz ze sklepu Google
w00d
Używam tego, aby załadować nokaut w konsoli document.write ("<script src = ' cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/… )
Deepak Vishwakarma
Niestety nie ma możliwości załadowania lokalnego pliku javascript do konsoli, Chrome nie zezwala na użycie plików lokalnych.
Shayan

Odpowiedzi:

243

appendChild() jest bardziej rodzimy sposób:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);
Harmen
źródło
15
Aby rozszerzyć odpowiedź Harmana, owinąłem ją wokół funkcji JS i używam jej w następujący sposób ... var _loadScript = function (path) {var script = document.createElement ('script'); script.type = 'text / javascript'; script.src = ścieżka; document.head.appendChild (skrypt); } _loadScript (' documentcloud.github.com/underscore/underscore-min.js' ); _loadScript (' backbonejs.org/backbone-min.js' );
Ajay Bhosale
Dostałem:TypeError: Property 'appendChild' of object #<HTMLHeadElement> is not a function
Muhammad Hewedy
1
Ajay, dziękuję, ale masz kilka błędów składniowych. skopiuj / wklej poniższy tekst, aby mieć podkreślenie w konsoli. Lub zamień na inne lib var _loadScript = function (path) {var script = document.createElement ('script'); script.type = 'text / javascript'; script.src = ścieżka; document.head.appendChild (skrypt); }; _loadScript (' underscorejs.org/underscore-min.js' );
TPAKTOPA
Dzięki! Użyłem script.innerHTML = javascript_code</code>, aby wstrzyknąć bezpośredni kod javascript
Jonathan_Ng,
91

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ć:

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 .

rsp
źródło
Z jakiego folderu zostanie załadowany skrypt?
Qwerty
4
Jeśli użyjesz go w podobny sposób $.getScript('script.js');lub $.getScript('../scripts/script.js');w stosunku do dokumentu, ale może również ładować bezwzględne adresy URL, np. $.getScript('https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js');
rsp
jeśli używasz jquery, możesz zrobić bookmarklet, aby zainstalować jquery na stronie, superuser.com/questions/1460015/…
barlop
38

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 */ })
Maciej Bukowski
źródło
1
Najnowsza przeglądarka nie zezwala na korzystanie evalz następującego komunikatu: VM1929:11 Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".
Vassilis,
2
@Vassilis Po sprawdzeniu tego fragment kodu nadal działa w przeglądarce Chrome Canary (64.0.3241.0).
Maciej Bukowski
2
Myślę, że problem Vassilis polega na tym, że w aplikacji, której używa, obowiązują zasady bezpieczeństwa zawartości. Chrome też działa dla mnie.
Solomons_Ecclesiastes
1
@Vassilis skorzystaj z mojej odpowiedzi poniżej ( stackoverflow.com/a/57814219/6553339 ), aby uniknąć tego błędu
shmulik friedman 11.09.19
16

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

atirado
źródło
6
Chociaż teoretycznie może to odpowiedzieć na pytanie, lepiej byłoby zawrzeć tutaj istotne części odpowiedzi i podać odnośnik.
Enamul Hassan
2
Myślałem, że moje pierwsze dwa wiersze były zasadniczą częścią odpowiedzi. Opisują dokładnie, jak dostać się do fragmentów w Chrome. Następnie uzupełniłem dokumentację Google.
atirado
Tak, osobiście uważam, że jest to najlepsza odpowiedź, ponieważ pokazuje także programistom i łatwy sposób na zapisanie i uruchomienie dowolnego javascript na bieżącej stronie ... fajnie!
Brad Parks,
16

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.

jbustamovej
źródło
2
Polityka bezpieczeństwa uniemożliwia to działanie, przynajmniej na stronie nowej karty Chrome od wersji 66. Nieprzechwycony (w obietnicy) EvalError: Odmówiono oceny ciągu jako JavaScript, ponieważ „niebezpieczne-eval” nie jest dozwolonym źródłem skryptu w poniższym Dyrektywa w sprawie polityki bezpieczeństwa treści: „script-src 'strict-dynamic” ...
Tatsh
@Tatsh użyj mojej odpowiedzi, aby uniknąć błędu ( stackoverflow.com/a/57814219/6553339 )
shmulik friedman
6
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);
xiao 啸
źródło
4

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.
Shmulik Friedman
źródło
Dla mnie to nie działa: odmówiono załadowania skryptu „ raw.githack.com/shmuelf/PowerJS/master/src/… ”, ponieważ narusza następującą dyrektywę dotyczącą polityki bezpieczeństwa treści: „script-src ...
ThomasRones
1

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>");
Deepak Vishwakarma
źródło
0

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.

Jannis Ioannou
źródło