Comment inclure un fichier ou une bibliothèque JavaScript dans la console Chrome?

Existe-t-il un moyen plus simple (natif peut-être?) D'inclure un fichier de script externe dans le navigateur Google Chrome?

Actuellement, je le fais comme ceci:

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

appendChild() est une manière plus native:

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

Utilisez-vous un framework AJAX? En utilisant jQuery, ce serait:

$.getScript('script.js');

Si vous n'utilisez aucun framework, voyez la réponse de Harmen.

(Peut-être que cela ne vaut pas la peine d'utiliser jQuery juste pour faire cette chose simple ( ou peut-être que c'est le cas ) mais si vous l'avez déjà chargé, vous pourriez aussi bien l'utiliser. J'ai vu des sites Web qui ont jQuery chargé par exemple avec Bootstrap mais toujours utiliser l'API DOM directement d'une manière qui n'est pas toujours portable, au lieu d'utiliser le jQuery déjà chargé pour cela, et beaucoup de gens ne sont pas conscients du fait que même getElementById()ne fonctionne pas de manière cohérente sur tous les navigateurs - voir cette réponse pour plus de détails. )

METTRE À JOUR:

Cela fait des années que j'ai écrit cette réponse et je pense qu'il vaut la peine de souligner ici qu'aujourd'hui vous pouvez utiliser:

• SystemJS
• ModuleLoader
• jspm.io

pour charger dynamiquement des scripts. Ceux-ci peuvent être pertinents pour les personnes qui lisent cette question.

Voir aussi: La conférence Fluent 2014 de Guy Bedford: Workflows pratiques pour les modules ES6 .

Dans les navigateurs modernes, vous pouvez utiliser la récupération pour télécharger la ressource ( documents Mozilla ), puis l'évaluation pour l'exécuter.

Par exemple, pour télécharger Angular1, vous devez taper:

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

Dans Chrome, votre meilleure option pourrait être l'onglet Extraits de code sous Sources dans les outils de développement.

Il vous permettra d'écrire et d'exécuter du code, par exemple, dans une page about: blank.

Plus d'informations ici: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Pour faire suite à la réponse de @ maciej-bukowski ci - dessus ^^^ , dans les navigateurs modernes (printemps 2017) qui prennent en charge async / attente, vous pouvez charger comme suit. Dans cet exemple, nous chargeons la bibliothèque de chargement 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);

Si vous exécutez l'extrait de code puis ouvrez la console de votre navigateur, la fonction html2canvas () devrait maintenant être définie.

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

Si quelqu'un ne parvient pas à se charger parce que le script hes viole le script-src "Content Security Policy" ou "parce unsafe-eval 'n'est pas autorisé", je vous conseillerai d'utiliser mon joli petit module-injecteur comme extrait de dev-tools, alors vous pourrez charger comme ceci:

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>

cette solution fonctionne car:

1. Il charge la bibliothèque dans xhr - ce qui autorise CORS à partir de la console et évite la politique script-src.
2. Il utilise l' option synchrone de xhr qui vous permet de rester dans le contexte de la console / de l'extrait de code, vous aurez donc la permission d'évaluer le script et de ne pas être traité comme un eval non sécurisé.

J'utilise ceci pour charger un objet knockout ko dans la console

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

ou héberger localement

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

Installez tampermonkey et ajoutez le UserScript suivant avec un (ou plusieurs) @matchavec une URL de page spécifique (ou une correspondance de toutes les pages :)https://* par exemple:

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

})();

Chaque fois que vous avez besoin de la bibliothèque sur la console ou sur un extrait, activez le script UserScript spécifique et actualisez-le.

Cette solution empêche la pollution de l'espace de noms . Vous pouvez utiliser des espaces de noms personnalisés pour éviter d'écraser accidentellement les variables globales existantes sur la page.