Run JavaScript - Complete Guide & Help

Home /
Run JavaScript - Complete Guide & Help

🐘 Run JavaScript Chrome Extension - Complete User Guide

Transform any website into your personal playground with custom JavaScript execution!

The ultimate Chrome extension for web developers, power users, and automation enthusiasts who want to take control of their browsing experience.

🚀 Quick Start Guide

Installation

Install from Chrome Web Store: Visit the Run JavaScript extension page
Click “Add to Chrome” and confirm the installation
Pin the extension to your toolbar for easy access
You’re ready to go! The extension icon will appear in your browser toolbar

Your First Script (30 seconds)

Visit any website (try Google.com for this example)
Click the Run JavaScript icon in your toolbar

Write your first script:

// Change the page background to a fun gradient
document.body.style.background = "linear-gradient(45deg, #667eea, #764ba2)";
document.body.style.color = "white";
alert("🎉 Your first script is working!");

Toggle “Enabled” switch to ON
Click “Save & Run” - see the magic happen!
Refresh the page - your script runs automatically!

🖥️ Interface Overview

Main Interface Components

Header Section

🎯 Extension Logo & Title: Shows you’re in the Run JavaScript extension
🔄 Sidebar Toggle: Access your saved scripts library (hamburger menu)
❓ Help Button: Quick access to this help guide

Enable/Disable Toggle

🟢 Enabled: Script will run automatically on this domain
🔴 Disabled: Script is saved but won’t execute
📍 Domain Display: Shows which domain the script applies to

Code Editor

✨ Syntax Highlighting: Professional code editor powered by Ace Editor
📝 Line Numbers: Easy navigation and debugging
🎨 Theme Support: Clean, readable interface
⌨️ Keyboard Shortcuts: Standard code editor shortcuts

📚 jQuery Dropdown: Choose jQuery version (1.12.4, 2.2.4, 3.3.1, or None)
▶️ Run Button: Execute your script immediately
💾 Save & Run: Save script and execute it
🗑️ Clear: Clear the editor (with confirmation)

📋 Script List: All your saved scripts organized by domain
📤 Export: Download all your scripts as a backup
📥 Import: Restore scripts from a backup file
🔍 Search: Find scripts quickly (coming soon)

⭐ Core Features

🎯 Instant JavaScript Execution

Execute JavaScript code immediately on any website with full DOM access.

Example:

// Remove all ads from the current page
document
  .querySelectorAll('[class*="ad"], [id*="ad"], .advertisement')
  .forEach((el) => el.remove());
console.log("Ads removed!");

💾 Persistent Script Storage

Your scripts are automatically saved per domain and run every time you visit that site.

How it works:

Scripts are stored locally in your browser
Each domain gets its own script storage
Scripts persist across browser sessions
No data is sent to external servers

🔄 Domain-Specific Automation

Set up custom functionality that runs automatically on specific websites.

Use cases:

Auto-fill forms with your information
Skip video ads automatically
Add custom UI elements
Monitor page changes
Extract data automatically

🎨 Professional Code Editor

Built-in Ace Editor provides a superior coding experience.

Features:

Syntax highlighting for JavaScript
Line numbers and code folding
Find and replace functionality
Multiple cursor support
Bracket matching
Auto-indentation

🚀 Advanced Features

📚 jQuery Integration

Choose from multiple jQuery versions or go library-free.

Available versions:

jQuery 3.3.1 (Latest features, modern browsers)
jQuery 2.2.4 (Good balance of features and compatibility)
jQuery 1.12.4 (Maximum compatibility with older sites)
None (Pure JavaScript, no library)

Example with jQuery:

// jQuery 3.3.1 example - Modern syntax
$("body").css({
  "font-family": "Arial, sans-serif",
  "line-height": "1.6",
});

// Add a floating notification
$("<div>")
  .text("Page enhanced by Run JavaScript!")
  .css({
    position: "fixed",
    top: "20px",
    right: "20px",
    background: "#4CAF50",
    color: "white",
    padding: "10px 20px",
    borderRadius: "5px",
    zIndex: 9999,
  })
  .appendTo("body")
  .delay(3000)
  .fadeOut();

🗂️ Script Management System

Organize and manage multiple scripts across different websites.

Features:

Script Library: View all saved scripts in the sidebar
Domain Organization: Scripts grouped by website
Enable/Disable: Toggle scripts without deleting them
Export/Import: Backup and restore your script collection
Script Status: Visual indicators showing which scripts are active

🔒 Security & Sandboxing

Modern Manifest V3 architecture ensures secure script execution.

Security features:

