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

221

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>';
technocake
la source
6
Vous voulez dire que vous voulez une solution rapide pour inclure un fichier sur une page Web aléatoire où vous avez ouvert les outils de développement?
Christian Tellnes
7
J'ai fait un add-on pour le faire: télécharger de google store
w00d
2
doublon possible de Load javascript via la console Firebug
gak
Je l'utilise pour charger le knockout dans la console document.write ("<script src = ' cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/… )
Deepak Vishwakarma
Malheureusement, il n'y a aucun moyen de charger un fichier javascript local sur la console, Chrome ne permettra pas l'utilisation de fichiers locaux.
Shayan

Réponses:

243

appendChild() est une manière plus native:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);
Harmen
la source
15
Pour étendre la réponse de Harman, je l'ai enveloppée autour d'une fonction JS et je l'utilise comme suit ... var _loadScript = function (path) {var script = document.createElement ('script'); script.type = 'text / javascript'; script.src = chemin; document.head.appendChild (script); } _loadScript (' documentcloud.github.com/underscore/underscore-min.js' ); _loadScript (' backbonejs.org/backbone-min.js' );
Ajay Bhosale
J'ai eu:TypeError: Property 'appendChild' of object #<HTMLHeadElement> is not a function
Muhammad Hewedy
1
Ajay, merci, mais vous avez quelques erreurs de syntaxe. copiez / collez le texte ci-dessous, pour avoir un soulignement dans la console. Ou remplacez par une autre lib var _loadScript = fonction (chemin) {var script = document.createElement ('script'); script.type = 'text / javascript'; script.src = chemin; document.head.appendChild (script); }; _loadScript (' underscorejs.org/underscore-min.js' );
TPAKTOPA
Merci! J'ai utilisé script.innerHTML = javascript_code</code> pour injecter du code javascript direct
Jonathan_Ng
91

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:

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 .

rsp
la source
De quel dossier va-t-il charger le script?
Qwerty
4
Si vous l'utilisez comme $.getScript('script.js');ou $.getScript('../scripts/script.js');alors il est relatif au document mais il peut aussi charger des URL absolues, par exemple. $.getScript('https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js');
rsp
si vous utilisez jquery, vous pouvez créer un bookmarklet pour installer jquery sur la page, superuser.com/questions/1460015/…
barlop
38

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 */ })
Maciej Bukowski
la source
1
Le dernier Chrome interdit l'utilisation de eval, avec le message suivant: 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 J'ai vérifié cela et l'extrait fonctionne toujours dans Chrome Canary (64.0.3241.0).
Maciej Bukowski
2
Je pense que le problème de Vassilis est dû au fait qu'il existe une politique de sécurité du contenu sur l'application qu'il utilise. Chrome fonctionne aussi pour moi.
Solomons_Ecclesiastes
1
@Vassilis utilise ma réponse ci-dessous ( stackoverflow.com/a/57814219/6553339 ) pour éviter cette erreur
shmulik friedman
16

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

atirado
la source
6
Bien que cela puisse théoriquement répondre à la question, il serait préférable d'inclure ici les parties essentielles de la réponse et de fournir le lien de référence.
Enamul Hassan
2
Je pensais que mes deux premières lignes étaient la partie essentielle de la réponse. Ils décrivent exactement comment accéder aux extraits de code dans Chrome. Ensuite, j'ai complété avec la documentation de Google.
atirado
Oui, personnellement, je pense que c'est la meilleure réponse, car elle montre également les développeurs et un moyen facile d'enregistrer et d'exécuter n'importe quel javascript sur la page actuelle ... sympa!
Brad Parks du
16

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.

jbustamovej
la source
2
La politique de sécurité empêche cela de fonctionner, au moins sur la nouvelle page à onglet de Chrome à partir de la version 66. Uncaught (promis) EvalError: Refusé d'évaluer une chaîne en JavaScript car «unsafe-eval» n'est pas une source de script autorisée dans les éléments suivants Directive de politique de sécurité du contenu: "script-src 'strict-dynamic' ...
Tatsh
@Tatsh utilise ma réponse pour éviter votre erreur ( 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 啸
la source
4

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é.
shmulik friedman
la source
Cela ne fonctionne pas pour moi: Refus de charger le script ' raw.githack.com/shmuelf/PowerJS/master/src/… ' car il viole la directive de politique de sécurité du contenu suivante: "script-src ...
ThomasRones
1

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>");
Deepak Vishwakarma
la source
0

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.

Jannis Ioannou
la source