Включить файл JavaScript в консоль Chrome

Question

Есть ли более простой (возможно, нативный) способ включить внешний файл сценария в браузер Google Chrome?

В настоящее время я делаю это так:

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

Answer 1

appendChild() это более родной путь:

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

Answer 2

Используете ли вы некоторые AJAX Framework? Используя jQuery это было бы:

$.getScript('script.js');

Если вы не используете какие-либо рамки, то посмотрите ответ Хармена.

(Может быть, не стоит использовать jQuery только для того, чтобы сделать эту простую вещь ( или, может быть, так и есть), но если вы уже загрузили его, то вы можете также использовать его. Я видел сайты, на которых загружен jQuery, например, с помощью Bootstrap, но все еще использовать DOM API напрямую способом, который не всегда переносим, ​​вместо того, чтобы использовать для этого уже загруженный jQuery, и многие люди не осознают тот факт, что даже getElementById() не работает согласованно во всех браузерах - подробности см. в этом ответе.)

ОБНОВИТЬ:

Прошло много лет с тех пор, как я написал этот ответ, и я думаю, что здесь стоит указать, что сегодня вы можете использовать:

• SystemJS
• ModuleLoader
• http://jspm.io/

динамически загружать скрипты. Они могут иметь отношение к людям, читающим этот вопрос.

См. Также: выступление Гая Бедфорда "Fluent 2014": практические рабочие процессы для модулей ES6.

Answer 3

В современных браузерах вы можете использовать fetch для загрузки ресурса ( документы Mozilla) и затем eval для его запуска.

Например, чтобы скачать Angular1, вам нужно набрать:

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

Answer 4

В продолжение ответа @maciej-bukowski выше ^^^, в современных браузерах (весна 2017 г.), которые поддерживают async / await, вы можете загрузить следующим образом. В этом примере мы загружаем библиотеку загрузки 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);

Если вы запустите сниппет, а затем откроете консоль браузера, вы увидите, что теперь определена функция html2canvas().

Answer 5

В Chrome лучшим вариантом может быть вкладка "Фрагменты кода" в разделе "Источники" в инструментах разработчика.

Это позволит вам писать и запускать код, например, на пустой странице about:.

Дополнительная информация здесь: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Answer 6

Вы можете получить сценарий в виде текста, а затем оценить его:

      eval(await (await fetch('http://example.com/file.js')).text())

Answer 7

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

Answer 8

Если кому-то не удается загрузить, потому что этот сценарий нарушает script-src "Политику безопасности содержимого" или "потому что unsafe-eval'не разрешен", я посоветую использовать мой довольно-таки маленький модуль-инжектор в качестве фрагмента dev-tools, тогда вы сможете загружать так:

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>

это решение работает, потому что:

1. Он загружает библиотеку в xhr, что позволяет использовать CORS с консоли и избегает политики script-src.
2. Он использует синхронную опцию xhr, которая позволяет вам оставаться в контексте консоли / фрагмента, поэтому у вас будет разрешение на оценку скрипта, а не на обработку как небезопасного-eval.

Answer 9

Если вы только начинаете изучать javascript и не хотите тратить время на создание всей веб-страницы только для встраивания тестовых скриптов, просто откройте Инструменты разработчика на новой вкладке в браузере Chrome и нажмите Console.

Затем введите несколько тестовых сценариев: например.

console.log('Aha!') 

Затем нажимайте Enter после каждой строки (чтобы отправить на выполнение в Chrome)

или загрузите свой собственный "внешний файл сценария":

document.createElement('script').src = 'http://example.com/file.js';

Затем вызовите свои функции:

console.log(file.function('驨ꍬ啯ꍲᕤ'))

Протестировано в Google Chrome 85.0.4183.121

Answer 10

Я использую это, чтобы загрузить нокаутирующий объект в консоли

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

или хост локально

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

Answer 11

Установите https://www.tampermonkey.net/ и добавьте следующий UserScript с одним (или несколькими)@match с конкретным URL-адресом страницы (или совпадением всех страниц: https://*) например:

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

})();

Когда вам понадобится библиотека на консоли или во фрагменте кода, включите определенный UserScript и обновите его.

Это решение предотвращает загрязнение пространства имен. Вы можете использовать настраиваемые пространства имен, чтобы избежать случайной перезаписи существующих глобальных переменных на странице.