Sandboxed execution environment
No external code injection
Local storage only
Content Security Policy compliant
Duplicate execution prevention

📋 Script Management

Creating Scripts

Navigate to target website
Open Run JavaScript extension
Write your code in the editor
Enable the toggle if you want auto-execution
Click “Save & Run” to save and execute

Managing Existing Scripts

Click the sidebar toggle (hamburger menu)
Browse your script library organized by domain
Click any script to edit it
Use toggle switches to enable/disable scripts
Delete scripts you no longer need

Backup & Restore

Export Scripts:

Open the sidebar
Click “Export” button
Save the JSON file to your computer

Import Scripts:

Open the sidebar
Click “Import” button
Select your backup JSON file
Scripts will be restored automatically

🎨 Real-World Examples

🌟 Website Customization

Dark Mode for Any Website

// Create a universal dark mode
document.documentElement.style.filter = "invert(1) hue-rotate(180deg)";

// Exclude images and videos from inversion
const media = document.querySelectorAll("img, video, iframe, svg");
media.forEach((el) => {
  el.style.filter = "invert(1) hue-rotate(180deg)";
});

// Add toggle button
const toggleBtn = document.createElement("button");
toggleBtn.textContent = "🌙 Toggle Dark Mode";
toggleBtn.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    padding: 10px;
    background: #333;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
`;

let darkMode = true;
toggleBtn.onclick = () => {
  darkMode = !darkMode;
  document.documentElement.style.filter = darkMode
    ? "invert(1) hue-rotate(180deg)"
    : "none";
  media.forEach((el) => {
    el.style.filter = darkMode ? "invert(1) hue-rotate(180deg)" : "none";
  });
};

document.body.appendChild(toggleBtn);

Remove Annoying Elements

// Remove common annoying elements
const annoyingSelectors = [
  ".newsletter-popup",
  ".cookie-banner",
  '[class*="popup"]',
  '[class*="modal"]',
  ".advertisement",
  '[class*="ad-"]',
  "#ad-container",
];

annoyingSelectors.forEach((selector) => {
  document.querySelectorAll(selector).forEach((el) => el.remove());
});

// Monitor for dynamically added elements
const observer = new MutationObserver(() => {
  annoyingSelectors.forEach((selector) => {
    document.querySelectorAll(selector).forEach((el) => el.remove());
  });
});

observer.observe(document.body, { childList: true, subtree: true });

⚡ Productivity Automation

Auto-Fill Forms

// Auto-fill common form fields
const formData = {
  email: "[email protected]",
  name: "Your Name",
  phone: "555-0123",
  company: "Your Company",
};

// Fill by input names
Object.keys(formData).forEach((key) => {
  const input = document.querySelector(
    `input[name*="${key}"], input[id*="${key}"]`,
  );
  if (input) input.value = formData[key];
});

// Fill by common selectors
document.querySelectorAll('input[type="email"]').forEach((input) => {
  if (!input.value) input.value = formData.email;
});

console.log("Forms auto-filled!");

Skip Video Ads

// Auto-skip YouTube ads
function skipAds() {
  // Skip button
  const skipBtn = document.querySelector(
    ".ytp-ad-skip-button, .ytp-skip-ad-button",
  );
  if (skipBtn) {
    skipBtn.click();
    console.log("Ad skipped!");
  }

  // Mute ads
  const video = document.querySelector("video");
  if (video && document.querySelector(".ad-showing")) {
    video.muted = true;
    video.currentTime = video.duration - 0.1; // Jump to end
  }
}

// Run every second
setInterval(skipAds, 1000);

📊 Data Extraction

Price Monitor

// Monitor product prices
function checkPrice() {
  const priceSelectors = [".price", '[class*="price"]', "[data-price]"];
  let currentPrice = null;

  for (const selector of priceSelectors) {
    const priceEl = document.querySelector(selector);
    if (priceEl) {
      currentPrice = priceEl.textContent.trim();
      break;
    }
  }

  if (currentPrice) {
    const savedPrice = localStorage.getItem("monitored-price");
    if (savedPrice && savedPrice !== currentPrice) {
      alert(`Price changed! Was: ${savedPrice}, Now: ${currentPrice}`);
    }
    localStorage.setItem("monitored-price", currentPrice);

    // Add price display
    let priceDisplay = document.getElementById("price-monitor");
    if (!priceDisplay) {
      priceDisplay = document.createElement("div");
      priceDisplay.id = "price-monitor";
      priceDisplay.style.cssText = `
                position: fixed;
                top: 10px;
                left: 10px;
                background: #4CAF50;
                color: white;
                padding: 10px;
                border-radius: 5px;
                z-index: 10000;
                font-family: Arial;
            `;
      document.body.appendChild(priceDisplay);
    }
    priceDisplay.textContent = `Monitoring: ${currentPrice}`;
  }
}

checkPrice();
setInterval(checkPrice, 30000); // Check every 30 seconds

🎮 Fun & Creative

Interactive Particle System

// Create a mouse-following particle system
const canvas = document.createElement("canvas");
canvas.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9998;
`;
document.body.appendChild(canvas);

