Initial Commit
This commit is contained in:
Andy Dixon
+477
@@ -0,0 +1,477 @@
|
||||
# Greasemonkey Example Rules
|
||||
|
||||
This document contains useful example rules you can use with Greasemonkey. Copy and paste these into your extension to get started quickly.
|
||||
|
||||
## Table of Contents
|
||||
1. [Page Styling](#page-styling)
|
||||
2. [Element Manipulation](#element-manipulation)
|
||||
3. [Content Blocking](#content-blocking)
|
||||
4. [Automation](#automation)
|
||||
5. [Custom Features](#custom-features)
|
||||
|
||||
---
|
||||
|
||||
## Page Styling
|
||||
|
||||
### Dark Mode for Any Site
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** `example.com` (replace with your target site)
|
||||
**CSS Code:**
|
||||
```css
|
||||
body {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4a9eff !important;
|
||||
}
|
||||
|
||||
div, p, span, article {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Increase Font Size
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** `news-site.com`
|
||||
**CSS Code:**
|
||||
```css
|
||||
body {
|
||||
font-size: 18px !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Remove Animations
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** (any site with annoying animations)
|
||||
**CSS Code:**
|
||||
```css
|
||||
* {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Color Scheme
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** `docs.` (targets documentation sites)
|
||||
**CSS Code:**
|
||||
```css
|
||||
:root {
|
||||
--bg-color: #282c34;
|
||||
--text-color: #abb2bf;
|
||||
--accent-color: #61afef;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color) !important;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Element Manipulation
|
||||
|
||||
### Highlight Search Results
|
||||
**Match Type:** Page contains element
|
||||
**Element Selector:** `.search-result`
|
||||
**CSS Code:**
|
||||
```css
|
||||
.search-result:hover {
|
||||
background-color: #fff3cd !important;
|
||||
border-left: 4px solid #ffc107 !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Auto-Expand Collapsed Content
|
||||
**Match Type:** Page contains element
|
||||
**Element Selector:** `.collapsed`
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
document.querySelectorAll('.collapsed').forEach(elem => {
|
||||
elem.classList.remove('collapsed');
|
||||
elem.style.display = 'block';
|
||||
});
|
||||
```
|
||||
|
||||
### Add Copy Buttons to Code Blocks
|
||||
**Match Type:** Page contains element
|
||||
**Element Selector:** `pre code`
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
document.querySelectorAll('pre code').forEach(block => {
|
||||
const button = document.createElement('button');
|
||||
button.textContent = 'Copy';
|
||||
button.style.cssText = 'position:absolute;top:5px;right:5px;padding:5px 10px;cursor:pointer;';
|
||||
button.onclick = () => {
|
||||
navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = 'Copied!';
|
||||
setTimeout(() => button.textContent = 'Copy', 2000);
|
||||
};
|
||||
block.parentElement.style.position = 'relative';
|
||||
block.parentElement.appendChild(button);
|
||||
});
|
||||
```
|
||||
|
||||
### Enhance Tables
|
||||
**Match Type:** Page contains element
|
||||
**Element Selector:** `table`
|
||||
**CSS Code:**
|
||||
```css
|
||||
table {
|
||||
border-collapse: collapse !important;
|
||||
width: 100% !important;
|
||||
margin: 20px 0 !important;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #4CAF50 !important;
|
||||
color: white !important;
|
||||
padding: 12px !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: 10px !important;
|
||||
border-bottom: 1px solid #ddd !important;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Content Blocking
|
||||
|
||||
### Hide Advertisements
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** (target site)
|
||||
**CSS Code:**
|
||||
```css
|
||||
.ad,
|
||||
.ads,
|
||||
.advertisement,
|
||||
[class*="ad-"],
|
||||
[id*="ad-"],
|
||||
.sponsored,
|
||||
.promotion {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Remove Cookie Notices
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** (any site)
|
||||
**CSS Code:**
|
||||
```css
|
||||
[class*="cookie"],
|
||||
[id*="cookie"],
|
||||
[class*="consent"],
|
||||
[id*="gdpr"],
|
||||
.privacy-banner {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Hide Social Media Widgets
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** (target site)
|
||||
**CSS Code:**
|
||||
```css
|
||||
.social-share,
|
||||
.share-buttons,
|
||||
[class*="social-"],
|
||||
iframe[src*="facebook"],
|
||||
iframe[src*="twitter"] {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Remove Popups
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** (target site)
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
// Remove overlay popups
|
||||
document.querySelectorAll('.popup, .modal, .overlay').forEach(el => {
|
||||
el.remove();
|
||||
});
|
||||
|
||||
// Re-enable scrolling
|
||||
document.body.style.overflow = 'auto';
|
||||
document.documentElement.style.overflow = 'auto';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Automation
|
||||
|
||||
### Auto-Close Annoying Popups
|
||||
**Match Type:** Page contains element
|
||||
**Element Selector:** `.modal`
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
const closeButton = document.querySelector('.modal .close, .modal [aria-label="Close"]');
|
||||
if (closeButton) {
|
||||
closeButton.click();
|
||||
console.log('Popup auto-closed');
|
||||
}
|
||||
}, 2000);
|
||||
```
|
||||
|
||||
### Auto-Accept Cookies
|
||||
**Match Type:** Page contains element
|
||||
**Element Selector:** `[class*="cookie"]`
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
const acceptButton = document.querySelector(
|
||||
'button[id*="accept"], button[class*="accept"], .cookie-accept, #acceptCookies'
|
||||
);
|
||||
if (acceptButton) {
|
||||
acceptButton.click();
|
||||
console.log('Cookies auto-accepted');
|
||||
}
|
||||
```
|
||||
|
||||
### Auto-Fill Test Form
|
||||
**Match Type:** Both URL and element
|
||||
**URL Pattern:** `test-form.html`
|
||||
**Element Selector:** `#myForm`
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
document.getElementById('username').value = 'testuser';
|
||||
document.getElementById('email').value = 'test@example.com';
|
||||
console.log('Form auto-filled');
|
||||
```
|
||||
|
||||
### Skip Video Ads
|
||||
**Match Type:** Page contains element
|
||||
**Element Selector:** `.video-player`
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
setInterval(() => {
|
||||
const skipButton = document.querySelector('.skip-ad, .ytp-ad-skip-button');
|
||||
if (skipButton && skipButton.offsetParent !== null) {
|
||||
skipButton.click();
|
||||
console.log('Ad skipped');
|
||||
}
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Custom Features
|
||||
|
||||
### Add Floating Note Pad
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** (any site where you want notes)
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
const notepad = document.createElement('div');
|
||||
notepad.innerHTML = `
|
||||
<div style="position:fixed;top:10px;right:10px;width:300px;z-index:10000;background:white;border:2px solid #333;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3);">
|
||||
<div style="background:#333;color:white;padding:10px;cursor:move;border-radius:6px 6px 0 0;">
|
||||
Quick Notes
|
||||
</div>
|
||||
<textarea id="greasemonkey-notes" style="width:100%;height:200px;padding:10px;border:none;font-family:monospace;"></textarea>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(notepad);
|
||||
|
||||
// Load saved notes
|
||||
const notes = localStorage.getItem('greasemonkey-notes') || '';
|
||||
document.getElementById('greasemonkey-notes').value = notes;
|
||||
|
||||
// Save notes on change
|
||||
document.getElementById('greasemonkey-notes').addEventListener('input', (e) => {
|
||||
localStorage.setItem('greasemonkey-notes', e.target.value);
|
||||
});
|
||||
```
|
||||
|
||||
### Add Page Stats Widget
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** (any site)
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
const stats = document.createElement('div');
|
||||
stats.style.cssText = 'position:fixed;bottom:10px;right:10px;background:#333;color:white;padding:10px;border-radius:8px;font-size:12px;z-index:10000;';
|
||||
|
||||
const updateStats = () => {
|
||||
const wordCount = document.body.innerText.split(/\s+/).length;
|
||||
const linkCount = document.querySelectorAll('a').length;
|
||||
const imageCount = document.querySelectorAll('img').length;
|
||||
|
||||
stats.innerHTML = `
|
||||
<strong>Page Stats</strong><br>
|
||||
Words: ${wordCount}<br>
|
||||
Links: ${linkCount}<br>
|
||||
Images: ${imageCount}
|
||||
`;
|
||||
};
|
||||
|
||||
document.body.appendChild(stats);
|
||||
updateStats();
|
||||
```
|
||||
|
||||
### Reading Mode
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** `article` or `blog`
|
||||
**CSS Code:**
|
||||
```css
|
||||
body * {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
article,
|
||||
article *,
|
||||
.article-content,
|
||||
.article-content *,
|
||||
.post-content,
|
||||
.post-content * {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 800px !important;
|
||||
margin: 0 auto !important;
|
||||
padding: 40px 20px !important;
|
||||
background: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
article {
|
||||
background: white !important;
|
||||
padding: 40px !important;
|
||||
line-height: 1.8 !important;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Add Custom Keyboard Shortcuts
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** (target site)
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Ctrl+Shift+D - Toggle dark mode
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
|
||||
document.body.style.filter =
|
||||
document.body.style.filter === 'invert(1)' ? '' : 'invert(1)';
|
||||
}
|
||||
|
||||
// Ctrl+Shift+H - Hide images
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'H') {
|
||||
document.querySelectorAll('img').forEach(img => {
|
||||
img.style.display = img.style.display === 'none' ? '' : 'none';
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Custom Scroll Progress Bar
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** (any site with long content)
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
const progressBar = document.createElement('div');
|
||||
progressBar.style.cssText = 'position:fixed;top:0;left:0;width:0%;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);z-index:10000;transition:width 0.3s;';
|
||||
document.body.appendChild(progressBar);
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const winScroll = document.documentElement.scrollTop;
|
||||
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
const scrolled = (winScroll / height) * 100;
|
||||
progressBar.style.width = scrolled + '%';
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tips for Creating Your Own Rules
|
||||
|
||||
1. **Test in Console First**: Try your JavaScript in the browser console (F12) before adding to a rule
|
||||
2. **Use !important**: CSS often needs `!important` to override existing styles
|
||||
3. **Check Element Selectors**: Right-click → Inspect to find correct selectors
|
||||
4. **Start Simple**: Begin with basic rules and add complexity
|
||||
5. **Use Console Logging**: Add `console.log()` to debug your JavaScript
|
||||
6. **Test Match Conditions**: Verify URL patterns and selectors match correctly
|
||||
|
||||
## Combining Rules
|
||||
|
||||
You can combine multiple techniques in one rule:
|
||||
|
||||
**Match Type:** Both URL and element
|
||||
**URL Pattern:** `github.com`
|
||||
**Element Selector:** `.repository-content`
|
||||
**CSS Code:**
|
||||
```css
|
||||
.repository-content {
|
||||
max-width: 1400px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
```
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
console.log('GitHub enhancer loaded');
|
||||
document.querySelectorAll('.markdown-body').forEach(md => {
|
||||
md.style.fontSize = '16px';
|
||||
md.style.lineHeight = '1.8';
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Advanced Patterns
|
||||
|
||||
### Waiting for Elements (Mutation Observer)
|
||||
```javascript
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
const targetElement = document.querySelector('.dynamic-element');
|
||||
if (targetElement) {
|
||||
targetElement.style.background = 'yellow';
|
||||
observer.disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
```
|
||||
|
||||
### Periodic Checks
|
||||
```javascript
|
||||
setInterval(() => {
|
||||
const ads = document.querySelectorAll('.ad');
|
||||
ads.forEach(ad => ad.remove());
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
### Event Delegation
|
||||
```javascript
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.matches('.my-button')) {
|
||||
console.log('Button clicked!');
|
||||
e.preventDefault();
|
||||
}
|
||||
}, true);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Happy scripting! Create your own custom rules and enhance your browsing experience. 🚀
|
||||
Reference in New Issue
Block a user