Documentation

Installation

Install JS Injector from your browser's extension store:

Manual Installation (Development)

1. Download the latest release from GitHub Releases
2. Extract the zip file
3. Open chrome://extensions (or equivalent for your browser)
4. Enable "Developer mode"
5. Click "Load unpacked" and select the extracted folder

Quick Start

1. Click the JS Injector icon in your browser toolbar
2. Click "+ New Script for This Page"
3. Write your JavaScript code in the editor
4. Click Save — the script will auto-run on matching pages

// ==UserScript==
// @name         My First Script
// @match        *://*.example.com/*
// @grant        none
// ==/UserScript==

console.log('Hello from JS Injector!');

Side Panel

The side panel lets you write scripts while viewing the website. Open it by clicking the | icon in the popup header.

• Scripts tab — list of scripts matching the current page
• Editor tab — dual-pane editor (JavaScript + CSS)
• Snippets tab — quick-insert code templates
• Settings tab — editor and extension settings

The panel automatically detects the current page URL and generates a match pattern.

JavaScript Injection

Write JavaScript code in the editor. Scripts run in the page's MAIN world with full access to the DOM and page variables.

// Change the background color
document.body.style.backgroundColor = '#1a1a2e';

// Remove ads
document.querySelectorAll('.ad, [class*="banner"]').forEach(el => el.remove());

// Add a custom button
const btn = document.createElement('button');
btn.textContent = 'Click me';
btn.onclick = () => alert('Hello!');
document.body.appendChild(btn);

CSS Injection

Each script can include CSS that is injected before the JavaScript runs. Use the CSS pane in the side panel or the editor page.

/* Remove overlays and blur effects */
[class*="overlay"], [class*="blur"] {
  display: none !important;
}

/* Enable text selection */
* {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Dark mode */
html { filter: invert(1) hue-rotate(180deg); }
img, video { filter: invert(1) hue-rotate(180deg); }

URL Matching

Scripts are matched to pages using URL patterns. Set patterns in the script's metadata or in the editor.

Match Pattern Format

Follows the Google Match Pattern specification:

Regex Patterns

For advanced matching, use regex wrapped in slashes:

// @match /https?:\/\/(www\.)?example\.com\/.*/

GM API

JS Injector supports the Greasemonkey/Tampermonkey API. Use @grant in the script header to request permissions.

Example

// ==UserScript==
// @name         GM API Example
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_notification
// ==/UserScript==

(async () => {
  const count = await GM_getValue('visit_count', 0);
  await GM_setValue('visit_count', count + 1);

  if (count > 0) {
    GM_notification(`Visit #${count + 1}!`, 'JS Injector');
  }
})();

Context Menu

Right-click on any page to access JS Injector options:

• Run Matching Scripts — execute all scripts that match the current page
• Inject Selection as JS — run selected text as JavaScript
• [Script Name] — run a specific script

Import / Export

Export

Go to Settings → Import/Export → Export All Scripts. This downloads a JSON file with all your scripts.

Import

• From File — upload a JSON or .user.js file
• From URL — paste a URL to a JSON file
• Paste JSON — paste JSON directly

Format

{
  "format": "js-injector/v1",
  "scripts": [
    {
      "name": "My Script",
      "code": "// ==UserScript==\n// @match *://*/*\n// ==/UserScript==\nconsole.log('hello');",
      "matches": ["*://*/*"],
      "enabled": true
    }
  ]
}

Match Patterns Reference

Match patterns follow the Google specification.

Structure

<scheme>://<host>/<path>

• scheme: http, https, * (http+https), or file
• host: * (any), *.example.com (subdomains), or example.com (exact)
• path: /* (any), /foo* (starts with), or / (root)

Permissions

Snippets

The Snippets tab in the side panel provides quick-insert templates for common patterns:

• Basics — Console Logger, DOM Ready, Wait for Element, Add CSS
• GM API — set/get Value, notification, xmlhttpRequest
• Modules — Dynamic ES6 Import, Load External Script
• DOM — Remove Elements, Replace Text, Add Custom Button
• Fetch — Fetch JSON, Intercept Fetch/XHR
• CSS — Remove Overlay, Enable Right Click, Dark Mode

Click any snippet to insert it into the JS editor.

FAQ

Why don't my scripts run on some sites?

Some sites have strict Content Security Policies (CSP) that block certain operations. JS Injector uses scripting.executeScript which bypasses most CSP restrictions, but some sites may still block script execution.

Can I use Tampermonkey scripts?

Yes! JS Injector supports the GM API. Import .user.js files directly or copy the script code. Most Tampermonkey scripts will work without modification.

How do I share scripts?

Export your scripts as JSON from Settings → Import/Export. Share the JSON file with other users. They can import it using the same menu.

Does JS Injector collect my data?

No. All scripts and settings are stored locally in your browser. No data is sent to external servers. See our Privacy Policy for details.

How do I report a bug?

Visit our Support page or open an issue on GitHub.