const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];
const colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"];

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = (Math.random() - 0.5) * 4;
    this.vy = (Math.random() - 0.5) * 4;
    this.life = 1;
    this.decay = Math.random() * 0.02 + 0.01;
    this.size = Math.random() * 6 + 2;
    this.color = colors[Math.floor(Math.random() * colors.length)];
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.life -= this.decay;
    this.size *= 0.99;
  }

  draw() {
    ctx.save();
    ctx.globalAlpha = this.life;
    ctx.fillStyle = this.color;
    ctx.shadowBlur = 20;
    ctx.shadowColor = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }
}

document.addEventListener("mousemove", (e) => {
  for (let i = 0; i < 3; i++) {
    particles.push(new Particle(e.clientX, e.clientY));
  }
});

function animate() {
  ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = particles.length - 1; i >= 0; i--) {
    const particle = particles[i];
    particle.update();
    particle.draw();

    if (particle.life <= 0) {
      particles.splice(i, 1);
    }
  }

  requestAnimationFrame(animate);
}

animate();

🔧 Troubleshooting

Common Issues & Solutions

Script Not Running

Problem: Script saves but doesn’t execute on page load.

Solutions:

✅ Check the Enable toggle - Make sure it’s switched ON
✅ Verify domain matching - Script only runs on the exact domain where it was created
✅ Check for JavaScript errors - Open browser console (F12) to see error messages
✅ Try manual execution - Click “Run” button to test if script works manually

✅ Check timing - Some sites load content dynamically; try adding delays:

setTimeout(() => {
  // Your code here
}, 2000); // Wait 2 seconds

Script Conflicts

Problem: Script interferes with website functionality.

Solutions:

✅ Use specific selectors - Avoid broad selectors that might affect unintended elements

✅ Add error handling:

try {
  // Your code here
} catch (error) {
  console.log("Script error:", error);
}

✅ Test incrementally - Add code bit by bit to identify problematic sections
✅ Use namespacing - Wrap your code to avoid global variable conflicts:
```
(function () {
  // Your code here is isolated
})();
```

jQuery Not Working

Problem: jQuery commands return errors.

Solutions:

✅ Select correct jQuery version from dropdown

✅ Wait for jQuery to load:

function waitForJQuery() {
  if (typeof $ !== "undefined") {
    // Your jQuery code here
  } else {
    setTimeout(waitForJQuery, 100);
  }
}
waitForJQuery();

✅ Check for conflicts - Some sites use other libraries that conflict with $

✅ Use jQuery directly:

jQuery(document).ready(function ($) {
  // Your code here
});

Performance Issues

Problem: Script slows down the website.

Solutions:

✅ Optimize selectors - Use efficient CSS selectors

✅ Limit DOM queries - Cache element references:

const myElement = document.getElementById("myId"); // Cache this
// Use myElement multiple times instead of querying again

✅ Use requestAnimationFrame for animations

✅ Debounce event handlers:

let timeout;
window.addEventListener("scroll", () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    // Your scroll handler
  }, 100);
});

❓ Frequently Asked Questions

Getting Started

Q: Do I need programming experience to use this extension? A: While basic JavaScript knowledge is helpful, you can start with simple examples and learn as you go. The extension includes many ready-to-use examples, and there are plenty of online JavaScript tutorials to help you learn.

Q: Will my scripts work on all websites? A: Most websites will work fine, but some sites with strict Content Security Policies (CSP) may block script execution. Additionally, heavily JavaScript-dependent sites (SPAs) might require specific timing considerations.

Q: Can I use this extension on mobile? A: The extension works on Chrome for Android, but the editing experience is optimized for desktop use. For mobile, consider creating scripts on desktop and they’ll sync if you’re logged into Chrome.

Script Management

Q: How many scripts can I save? A: There’s no hard limit, but browser storage has practical limits (usually several MB). For typical use cases, you can save hundreds of scripts without issues.

Q: Can I organize scripts into folders? A: Currently, scripts are organized by domain automatically. Folder organization is planned for a future update.

