Bookmarklet
Examples & Ideas
Get inspired by these practical bookmarklet examples. Each one solves a real problem with just a few lines of JavaScript.
🤔What are Bookmarklets?
Bookmarklets are small JavaScript programs stored as bookmarks in your browser. When clicked, they run on the current webpage to perform useful tasks.
Think of them as mini browser extensions that don't require installation - just drag to your bookmarks bar and click when needed.
✨ Benefits:
- • No browser extensions needed
- • Work on any website
- • Easy to share with others
- • Instant functionality
- • Completely customizable
🎯Ready-to-Use Examples
Scroll to Top
Instantly scroll to the top of any webpage
Use case:
Useful for long articles or social media feeds
View Code
window.scrollTo({
top: 0,
behavior: 'smooth'
});Dark Mode Toggle
Toggle dark mode on any website
Use case:
Read articles in dark mode when sites don't offer it
View Code
const body = document.body;
const isDark = body.style.backgroundColor === 'rgb(33, 37, 41)';
body.style.backgroundColor = isDark ? '' : '#212529';
body.style.color = isDark ? '' : '#fff';
const elements = document.querySelectorAll('*');
elements.forEach(el => {
if (!isDark) {
el.style.backgroundColor = el.style.backgroundColor || '#212529';
el.style.color = '#fff';
} else {
el.style.backgroundColor = '';
el.style.color = '';
}
});Download All Images
Download all images from the current page
Use case:
Quickly save images from galleries or portfolios
View Code
const images = document.querySelectorAll('img');
let count = 0;
images.forEach((img, index) => {
if (img.src) {
const link = document.createElement('a');
link.href = img.src;
link.download = `image-${index + 1}.${img.src.split('.').pop()}`;
link.click();
count++;
}
});
alert(`Started downloading ${count} images!`);Highlight All Links
Highlight all clickable links on the page
Use case:
Quickly identify all clickable elements on a page
View Code
const links = document.querySelectorAll('a');
links.forEach(link => {
link.style.backgroundColor = '#ffff00';
link.style.border = '2px solid #ff0000';
link.style.padding = '2px';
});
alert(`Highlighted ${links.length} links!`);Auto Clicker
Automatically click a specific button every few seconds
Use case:
Automate repetitive clicking tasks
View Code
const buttonText = prompt('Enter button text to click:');
if (buttonText) {
const interval = setInterval(() => {
const buttons = Array.from(document.querySelectorAll('button, input[type="button"], input[type="submit"]'));
const targetButton = buttons.find(btn =>
btn.textContent?.toLowerCase().includes(buttonText.toLowerCase())
);
if (targetButton) {
targetButton.click();
console.log('Clicked:', targetButton);
}
}, 3000);
setTimeout(() => {
clearInterval(interval);
alert('Auto-clicking stopped after 30 seconds');
}, 30000);
}Extract Email Addresses
Find and copy all email addresses from a page
Use case:
Collect contact information from websites
View Code
const emailRegex = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
const pageText = document.body.innerText;
const emails = pageText.match(emailRegex) || [];
const uniqueEmails = [...new Set(emails)];
if (uniqueEmails.length > 0) {
const emailList = uniqueEmails.join('\n');
navigator.clipboard.writeText(emailList);
alert(`Found ${uniqueEmails.length} email(s). Copied to clipboard!\n\n${emailList}`);
} else {
alert('No email addresses found on this page.');
}Word Counter
Count words and characters on the current page
Use case:
Analyze content length for articles or documents
View Code
const text = document.body.innerText;
const words = text.trim().split(/\s+/).filter(word => word.length > 0);
const characters = text.length;
const charactersNoSpaces = text.replace(/\s/g, '').length;
const stats = `📊 Page Statistics:
Words: ${words.length.toLocaleString()}
Characters: ${characters.toLocaleString()}
Characters (no spaces): ${charactersNoSpaces.toLocaleString()}`;
alert(stats);Ad Blocker
Remove common ad elements from the page
Use case:
Clean up cluttered pages by removing ads
View Code
const adSelectors = [
'[class*="ad"]', '[id*="ad"]', '[class*="banner"]',
'[class*="popup"]', '[class*="modal"]', '.advertisement',
'.sponsored', '[data-ad]', 'iframe[src*="ads"]'
];
let removedCount = 0;
adSelectors.forEach(selector => {
const elements = document.querySelectorAll(selector);
elements.forEach(el => {
if (el.offsetHeight > 50 || el.offsetWidth > 50) {
el.style.display = 'none';
removedCount++;
}
});
});
alert(`Removed ${removedCount} potential ad elements!`);🚀How to Use These Examples
1. Copy Code
Click "Copy Code" on any example above
2. Create Bookmarklet
Paste the code into our generator and customize
3. Use Anywhere
Drag to bookmarks bar and use on any website