[JQuery] inject jQuery into any webpage

 

 

You can easily inject jQuery into any webpage so you can use it directly in your Chrome DevTools console. Here are several precise methods, from simplest to most robust:


Method 1 — Inject via Console

Open the Chrome console (Ctrl+Shift+J or Cmd+Option+J), then paste this:

var script = document.createElement('script');
script.src = "https://code.jquery.com/jquery-3.7.1.min.js";
script.integrity = "sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=";
script.crossOrigin = "anonymous";
document.head.appendChild(script);

Then press Enter.

After it loads (a second or two), test with:

typeof jQuery

It should return "function" if loaded successfully.


Method 2 — Bookmarklet (Reusable)

Create a browser bookmark and set its URL to this code:

javascript:(function(){
  var script=document.createElement('script');
  script.src='https://code.jquery.com/jquery-3.7.1.min.js';
  script.integrity='sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=';
  script.crossOrigin='anonymous';
  document.head.appendChild(script);
})();

Then, whenever you’re on a page that doesn’t have jQuery, click the bookmark — jQuery will be injected automatically.


Method 3 — Manually Add in the Console Network Context (if CSP blocks it)

If the site uses Content Security Policy (CSP) blocking inline scripts, run this in the console:

fetch("https://code.jquery.com/jquery-3.7.1.min.js")
  .then(r => r.text())
  .then(code => eval(code));

This fetches and evaluates the script directly, bypassing most CSP restrictions.


Method 4 — Using Chrome Snippets

If you inject jQuery frequently:

  1. Open DevTools → Sources → Snippets.

  2. Create a new snippet called Inject jQuery.

  3. Paste the code from Method 1.

  4. Save it, and whenever you want jQuery available, right-click → Run.


Would you like me to include a version that auto-detects if jQuery is already loaded and replaces or skips accordingly?

 

posted @ 2025-11-12 10:26  profesor  阅读(3)  评论(0)    收藏  举报