Q: How do I share scripts with others? A: You can copy and paste script code, or use the export feature to create a backup file that others can import.

Q: What happens if I uninstall the extension? A: All your scripts will be lost unless you export them first. Always create backups of important scripts.

Technical Questions

Q: Does this extension send my code to any servers? A: No, all scripts are stored locally in your browser. Nothing is transmitted to external servers.

Q: Can scripts access data from other websites? A: No, scripts are restricted to the domain they’re created for due to browser security policies (same-origin policy).

Q: Why do some scripts stop working after website updates? A: Websites change their HTML structure over time. Scripts that rely on specific element IDs or classes may need updates when the website changes.

Q: Can I schedule scripts to run at specific times? A: Scripts run when you visit the website. For time-based execution, you can use JavaScript’s setTimeout or setInterval functions within your scripts.

Advanced Usage

Q: Can I use external JavaScript libraries? A: You can load external libraries dynamically:

function loadScript(src, callback) {
  const script = document.createElement("script");
  script.src = src;
  script.onload = callback;
  document.head.appendChild(script);
}

loadScript("https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js", () => {
  // Use lodash here
  console.log(_.version);
});

Q: How do I debug complex scripts? A: Use browser developer tools:

Open DevTools (F12)
Go to Console tab
Use console.log() statements in your script
Set breakpoints using debugger; statement

Q: Can I create user interfaces with this extension? A: Yes! You can create complex UIs using DOM manipulation:

