Scriptbar Snippets 🚀
Handy and easy to understand snippets to keep in your browser
console-inject-javascript-library.js

#Intermediate

Injecting remote javascript library into any page

This is very handy for quickly testing ideas in the console and rapidly injecting code into existing sites. Console Injector searches cdnjs for javascript libraries matching a given input string, prompt you to validate your choice and inserts the latest corresponding script hosted at cdnjs.cloudflare.com.

Example

  • console.inject('query')
  • console.inject('three')

console inject library to page demo

/* * Inspired by https://chrome.google.com/webstore/detail/console-injector/abdfbnapkafgcheofcijaieahcbjnpkd?hl=en * example: console.inject('jquery') */ (function injectAnyRemoteScript(window, console) { const PROMPT_LIMIT = 10; const runRemoteCode = function (url) { if (!url) { return console.error('console.runRemoteCode: No url'); } // download and run the script var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; head.appendChild(script); } console.inject = (library) => { if (!library) { return console.error("library name is required"); } fetch("https://api.cdnjs.com/libraries?search=" + library) .then((response) => response.json()) .then((json) => { const choiceNum = window.prompt(`Type a number to select a library: ${json.results.slice(0, PROMPT_LIMIT).map((item, index) => `${index}. ${item.name}`).join("\n")}`); let choice = 0; try { console.log("chose choice", choiceNum); choice = parseInt(choiceNum, 10); if (choice < 0 && choice >= PROMPT_LIMIT) { throw new Error(); } } catch { alert("Invalid choice number. Enter a number from 0 to " + (PROMPT_LIMIT - 1)); return; } console.info("Injecting " + json.results[choice].name, 'latest from', json.results[choice].latest); runRemoteCode(json.results[choice].latest); }); }; })(window, console);
Built with ❤️ by @domnguyen and everyone on the internet 🚀