Inject a library from a cdn in any website through the console

100%

Inject a library from a cdn in any website through the console

✓ Published0🌍 Public

Last edited Jun 30, 2015

Created on Jun 29, 2015

This example demonstrates a browser console script that injects the jQuery library into any website from a content delivery network. The code creates a new `<script>` element, sets its type to `text/javascript`, assigns the jQuery CDN URL as the source, and appends it to the document’s `<head>`. The snippet relies on the DOM API `document.createElement` and `appendChild` to perform the injection. It shows a manual, console-based method for loading external JavaScript dependencies without a package manager or build step.

AI-generated description

Similar vizzes

Loading thumbnail…

Inject d3

This example demonstrates a live injection of a custom D3 build into a page, showing how the library can be loaded dynamically at runtime. It creates a new script element and sets its `src` to a remote D3 file hosted by the author, then appends that element to the document body. The visualization itself is not rendered in the code; instead, the focus is on the loading mechanism. The snippet uses the browser’s DOM API (`document.createElement`, `appendChild`) to fetch and execute the external script, making D3’s methods available for subsequent use. The source is a gist by 1wheel, and the loaded file appears to be a custom D3 build.

11wheel

69% match

Loading thumbnail…

D3 Bookmarklet

This example demonstrates a bookmarklet that injects D3.js into any webpage by appending a dynamically created script element to the document head. The code specifically loads D3 version 3 from the d3js.org CDN using the `document.createElement` and `document.head.appendChild` APIs. It shows how to enable D3 functionality on pages that do not already have it, making the library available for future interactions. The bookmarklet relies solely on this script injection mechanism, with no additional data or visualization logic included.

Mmbostock

59% match

Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript can be imported and executed within an HTML document, with D3.js loaded via a CDN. The HTML file includes an empty body and a stylesheet, while the JavaScript imports `select` from D3 and logs it to the console, alongside a separate `script.js` that logs 'Hello'. A custom module `something.js` exports a string, showing ES module imports in action. The example highlights module structure and console output rather than visual rendering, using `d3.select` implicitly for demonstration.

JJavan Friedel

58% match

Loading thumbnail…

JS in HTML

This example demonstrates the integration of JavaScript within an HTML page, displaying the static text “Hello HTML!” styled with CSS. The code imports `something` from `./something.js`, which itself combines a string with the export from `./beautiful.js`, logging the concatenated result to the console. It also references the global `d3` object, though the D3 library is not loaded in the page due to the commented-out script tag. The example illustrates module-based code organization and console output without any interactive visualization.

GGullyPlook

58% match

Loading thumbnail…

Gist 4d1e447f82a7d2b425c4d1a3f5489e7a

A minimal example defines a custom `d3.foo()` method on the D3 namespace and calls it inside a page’s `console.log`, with the page loading the external script `d3-foo.js` that presumably defines this function. The rendered output is the return value of that method, shown only in the browser’s console. The code uses the standard D3 library, imported via a `<script>` tag, and demonstrates a simple extension pattern for library APIs. No data source, canvas, or SVG rendering is present; the example focuses solely on API invocation and console output.

KKristinHenry

57% match

Loading thumbnail…

Client-side Coffeescript with Jade and JQuery

This example demonstrates a minimal client-side CoffeeScript alert triggered on page load, showing how CoffeeScript can be embedded directly in a Jade template. The page loads jQuery and the CoffeeScript compiler from external sources, then uses the `:coffeescript` filter to compile and run `$(document).ready` in the browser. The code relies on the CoffeeScript runtime and jQuery’s DOM-ready event to display a “Hello World” message. No data or visualization is involved; the focus is on the integration of CoffeeScript, Jade, and jQuery.

AAnsonT

57% match

Loading thumbnail…

JS in HTML

This example demonstrates a web page that combines an HTML heading with JavaScript console output. The static HTML (“Hello HTML!”) is rendered in a large, centered font using a CSS class, while an external JavaScript file logs “Hello JavaScript!” to the browser’s console. The page uses plain HTML, embedded CSS in a `<style>` tag, and a separate script file loaded via the `<script>` tag, illustrating a basic separation of markup, styling, and scripting without relying on external libraries.

Aabhineetsingh10

56% match

Loading thumbnail…

Gist 7232670

This example demonstrates how a single-page application skeleton is transformed from a static document into an interactive, AJAX-driven experience. The visualization shows a list of user-submitted code entries, with each entry dynamically loaded and rendered without a full page refresh. The implementation uses jQuery’s `$.ajax` method to fetch the `lucky_ajax.md` file and other resources, then updates the DOM with the retrieved content. The code also relies on JavaScript’s `Promise` API for handling asynchronous responses, and highlights the use of `XMLHttpRequest` for network communication. The data source is the downloaded application skeleton, whose structure is revealed through the fetched files. The example focuses on the interaction between client-side scripting and server responses.

EElaineYu

56% match