¿Cómo incluir un archivo o biblioteca de JavaScript en la consola de Chrome?

221

¿Hay una manera más simple (¿nativa quizás?) De incluir un archivo de script externo en el navegador Google Chrome?

Actualmente lo estoy haciendo así:

document.head.innerHTML += '<script src="http://example.com/file.js"></script>';
Technocake
fuente
66
¿Quiere decir que desea una solución rápida para incluir un archivo en una página web aleatoria donde ha abierto las Herramientas para desarrolladores?
Christian Tellnes
77
Hice un complemento para hacer esto: descargar desde la tienda de Google
w00d
Utilizo esto para cargar knockout en la consola document.write ("<script src = ' cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/… )
Deepak Vishwakarma
Desafortunadamente, no hay forma de cargar un archivo javascript local en la consola, Chrome no permitirá el uso de archivos locales.
Shayan

Respuestas:

243

appendChild() es una forma más nativa:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);
Harmen
fuente
15
Para extender la respuesta de Harman, la envolví alrededor de una función JS y la uso de la siguiente manera ... var _loadScript = function (ruta) {var script = document.createElement ('script'); script.type = 'texto / javascript'; script.src = ruta; document.head.appendChild (script); } _loadScript (' documentcloud.github.com/underscore/underscore-min.js' ); _loadScript (' backbonejs.org/backbone-min.js' );
Ajay Bhosale
Tengo:TypeError: Property 'appendChild' of object #<HTMLHeadElement> is not a function
Muhammad Hewedy
1
Ajay, gracias, pero tienes pocos errores de sintaxis. copie / pegue el texto a continuación, para subrayar en la consola. O reemplace por otra lib var _loadScript = function (ruta) {var script = document.createElement ('script'); script.type = 'texto / javascript'; script.src = ruta; document.head.appendChild (script); }; _loadScript (' underscorejs.org/underscore-min.js' );
TPAKTOPA
¡Gracias! Utilicé script.innerHTML = javascript_code</code> para inyectar código javascript directo
Jonathan_Ng
91

¿Utiliza algún marco AJAX? Usando jQuery sería:

$.getScript('script.js');

Si no está utilizando ningún marco, vea la respuesta de Harmen.

(Tal vez no valga la pena usar jQuery solo para hacer esta cosa simple ( o tal vez lo sea ), pero si ya lo tiene cargado, también podría usarlo. He visto sitios web que tienen jQuery cargado, por ejemplo, con Bootstrap pero aún así use la API DOM directamente de una manera que no siempre sea portátil, en lugar de usar el jQuery ya cargado para eso, y muchas personas no son conscientes del hecho de que incluso getElementById()no funciona de manera consistente en todos los navegadores; vea esta respuesta para más detalles. )

ACTUALIZAR:

Han pasado años desde que escribí esta respuesta y creo que vale la pena señalar aquí que hoy puedes usar:

cargar dinámicamente scripts. Esos pueden ser relevantes para las personas que leen esta pregunta.

Véase también: La charla 2014 con fluidez de Guy Bedford: Flujos de trabajo prácticos para módulos ES6 .

rsp
fuente
¿Desde qué carpeta cargará el script?
Qwerty
44
Si lo usa como $.getScript('script.js');o $.getScript('../scripts/script.js');entonces es relativo al documento pero también puede cargar URL absolutas, por ejemplo. $.getScript('https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js');
rsp
si se utiliza jQuery, entonces se podría hacer un bookmarklet para instalar jQuery en la página, superuser.com/questions/1460015/...
barlop
38

En los navegadores modernos, puede usar la búsqueda para descargar recursos ( documentos de Mozilla ) y luego evaluar para ejecutarlos.

Por ejemplo, para descargar Angular1, debe escribir:

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
fuente
1
El último Chrome no permite el uso de eval, con el siguiente mensaje: 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 Lo comprobé y el fragmento aún funciona en Chrome Canary (64.0.3241.0).
Maciej Bukowski el
2
Creo que el problema de Vassilis es porque hay una política de seguridad de contenido en la aplicación que está usando. Chrome también funciona para mí.
Solomons_Ecclesiastes
1
@Vassilis usa mi respuesta a continuación ( stackoverflow.com/a/57814219/6553339 ) para evitar este error
shmulik friedman
16

En Chrome, su mejor opción podría ser la pestaña Fragmentos en Fuentes en las Herramientas para desarrolladores.

Le permitirá escribir y ejecutar código, por ejemplo, en una página about: blank.

Más información aquí: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

atirado
fuente
66
Si bien esto puede responder teóricamente la pregunta, sería preferible incluir aquí las partes esenciales de la respuesta y proporcionar el enlace para referencia.
Enamul Hassan
2
Pensé que mis dos primeras líneas eran la parte esencial de la respuesta. Describen exactamente cómo llegar a Snippets en Chrome. Luego complementé con la documentación de Google.
atirado
Sí, personalmente, creo que esta es la mejor respuesta, ya que también muestra a los desarrolladores y una manera fácil de guardar y ejecutar JavaScript en la página actual ... ¡genial!
Brad Parks el
16

Como seguimiento a la respuesta de @ maciej-bukowski arriba ^^^ , en los navegadores modernos a partir de ahora (primavera de 2017) que admiten async / wait, puede cargar de la siguiente manera. En este ejemplo, cargamos la 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);

Si ejecuta el fragmento y luego abre la consola de su navegador, debería ver que la función html2canvas () ahora está definida.

jbustamovej
fuente
2
La política de seguridad evita que esto funcione, al menos en la página de nueva pestaña de Chrome a partir de la versión 66. No detectado (en promesa) EvalError: se negó a evaluar una cadena como JavaScript porque 'inseguro-eval' no es una fuente permitida de script en lo siguiente Directiva de política de seguridad de contenido: "script-src 'estricto-dinámico' ...
Tatsh
@Tatsh usa mi respuesta para evitar tu error ( 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 啸
fuente
4

Si alguien no se carga porque el script viola la "Política de seguridad de contenido" del script-src o "porque no se permite la evaluación insegura", aconsejaré usar mi inyector de módulo bastante pequeño como un fragmento de herramientas de desarrollo, entonces podrás cargar así:

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 solución funciona porque:

  1. Carga la biblioteca en xhr , lo que permite CORS desde la consola y evita la política script-src.
  2. Utiliza la opción síncrona de xhr que le permite permanecer en el contexto de la consola / fragmento, por lo que tendrá el permiso para evaluar el script y no ser tratado como una evaluación insegura.
shmulik friedman
fuente
No me funciona: me negué a cargar el script ' raw.githack.com/shmuelf/PowerJS/master/src/… ' porque viola la siguiente directiva de Política de seguridad de contenido: "script-src ...
ThomasRones
1

Lo uso para cargar el objeto knockout ko en la consola

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

o host localmente

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

Instale tampermonkey y agregue el siguiente UserScript con uno (o más) @matchcon URL de página específica (o una coincidencia de todas las páginas :) por https://*ejemplo:

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

})();

Siempre que necesite la biblioteca en la consola o en un fragmento, active el UserScript específico y actualícelo.

Esta solución previene la contaminación del espacio de nombres . Puede usar espacios de nombres personalizados para evitar sobrescribir accidentalmente las variables globales existentes en la página.

Jannis Ioannou
fuente