// Create a floating panel
const panel = document.createElement("div");
panel.innerHTML = `
    <h3>My Custom Panel</h3>
    <button onclick="alert('Hello!')">Click Me</button>
`;
panel.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    z-index: 10000;
`;
document.body.appendChild(panel);

Troubleshooting

Q: My script worked yesterday but not today. What happened? A: Common causes:

Website updated their HTML structure
Website implemented new security policies
Browser updated and changed behavior
Script has a timing issue with dynamic content

Q: How do I make scripts work on single-page applications (SPAs)? A: SPAs require special handling since they don’t reload pages:

// Listen for URL changes
let currentUrl = location.href;
new MutationObserver(() => {
  if (location.href !== currentUrl) {
    currentUrl = location.href;
    // Re-run your script logic here
    setTimeout(initializeScript, 1000);
  }
}).observe(document, { subtree: true, childList: true });

function initializeScript() {
  // Your main script logic here
}

Q: Can I make scripts work across subdomains? A: Scripts are domain-specific, but you can create similar scripts for different subdomains. A future update may include subdomain support.

🔒 Security & Best Practices

Security Guidelines

Safe Scripting Practices

✅ Never run untrusted code - Only execute scripts you understand
✅ Avoid sensitive sites - Don’t use custom scripts on banking or financial websites
✅ Review third-party scripts - Understand what any shared script does before running it
✅ Use HTTPS sites - Prefer secure websites for script execution
✅ Regular backups - Export your scripts regularly

Code Quality Best Practices

✅ Use meaningful variable names:

// Good
const submitButton = document.querySelector("#submit-btn");

// Avoid
const btn = document.querySelector("#submit-btn");

✅ Add error handling:

try {
  const element = document.querySelector("#my-element");
  if (element) {
    element.style.display = "none";
  } else {
    console.log("Element not found");
  }
} catch (error) {
  console.error("Script error:", error);
}

✅ Use comments for complex logic:

// Wait for dynamic content to load before modifying
setTimeout(() => {
  // Remove advertisement containers
  document.querySelectorAll(".ad-container").forEach((ad) => ad.remove());
}, 2000);

✅ Avoid global variable pollution:

(function () {
  // All variables here are contained within this function
  const myVariable = "safe";
  // Your code here
})();

Performance Optimization

Efficient DOM Manipulation

// Good - Single query, cached result
const elements = document.querySelectorAll(".my-class");
elements.forEach((el) => (el.style.color = "red"));

// Avoid - Multiple queries
document
  .querySelectorAll(".my-class")
  .forEach((el) => (el.style.color = "red"));
document
  .querySelectorAll(".my-class")
  .forEach((el) => (el.style.fontSize = "16px"));

Memory Management

// Clean up event listeners when done
function myHandler() {
  /* ... */
}
element.addEventListener("click", myHandler);

// Later, when no longer needed:
element.removeEventListener("click", myHandler);

Efficient Loops

// Good - Cache length
const items = document.querySelectorAll(".item");
for (let i = 0, len = items.length; i < len; i++) {
  // Process items[i]
}

// Good - Use forEach for readability
items.forEach((item) => {
  // Process item
});

🎯 Advanced Tips & Tricks

Working with Dynamic Content

Many modern websites load content dynamically. Here’s how to handle it:

// Method 1: MutationObserver (recommended)
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === "childList") {
      // New elements added, run your logic
      processNewElements();
    }
  });
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
});

function processNewElements() {
  // Your processing logic here
}

// Method 2: Polling (use sparingly)
setInterval(() => {
  const newElement = document.querySelector(".dynamic-element");
  if (newElement && !newElement.processed) {
    newElement.processed = true;
    // Process the element
  }
}, 1000);

Creating Persistent Settings

Store user preferences that persist across sessions:

// Save settings
function saveSetting(key, value) {
  localStorage.setItem(`runjs_${key}`, JSON.stringify(value));
}

// Load settings
function loadSetting(key, defaultValue) {
  const saved = localStorage.getItem(`runjs_${key}`);
  return saved ? JSON.parse(saved) : defaultValue;
}

// Example usage
const userPrefs = loadSetting("preferences", {
  darkMode: false,
  autoHide: true,
});

// Update and save
userPrefs.darkMode = true;
saveSetting("preferences", userPrefs);

Cross-Frame Communication

For websites with iframes:

// Send message to iframe
const iframe = document.querySelector("iframe");
iframe.contentWindow.postMessage("Hello iframe!", "*");

// Listen for messages
window.addEventListener("message", (event) => {
  console.log("Received message:", event.data);
});

🆘 Getting Help & Support

Community Resources

GitHub Repository: Report bugs and request features
Chrome Web Store: Leave reviews and feedback
Stack Overflow: Use tag run-javascript-chrome for technical questions

Before Reporting Issues

✅ Check this help guide for solutions
✅ Test on a simple website (like Google.com)
✅ Check browser console for error messages
✅ Try disabling other extensions temporarily
✅ Include specific steps to reproduce the issue

Feature Requests

We’re always improving! Current roadmap includes:

📚 Script library with community sharing
🎯 Conditional execution based on page content
📦 More JavaScript library integrations
🌙 Dark mode theme
📱 Mobile interface improvements

🎉 Conclusion

The Run JavaScript Chrome Extension transforms your browsing experience by giving you the power to customize, automate, and enhance any website you visit. Whether you’re a developer looking to quickly test ideas, a power user wanting to customize your favorite sites, or someone learning JavaScript, this extension provides the tools you need.

Key Takeaways:

✨ Start simple with basic examples and gradually build complexity
💾 Always backup your scripts using the export feature
🔒 Follow security best practices, especially on sensitive sites
📚 Use the script management features to stay organized
🤝 Share cool scripts with the community

Ready to get started? Install the extension and begin transforming your web experience today!

Last updated: August 14, 2024 | Version 4.2.0

Need more help? Visit our GitHub repository or contact support through the Chrome Web Store listing.

Run JavaScript - Complete Guide & Help

🐘 Run JavaScript Chrome Extension - Complete User Guide

📖 Table of Contents

🚀 Quick Start Guide

Installation

Your First Script (30 seconds)

🖥️ Interface Overview

Main Interface Components

Header Section

Enable/Disable Toggle

Code Editor

Toolbar Controls

Script Management Sidebar

⭐ Core Features

🎯 Instant JavaScript Execution

💾 Persistent Script Storage

🔄 Domain-Specific Automation

🎨 Professional Code Editor

🚀 Advanced Features

📚 jQuery Integration

🗂️ Script Management System

🔒 Security & Sandboxing

📋 Script Management

Creating Scripts

Managing Existing Scripts

Backup & Restore

🎨 Real-World Examples

🌟 Website Customization

Dark Mode for Any Website

Remove Annoying Elements

⚡ Productivity Automation

Auto-Fill Forms

Skip Video Ads

📊 Data Extraction

Price Monitor

🎮 Fun & Creative

Interactive Particle System

🔧 Troubleshooting

Common Issues & Solutions

Script Not Running

Script Conflicts

jQuery Not Working

Performance Issues

❓ Frequently Asked Questions

Getting Started

Script Management

Technical Questions

Advanced Usage

Troubleshooting

🔒 Security & Best Practices

Security Guidelines

Safe Scripting Practices

Code Quality Best Practices

Performance Optimization

Efficient DOM Manipulation

Memory Management

Efficient Loops

🎯 Advanced Tips & Tricks

Working with Dynamic Content

Creating Persistent Settings

Cross-Frame Communication

🆘 Getting Help & Support

Community Resources

Before Reporting Issues

Feature Requests

🎉 Conclusion