Làm cách nào để bao gồm tệp JavaScript hoặc thư viện trong bảng điều khiển Chrome?

Có cách nào đơn giản hơn (có lẽ là bản địa?) Để đưa tệp tập lệnh bên ngoài vào trình duyệt Google Chrome không?

Hiện tại tôi đang làm như thế này:

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

appendChild() là một cách bản địa hơn:

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

Bạn có sử dụng một số khung AJAX không? Sử dụng jQuery nó sẽ là:

$.getScript('script.js');

Nếu bạn không sử dụng bất kỳ khuôn khổ nào thì hãy xem câu trả lời của Harmen.

(Có thể không đáng để sử dụng jQuery chỉ để làm điều đơn giản này ( hoặc có thể là vậy ) nhưng nếu bạn đã tải nó rồi thì bạn cũng có thể sử dụng nó. Tôi đã thấy các trang web đã tải jQuery, ví dụ như với Bootstrap nhưng vẫn sử dụng API DOM trực tiếp theo cách không phải lúc nào cũng có thể mang theo được, thay vì sử dụng jQuery đã được tải cho điều đó và nhiều người không biết thực tế là thậm chí getElementById()không hoạt động ổn định trên tất cả các trình duyệt - xem chi tiết câu trả lời này . )

CẬP NHẬT:

Đã nhiều năm kể từ khi tôi viết câu trả lời này và tôi nghĩ rằng đáng để chỉ ra ở đây rằng ngày nay bạn có thể sử dụng:

• SystemJS
• Trình tải mô-đun
• jspm.io

để tải động các tập lệnh. Những người có thể có liên quan đến những người đọc câu hỏi này.

Xem thêm: Cuộc nói chuyện trôi chảy năm 2014 của Guy Bedford: Quy trình làm việc thực tế cho các Mô-đun ES6 .

Trong các trình duyệt hiện đại, bạn có thể sử dụng tìm nạp để tải xuống tài nguyên ( tài liệu Mozilla ) và sau đó eval để thực thi nó.

Ví dụ để tải xuống Angular1, bạn cần gõ:

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

Trong chrome, tùy chọn tốt nhất của bạn có thể là tab Snippets bên dưới Nguồn trong Công cụ dành cho nhà phát triển.

Nó sẽ cho phép bạn viết và chạy mã, ví dụ, trong một trang about: blank.

Thêm thông tin tại đây: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=vi

Theo dõi câu trả lời của @ maciej-bukowski ở trên ^^ ^ , trong các trình duyệt hiện đại tính đến thời điểm hiện tại (mùa xuân 2017) hỗ trợ async / await bạn có thể tải như sau. Trong ví dụ này, chúng tôi tải thư viện html2canvas tải:

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

Nếu bạn chạy đoạn mã và sau đó mở bảng điều khiển của trình duyệt, bạn sẽ thấy hàm html2canvas () hiện được xác định.

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

Nếu bất cứ ai, không tải được vì tập lệnh ngần ngại vi phạm "Chính sách bảo mật nội dung" hoặc "vì không an toàn" không được phép ", tôi sẽ tư vấn sử dụng trình tiêm mô-đun khá nhỏ của tôi làm đoạn trích công cụ dev, sau đó bạn sẽ có thể tải như thế này:

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>

giải pháp này hoạt động vì:

1. Nó tải thư viện trong xhr - cho phép CORS từ bàn điều khiển và tránh chính sách script-src.
2. Nó sử dụng tùy chọn đồng bộ của xhr cho phép bạn ở trong bối cảnh của bàn điều khiển / đoạn trích, vì vậy bạn sẽ có quyền để từ chối tập lệnh và không bị coi là không an toàn.

Tôi sử dụng điều này để tải ko đối tượng loại trực tiếp trong giao diện điều khiển

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

hoặc lưu trữ tại địa phương

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

Cài đặt tampermonkey và thêm UserScript sau bằng một (hoặc nhiều hơn) @matchvới url trang cụ thể (hoặc khớp với tất cả các trang https://*:) ví dụ:

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

})();

Bất cứ khi nào bạn cần thư viện trên bảng điều khiển hoặc trên đoạn trích, hãy bật UserScript cụ thể và làm mới.

Giải pháp này ngăn ngừa ô nhiễm không gian tên . Bạn có thể sử dụng các không gian tên tùy chỉnh để tránh ghi đè ngẫu nhiên các biến toàn cục hiện có trên trang.