Initial Commit
This commit is contained in:
Andy Dixon
@@ -0,0 +1 @@
|
||||
dist
|
||||
@@ -0,0 +1,328 @@
|
||||
# Build Instructions
|
||||
|
||||
This document contains detailed instructions for building and distributing the Greasemonkey browser extension.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Web browser (Chrome or Firefox)
|
||||
- Text editor (for development)
|
||||
- Node.js and npm (optional, for Firefox automated builds)
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Testing Locally
|
||||
|
||||
#### Chrome
|
||||
```bash
|
||||
1. Open Chrome
|
||||
2. Navigate to chrome://extensions/
|
||||
3. Enable "Developer mode" (top-right toggle)
|
||||
4. Click "Load unpacked"
|
||||
5. Select the greasemonkey/chrome directory
|
||||
```
|
||||
|
||||
#### Firefox
|
||||
```bash
|
||||
1. Open Firefox
|
||||
2. Navigate to about:debugging#/runtime/this-firefox
|
||||
3. Click "Load Temporary Add-on"
|
||||
4. Select greasemonkey/firefox/manifest.json
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### 1. Making Changes
|
||||
|
||||
Edit files in the appropriate directory (`chrome/` or `firefox/`).
|
||||
|
||||
**Key files:**
|
||||
- `manifest.json` - Extension configuration
|
||||
- `popup.html` - UI structure
|
||||
- `popup.css` - UI styling
|
||||
- `popup.js` - UI functionality
|
||||
- `content.js` - Code that runs on web pages
|
||||
- `background.js` - Background service/script
|
||||
|
||||
### 2. Testing Changes
|
||||
|
||||
After making changes:
|
||||
|
||||
**Chrome:**
|
||||
1. Go to `chrome://extensions/`
|
||||
2. Click the reload icon on the Greasemonkey extension card
|
||||
3. Test your changes
|
||||
|
||||
**Firefox:**
|
||||
1. Go to `about:debugging#/runtime/this-firefox`
|
||||
2. Click "Reload" on the Greasemonkey extension
|
||||
3. Test your changes
|
||||
|
||||
### 3. Debugging
|
||||
|
||||
**Chrome:**
|
||||
- Background script logs: `chrome://extensions/` → "service worker" link
|
||||
- Content script logs: Browser console on any page (F12)
|
||||
- Popup logs: Right-click popup → "Inspect"
|
||||
|
||||
**Firefox:**
|
||||
- Background script logs: `about:debugging` → "Inspect" on extension
|
||||
- Content script logs: Browser console on any page (F12)
|
||||
- Popup logs: Right-click popup → "Inspect Element"
|
||||
|
||||
## Building for Distribution
|
||||
|
||||
### Chrome/Edge Build
|
||||
|
||||
#### Method 1: Manual Packaging (Recommended for Testing)
|
||||
|
||||
1. Open Chrome
|
||||
2. Go to `chrome://extensions/`
|
||||
3. Ensure "Developer mode" is enabled
|
||||
4. Click "Pack extension"
|
||||
5. For "Extension root directory", select the `chrome` folder
|
||||
6. Leave "Private key file" empty for first build
|
||||
7. Click "Pack Extension"
|
||||
8. Chrome generates two files:
|
||||
- `chrome.crx` - The packaged extension
|
||||
- `chrome.pem` - Private key (keep this secure for updates!)
|
||||
|
||||
#### Method 2: Chrome Web Store Distribution
|
||||
|
||||
1. Create a developer account at [Chrome Web Store](https://chrome.google.com/webstore/developer/dashboard)
|
||||
2. Pay one-time $5 registration fee
|
||||
3. Create a ZIP file of the `chrome` directory:
|
||||
```bash
|
||||
cd chrome
|
||||
zip -r ../greasemonkey-chrome.zip *
|
||||
```
|
||||
4. Upload to Chrome Web Store dashboard
|
||||
5. Fill in store listing details
|
||||
6. Submit for review
|
||||
|
||||
**Note:** Keep your `.pem` private key file secure. You'll need it for future updates.
|
||||
|
||||
### Firefox Build
|
||||
|
||||
#### Method 1: Temporary Installation (Development)
|
||||
|
||||
Already covered in Quick Start - good for testing only. Temporary add-ons are removed when Firefox restarts.
|
||||
|
||||
#### Method 2: Self-Distribution (Unverified)
|
||||
|
||||
1. Create a ZIP file:
|
||||
```bash
|
||||
cd firefox
|
||||
zip -r ../greasemonkey-firefox.zip *
|
||||
```
|
||||
2. Rename to `.xpi`:
|
||||
```bash
|
||||
mv greasemonkey-firefox.zip greasemonkey-firefox.xpi
|
||||
```
|
||||
3. Users can install by dragging `.xpi` file to Firefox
|
||||
4. Firefox will show "unverified" warning
|
||||
|
||||
#### Method 3: Official Distribution (Recommended)
|
||||
|
||||
1. Install web-ext tool:
|
||||
```bash
|
||||
npm install -g web-ext
|
||||
```
|
||||
|
||||
2. Build the extension:
|
||||
```bash
|
||||
cd firefox
|
||||
web-ext build
|
||||
```
|
||||
This creates a ZIP file in `web-ext-artifacts/` directory
|
||||
|
||||
3. Sign with Mozilla:
|
||||
- Create account at [addons.mozilla.org](https://addons.mozilla.org/developers/)
|
||||
- Get API keys from [Developer Hub](https://addons.mozilla.org/developers/addon/api/key/)
|
||||
- Sign the extension:
|
||||
```bash
|
||||
web-ext sign \
|
||||
--api-key=YOUR_API_KEY \
|
||||
--api-secret=YOUR_API_SECRET
|
||||
```
|
||||
- Or upload manually to addons.mozilla.org
|
||||
|
||||
4. Distribution options:
|
||||
- **Listed**: Public on addons.mozilla.org (requires review)
|
||||
- **Unlisted**: Self-distribute signed XPI (automatic signing)
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
greasemonkey/
|
||||
├── chrome/ # Chrome extension
|
||||
│ ├── manifest.json
|
||||
│ ├── background.js
|
||||
│ ├── content.js
|
||||
│ ├── popup.html
|
||||
│ ├── popup.css
|
||||
│ ├── popup.js
|
||||
│ ├── icon16.png
|
||||
│ ├── icon48.png
|
||||
│ └── icon128.png
|
||||
├── firefox/ # Firefox extension
|
||||
│ ├── manifest.json
|
||||
│ ├── background.js
|
||||
│ ├── content.js
|
||||
│ ├── popup.html
|
||||
│ ├── popup.css
|
||||
│ ├── popup.js
|
||||
│ ├── icon16.png
|
||||
│ ├── icon48.png
|
||||
│ └── icon128.png
|
||||
├── README.md
|
||||
└── BUILD.md # This file
|
||||
```
|
||||
|
||||
## Version Updates
|
||||
|
||||
When releasing a new version:
|
||||
|
||||
1. Update version number in both `manifest.json` files:
|
||||
```json
|
||||
"version": "1.1.0"
|
||||
```
|
||||
|
||||
2. Update README.md version history
|
||||
|
||||
3. Test thoroughly in both browsers
|
||||
|
||||
4. Build new packages:
|
||||
- Chrome: Re-pack with same `.pem` key
|
||||
- Firefox: Build and sign new version
|
||||
|
||||
5. Upload to respective stores/distribution channels
|
||||
|
||||
## Quality Checklist
|
||||
|
||||
Before building for distribution:
|
||||
|
||||
- [ ] Test all features in Chrome
|
||||
- [ ] Test all features in Firefox
|
||||
- [ ] Verify icons display correctly
|
||||
- [ ] Check manifest.json versions match
|
||||
- [ ] Test storage sync functionality
|
||||
- [ ] Verify permissions are appropriate
|
||||
- [ ] Test on various websites
|
||||
- [ ] Check browser console for errors
|
||||
- [ ] Test add/edit/delete rule functionality
|
||||
- [ ] Verify enable/disable toggles work
|
||||
- [ ] Test all match types (URL, Element, Both)
|
||||
- [ ] Review code for security issues
|
||||
- [ ] Update version numbers
|
||||
- [ ] Update documentation
|
||||
|
||||
## File Size Optimization
|
||||
|
||||
To reduce extension size:
|
||||
|
||||
1. Minify JavaScript (optional):
|
||||
```bash
|
||||
npm install -g terser
|
||||
terser popup.js -c -m -o popup.min.js
|
||||
```
|
||||
|
||||
2. Optimize PNG icons:
|
||||
```bash
|
||||
# If you have optipng installed
|
||||
optipng icon*.png
|
||||
```
|
||||
|
||||
3. Remove development files:
|
||||
- Source maps
|
||||
- Test files
|
||||
- Documentation (keep only in repo)
|
||||
|
||||
## Automated Build Script
|
||||
|
||||
You can create a build script for automation:
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# build.sh
|
||||
|
||||
VERSION="1.0.0"
|
||||
|
||||
echo "Building Greasemonkey v${VERSION}..."
|
||||
|
||||
# Chrome build
|
||||
echo "Building Chrome extension..."
|
||||
cd chrome
|
||||
zip -r "../dist/greasemonkey-chrome-${VERSION}.zip" * -x "*.DS_Store"
|
||||
cd ..
|
||||
|
||||
# Firefox build
|
||||
echo "Building Firefox extension..."
|
||||
cd firefox
|
||||
zip -r "../dist/greasemonkey-firefox-${VERSION}.zip" * -x "*.DS_Store"
|
||||
cd ..
|
||||
|
||||
echo "Build complete! Files in dist/ directory"
|
||||
```
|
||||
|
||||
Make it executable:
|
||||
```bash
|
||||
chmod +x build.sh
|
||||
mkdir -p dist
|
||||
./build.sh
|
||||
```
|
||||
|
||||
## Common Issues
|
||||
|
||||
### Chrome Extension Doesn't Load
|
||||
- Check manifest.json syntax (use JSON validator)
|
||||
- Ensure all referenced files exist
|
||||
- Check browser console for errors
|
||||
|
||||
### Firefox Temporary Add-on Removed
|
||||
- This is expected behavior
|
||||
- Use web-ext for persistent testing:
|
||||
```bash
|
||||
cd firefox
|
||||
web-ext run
|
||||
```
|
||||
|
||||
### Icons Not Showing
|
||||
- Verify icon files exist
|
||||
- Check file paths in manifest.json
|
||||
- Ensure icon sizes are correct (16x16, 48x48, 128x128)
|
||||
|
||||
### Storage Not Persisting
|
||||
- Chrome: Check sync is enabled in browser
|
||||
- Firefox: Temporary add-ons don't persist storage
|
||||
- Use proper signed/installed extension for testing
|
||||
|
||||
## Distribution Platforms
|
||||
|
||||
### Official Stores
|
||||
- [Chrome Web Store](https://chrome.google.com/webstore/developer/dashboard)
|
||||
- [Firefox Add-ons](https://addons.mozilla.org/developers/)
|
||||
- [Microsoft Edge Add-ons](https://partner.microsoft.com/dashboard/microsoftedge/overview)
|
||||
|
||||
### Self-Distribution
|
||||
- GitHub Releases
|
||||
- Personal website
|
||||
- Direct XPI/CRX files
|
||||
|
||||
## Security Notes
|
||||
|
||||
- Never commit your Chrome `.pem` private key
|
||||
- Keep Firefox API keys secure
|
||||
- Don't bundle sensitive data in extension
|
||||
- Review all code before distribution
|
||||
- Test on malicious sites carefully
|
||||
|
||||
## Resources
|
||||
|
||||
- [Chrome Extension Documentation](https://developer.chrome.com/docs/extensions/)
|
||||
- [Firefox Extension Documentation](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions)
|
||||
- [web-ext Documentation](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/)
|
||||
- [Bootstrap Documentation](https://getbootstrap.com/docs/5.3/)
|
||||
|
||||
## Support
|
||||
|
||||
For build issues or questions, contact Andy Dixon.
|
||||
@@ -0,0 +1,86 @@
|
||||
# Changelog
|
||||
|
||||
All notable changes to GreasyBoii will be documented in this file.
|
||||
|
||||
## [1.0.2] - 2024-10-16
|
||||
|
||||
### Fixed
|
||||
- **CRITICAL: CSP Violation** - Fixed Content Security Policy blocking external Bootstrap CDN
|
||||
- **Modal initialization** - Now works correctly with local Bootstrap files
|
||||
- Extension now fully functional in Chrome Manifest V3
|
||||
|
||||
### Changed
|
||||
- **Renamed to GreasyBoii** - Extension renamed from "Greasemonkey" to "GreasyBoii"
|
||||
- **Local Bootstrap** - Downloaded Bootstrap 5.3.2 files locally (227KB CSS + 79KB JS)
|
||||
- Updated all console messages to show "GreasyBoii" branding
|
||||
- Updated all UI text to reflect new name
|
||||
|
||||
### Added
|
||||
- bootstrap.min.css (227KB) - Local Bootstrap CSS
|
||||
- bootstrap.bundle.min.js (79KB) - Local Bootstrap JS with Popper
|
||||
|
||||
## [1.0.1] - 2024-10-16
|
||||
|
||||
### Fixed
|
||||
- **Add Rule button not working** - Fixed Bootstrap modal initialization timing issue
|
||||
- Added fallback initialization for Bootstrap Modal to handle CDN load timing
|
||||
- Improved error handling and logging in popup.js
|
||||
- Added null checks for DOM elements to prevent errors
|
||||
- Added console logging for debugging button clicks
|
||||
|
||||
### Changed
|
||||
- Enhanced `setupEventListeners()` with better error detection
|
||||
- Improved `openRuleModal()` with fallback modal initialization
|
||||
- Added `initializeExtension()` wrapper function for proper initialization order
|
||||
|
||||
### Added
|
||||
- TROUBLESHOOTING.md - Comprehensive troubleshooting guide
|
||||
- Console logging for debugging initialization issues
|
||||
- Better error messages when elements are not found
|
||||
|
||||
## [1.0.0] - 2024-10-16
|
||||
|
||||
### Fixed
|
||||
- **Add Rule button not working** - Fixed Bootstrap modal initialization timing issue
|
||||
- Added fallback initialization for Bootstrap Modal to handle CDN load timing
|
||||
- Improved error handling and logging in popup.js
|
||||
- Added null checks for DOM elements to prevent errors
|
||||
- Added console logging for debugging button clicks
|
||||
|
||||
### Changed
|
||||
- Enhanced `setupEventListeners()` with better error detection
|
||||
- Improved `openRuleModal()` with fallback modal initialization
|
||||
- Added `initializeExtension()` wrapper function for proper initialization order
|
||||
|
||||
### Added
|
||||
- TROUBLESHOOTING.md - Comprehensive troubleshooting guide
|
||||
- Console logging for debugging initialization issues
|
||||
- Better error messages when elements are not found
|
||||
|
||||
## [1.0.0] - 2024-10-16
|
||||
|
||||
### Added
|
||||
- Initial release
|
||||
- Chrome extension (Manifest V3)
|
||||
- Firefox extension (Manifest V2)
|
||||
- URL pattern matching
|
||||
- CSS selector (element) matching
|
||||
- Combined URL + element matching
|
||||
- JavaScript execution
|
||||
- CSS injection
|
||||
- Bootstrap 5 dark theme UI
|
||||
- Add/edit/delete rules
|
||||
- Enable/disable toggles
|
||||
- Persistent synced storage
|
||||
- Complete documentation suite
|
||||
- Example rules library
|
||||
- Interactive test page
|
||||
- Build instructions
|
||||
|
||||
### Features
|
||||
- Flexible matching system (URL, Element, Both)
|
||||
- Modern Bootstrap dark UI
|
||||
- Full CRUD operations for rules
|
||||
- Form validation
|
||||
- Error handling
|
||||
- Cross-browser support (Chrome, Firefox, Edge, Opera)
|
||||
+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. 🚀
|
||||
@@ -0,0 +1,267 @@
|
||||
# Installing GreasyBoii (Packaged Version)
|
||||
|
||||
Your extensions are now packaged and ready to install!
|
||||
|
||||
## Files Created
|
||||
|
||||
✅ `dist/greasyboii-chrome-v1.0.4.zip` (62 KB)
|
||||
✅ `dist/greasyboii-firefox-v1.0.4.zip` (62 KB)
|
||||
|
||||
---
|
||||
|
||||
## Chrome Installation
|
||||
|
||||
### Method 1: Load Unpacked (Development)
|
||||
1. Open `chrome://extensions/`
|
||||
2. Enable "Developer mode" (top-right toggle)
|
||||
3. Click "Load unpacked"
|
||||
4. Select the `chrome` folder
|
||||
5. ✅ Done!
|
||||
|
||||
### Method 2: Install ZIP (Distribution)
|
||||
1. Unzip `greasyboii-chrome-v1.0.4.zip` to a folder
|
||||
2. Open `chrome://extensions/`
|
||||
3. Enable "Developer mode"
|
||||
4. Click "Load unpacked"
|
||||
5. Select the unzipped folder
|
||||
6. ✅ Done!
|
||||
|
||||
### Method 3: Pack to CRX (Best for Sharing)
|
||||
1. Open `chrome://extensions/`
|
||||
2. Enable "Developer mode"
|
||||
3. Click "Pack extension"
|
||||
4. For "Extension root directory" → Select the `chrome` folder
|
||||
5. Leave "Private key file" empty
|
||||
6. Click "Pack Extension"
|
||||
7. You get `chrome.crx` file (the actual extension)
|
||||
8. Share this `.crx` file with others
|
||||
9. Users drag it to `chrome://extensions/` to install
|
||||
|
||||
**Note:** Chrome will show "This extension is not from the Chrome Web Store" warning for unpublished extensions.
|
||||
|
||||
---
|
||||
|
||||
## Firefox Installation
|
||||
|
||||
### Method 1: Load Temporary (Development)
|
||||
1. Open `about:debugging#/runtime/this-firefox`
|
||||
2. Click "Load Temporary Add-on"
|
||||
3. Select any file from the `firefox` folder (e.g., `manifest.json`)
|
||||
4. ✅ Done! (Removed when Firefox restarts)
|
||||
|
||||
### Method 2: Install ZIP (Distribution)
|
||||
1. Rename `greasyboii-firefox-v1.0.4.zip` to `greasyboii-firefox-v1.0.4.xpi`
|
||||
2. Drag the `.xpi` file into Firefox
|
||||
3. Click "Add" when prompted
|
||||
4. ✅ Done!
|
||||
|
||||
**Note:** Unsigned extensions will show a warning. For production use, sign it through addons.mozilla.org.
|
||||
|
||||
### Method 3: Permanent Install (Signed)
|
||||
For permanent installation without warnings:
|
||||
1. Create account at [addons.mozilla.org](https://addons.mozilla.org/developers/)
|
||||
2. Submit the ZIP file
|
||||
3. Choose "Unlisted" for self-distribution
|
||||
4. Mozilla automatically signs it
|
||||
5. Download the signed XPI
|
||||
6. Install the signed version
|
||||
|
||||
---
|
||||
|
||||
## Edge Installation
|
||||
|
||||
Edge uses Chrome extensions:
|
||||
1. Open `edge://extensions/`
|
||||
2. Enable "Developer mode"
|
||||
3. Click "Load unpacked"
|
||||
4. Select the `chrome` folder
|
||||
5. ✅ Done!
|
||||
|
||||
---
|
||||
|
||||
## Opera Installation
|
||||
|
||||
Opera also uses Chrome extensions:
|
||||
1. Open `opera://extensions/`
|
||||
2. Enable "Developer mode"
|
||||
3. Click "Load unpacked"
|
||||
4. Select the `chrome` folder
|
||||
5. ✅ Done!
|
||||
|
||||
---
|
||||
|
||||
## Verifying Installation
|
||||
|
||||
After installing, you should see:
|
||||
- ✅ GreasyBoii icon in the browser toolbar
|
||||
- ✅ Extension name: "GreasyBoii"
|
||||
- ✅ Version: 1.0.4
|
||||
- ✅ Author: Andy Dixon
|
||||
|
||||
Click the icon to open the popup and test:
|
||||
1. Click "+ Add Rule"
|
||||
2. Modal should open
|
||||
3. Create a test rule
|
||||
4. Visit a matching page
|
||||
5. Script should execute!
|
||||
|
||||
---
|
||||
|
||||
## Testing the Package
|
||||
|
||||
Before sharing, test the packaged version:
|
||||
|
||||
1. **Uninstall the development version** (if loaded)
|
||||
2. **Install from the package** (follow steps above)
|
||||
3. **Test all features:**
|
||||
- ✅ Add rule
|
||||
- ✅ Edit rule
|
||||
- ✅ Delete rule
|
||||
- ✅ Toggle rule
|
||||
- ✅ Visit target page
|
||||
- ✅ Verify script executes
|
||||
- ✅ Check console logs
|
||||
|
||||
---
|
||||
|
||||
## Sharing Your Extension
|
||||
|
||||
### For Chrome Users:
|
||||
Send them:
|
||||
1. The `.crx` file (after packing)
|
||||
2. Installation instructions:
|
||||
- Open `chrome://extensions/`
|
||||
- Enable "Developer mode"
|
||||
- Drag the `.crx` file into the window
|
||||
- Click "Add extension"
|
||||
|
||||
### For Firefox Users:
|
||||
Send them:
|
||||
1. The `.xpi` file (renamed `.zip`)
|
||||
2. Installation instructions:
|
||||
- Drag the `.xpi` file into Firefox
|
||||
- Click "Add"
|
||||
|
||||
### For All Users (Best):
|
||||
1. Publish on Chrome Web Store ($5 one-time fee)
|
||||
2. Publish on Firefox Add-ons (free)
|
||||
3. Users can install with one click
|
||||
|
||||
---
|
||||
|
||||
## Updating the Extension
|
||||
|
||||
When you release a new version:
|
||||
|
||||
### Chrome:
|
||||
1. Update version in `chrome/manifest.json`
|
||||
2. Re-package the extension
|
||||
3. If you packed to `.crx`, use the SAME `.pem` file
|
||||
4. Users get automatic updates if installed from Chrome Web Store
|
||||
|
||||
### Firefox:
|
||||
1. Update version in `firefox/manifest.json`
|
||||
2. Re-package the extension
|
||||
3. Re-sign with Mozilla (if signed)
|
||||
4. Users get automatic updates if installed from Firefox Add-ons
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Chrome: "CRX_REQUIRED_PROOF_MISSING"
|
||||
- **Issue:** Chrome blocks unsigned extensions by default
|
||||
- **Solution:** Users must enable "Developer mode" to install
|
||||
- **Better:** Publish on Chrome Web Store
|
||||
|
||||
### Firefox: "Add-on appears corrupt"
|
||||
- **Issue:** ZIP structure is incorrect
|
||||
- **Solution:** Files must be at ZIP root, not in a subfolder
|
||||
- **Fix:** Re-create ZIP from inside the firefox folder
|
||||
|
||||
### Extension doesn't work after packaging
|
||||
- **Check:** All files are included
|
||||
- **Check:** manifest.json is valid (use JSON validator)
|
||||
- **Check:** Version number is correct
|
||||
- **Test:** Install on a fresh browser profile
|
||||
|
||||
### Chrome: Updates not working
|
||||
- **Issue:** Different `.pem` file used
|
||||
- **Solution:** Always use the same `.pem` file for updates
|
||||
- **Lost .pem?** You'll need to create a new extension (new ID)
|
||||
|
||||
---
|
||||
|
||||
## File Sizes
|
||||
|
||||
Your packaged extensions are:
|
||||
- **Chrome:** 62 KB (zipped)
|
||||
- **Firefox:** 62 KB (zipped)
|
||||
|
||||
Both include:
|
||||
- Extension code
|
||||
- Bootstrap 5.3.2 (CSS + JS)
|
||||
- Icons
|
||||
- Manifest files
|
||||
|
||||
---
|
||||
|
||||
## Publishing to Official Stores
|
||||
|
||||
### Chrome Web Store:
|
||||
1. Cost: $5 one-time developer fee
|
||||
2. URL: https://chrome.google.com/webstore/developer/dashboard
|
||||
3. Upload: The ZIP file (not CRX)
|
||||
4. Review: Usually 1-3 days
|
||||
5. Benefits: Automatic updates, no warnings, discoverable
|
||||
|
||||
### Firefox Add-ons:
|
||||
1. Cost: Free
|
||||
2. URL: https://addons.mozilla.org/developers/
|
||||
3. Upload: The ZIP file
|
||||
4. Options:
|
||||
- **Listed:** Public on addons.mozilla.org (reviewed)
|
||||
- **Unlisted:** Self-distribute signed version (instant)
|
||||
5. Benefits: Automatic signing, automatic updates
|
||||
|
||||
---
|
||||
|
||||
## Quick Commands
|
||||
|
||||
```bash
|
||||
# Package both browsers
|
||||
./package-all.sh
|
||||
|
||||
# Package Chrome only
|
||||
cd chrome && zip -r ../dist/greasyboii-chrome.zip *
|
||||
|
||||
# Package Firefox only
|
||||
cd firefox && zip -r ../dist/greasyboii-firefox.zip *
|
||||
|
||||
# Rename Firefox ZIP to XPI
|
||||
mv dist/greasyboii-firefox-v1.0.4.zip dist/greasyboii-firefox-v1.0.4.xpi
|
||||
|
||||
# Check package contents
|
||||
unzip -l dist/greasyboii-chrome-v1.0.4.zip
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Distribution Checklist
|
||||
|
||||
Before distributing:
|
||||
- ✅ Test packaged version thoroughly
|
||||
- ✅ Verify all features work
|
||||
- ✅ Check version numbers are correct
|
||||
- ✅ Include installation instructions
|
||||
- ✅ Mention browser compatibility
|
||||
- ✅ Provide support contact
|
||||
- ✅ Consider publishing to official stores
|
||||
|
||||
---
|
||||
|
||||
**Current Version:** 1.0.4
|
||||
**Package Size:** 62 KB
|
||||
**Ready to Distribute:** ✅ Yes
|
||||
|
||||
Enjoy sharing GreasyBoii! 🐒✨
|
||||
@@ -0,0 +1,94 @@
|
||||
Greasemonkey Browser Extension
|
||||
Author: Andy Dixon
|
||||
Version: 1.0.0
|
||||
|
||||
=== FILE STRUCTURE ===
|
||||
|
||||
greasemonkey/
|
||||
├── chrome/ Chrome Extension (Manifest V3)
|
||||
│ ├── manifest.json Extension configuration
|
||||
│ ├── background.js Background service worker
|
||||
│ ├── content.js Content script (runs on pages)
|
||||
│ ├── popup.html Extension popup UI
|
||||
│ ├── popup.css Popup styling (Bootstrap Dark)
|
||||
│ ├── popup.js Popup functionality
|
||||
│ ├── icon16.png 16x16 icon
|
||||
│ ├── icon48.png 48x48 icon
|
||||
│ └── icon128.png 128x128 icon
|
||||
│
|
||||
├── firefox/ Firefox Extension (Manifest V2)
|
||||
│ ├── manifest.json Extension configuration
|
||||
│ ├── background.js Background script
|
||||
│ ├── content.js Content script (runs on pages)
|
||||
│ ├── popup.html Extension popup UI
|
||||
│ ├── popup.css Popup styling (Bootstrap Dark)
|
||||
│ ├── popup.js Popup functionality
|
||||
│ ├── icon16.png 16x16 icon
|
||||
│ ├── icon48.png 48x48 icon
|
||||
│ └── icon128.png 128x128 icon
|
||||
│
|
||||
├── README.md Full documentation
|
||||
├── BUILD.md Build and distribution instructions
|
||||
├── QUICKSTART.md Quick start guide
|
||||
├── test-page.html Test page for trying rules
|
||||
└── MANIFEST.txt This file
|
||||
|
||||
=== FEATURES ===
|
||||
|
||||
✓ Execute custom JavaScript on any webpage
|
||||
✓ Inject custom CSS styles on any webpage
|
||||
✓ Three matching modes:
|
||||
- URL contains string
|
||||
- Page contains element (CSS selector)
|
||||
- Both URL and element match
|
||||
✓ Bootstrap 5 Dark theme UI
|
||||
✓ Add, edit, delete, and toggle rules
|
||||
✓ Persistent storage (synced across browser)
|
||||
✓ Multiple rules support
|
||||
✓ Visual rule indicators (type badges, JS/CSS badges)
|
||||
✓ Chrome and Firefox compatible
|
||||
|
||||
=== QUICK INSTALL ===
|
||||
|
||||
Chrome:
|
||||
1. chrome://extensions/
|
||||
2. Enable "Developer mode"
|
||||
3. Click "Load unpacked"
|
||||
4. Select the chrome/ folder
|
||||
|
||||
Firefox:
|
||||
1. about:debugging#/runtime/this-firefox
|
||||
2. Click "Load Temporary Add-on"
|
||||
3. Select firefox/manifest.json
|
||||
|
||||
=== USAGE ===
|
||||
|
||||
1. Click Greasemonkey icon in toolbar
|
||||
2. Click "+ Add Rule"
|
||||
3. Configure:
|
||||
- Name your rule
|
||||
- Choose match type
|
||||
- Enter URL pattern and/or element selector
|
||||
- Add JavaScript and/or CSS code
|
||||
4. Save and reload target page
|
||||
|
||||
=== DOCUMENTATION ===
|
||||
|
||||
- README.md - Complete feature documentation and examples
|
||||
- BUILD.md - Building and distribution instructions
|
||||
- QUICKSTART.md - 5-minute getting started guide
|
||||
- test-page.html - Interactive test page
|
||||
|
||||
=== NEXT STEPS ===
|
||||
|
||||
1. Read QUICKSTART.md to get started
|
||||
2. Try the test-page.html for examples
|
||||
3. Create your first rule
|
||||
4. Read README.md for advanced features
|
||||
5. See BUILD.md for distribution
|
||||
|
||||
=== SUPPORT ===
|
||||
|
||||
For questions or issues, contact Andy Dixon.
|
||||
|
||||
Enjoy! 🐒✨
|
||||
+368
@@ -0,0 +1,368 @@
|
||||
# How to Package GreasyBoii Extension
|
||||
|
||||
This guide shows you how to package GreasyBoii for distribution.
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Chrome/Edge (Easy Method)
|
||||
1. Open `chrome://extensions/`
|
||||
2. Enable "Developer mode" (top-right toggle)
|
||||
3. Click "Pack extension"
|
||||
4. For "Extension root directory" → Select the `chrome` folder
|
||||
5. Leave "Private key file" empty (first time)
|
||||
6. Click "Pack Extension"
|
||||
7. ✅ Done! You get 2 files:
|
||||
- `chrome.crx` - The packaged extension
|
||||
- `chrome.pem` - Private key (KEEP THIS SECURE!)
|
||||
|
||||
### Firefox (Command Line)
|
||||
```bash
|
||||
cd firefox
|
||||
zip -r ../greasyboii-firefox-v1.0.4.zip *
|
||||
```
|
||||
Done! You get `greasyboii-firefox-v1.0.4.zip`
|
||||
|
||||
---
|
||||
|
||||
## Detailed Instructions
|
||||
|
||||
## Chrome Extension Packaging
|
||||
|
||||
### Method 1: Chrome Built-in Packer (Recommended)
|
||||
|
||||
**Step 1: Open Extensions Page**
|
||||
```
|
||||
chrome://extensions/
|
||||
```
|
||||
|
||||
**Step 2: Enable Developer Mode**
|
||||
- Toggle the "Developer mode" switch in the top-right corner
|
||||
|
||||
**Step 3: Pack Extension**
|
||||
1. Click "Pack extension" button
|
||||
2. In the dialog:
|
||||
- **Extension root directory**: Browse and select `/path/to/greasemonkey/chrome`
|
||||
- **Private key file**: Leave empty (first time) or select your `.pem` file
|
||||
3. Click "Pack Extension"
|
||||
|
||||
**Step 4: Files Created**
|
||||
You'll get two files in the parent directory:
|
||||
- `chrome.crx` - The packed extension (ready to distribute)
|
||||
- `chrome.pem` - Your private key (KEEP THIS SECRET!)
|
||||
|
||||
**Important Notes:**
|
||||
- ⚠️ **Keep the `.pem` file secure** - You need it to update your extension
|
||||
- ⚠️ **Never share your `.pem` file** - Anyone with it can impersonate your extension
|
||||
- ✅ The `.crx` file is what you distribute to users
|
||||
|
||||
### Method 2: Command Line (Using Chrome)
|
||||
|
||||
```bash
|
||||
# Navigate to Chrome binary location
|
||||
# macOS
|
||||
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --pack-extension=/path/to/greasemonkey/chrome
|
||||
|
||||
# Windows
|
||||
"C:\Program Files\Google\Chrome\Application\chrome.exe" --pack-extension=C:\path\to\greasemonkey\chrome
|
||||
|
||||
# Linux
|
||||
google-chrome --pack-extension=/path/to/greasemonkey/chrome
|
||||
```
|
||||
|
||||
### Method 3: Create ZIP for Chrome Web Store
|
||||
|
||||
If you want to publish on Chrome Web Store:
|
||||
|
||||
```bash
|
||||
cd chrome
|
||||
zip -r ../greasyboii-chrome-v1.0.4.zip *
|
||||
```
|
||||
|
||||
Then upload the ZIP to [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard)
|
||||
|
||||
---
|
||||
|
||||
## Firefox Extension Packaging
|
||||
|
||||
### Method 1: Simple ZIP (Recommended for Testing)
|
||||
|
||||
**Create ZIP:**
|
||||
```bash
|
||||
cd firefox
|
||||
zip -r ../greasyboii-firefox-v1.0.4.zip *
|
||||
```
|
||||
|
||||
**Rename to XPI (optional):**
|
||||
```bash
|
||||
mv greasyboii-firefox-v1.0.4.zip greasyboii-firefox-v1.0.4.xpi
|
||||
```
|
||||
|
||||
**Install:**
|
||||
- Drag the `.xpi` file into Firefox
|
||||
- Or: `about:addons` → gear icon → "Install Add-on From File"
|
||||
|
||||
**Note:** Unsigned extensions show a warning. For permanent use, you need to sign it.
|
||||
|
||||
### Method 2: Using web-ext (Recommended for Distribution)
|
||||
|
||||
**Install web-ext:**
|
||||
```bash
|
||||
npm install -g web-ext
|
||||
```
|
||||
|
||||
**Build:**
|
||||
```bash
|
||||
cd firefox
|
||||
web-ext build
|
||||
```
|
||||
|
||||
This creates a signed ZIP in `web-ext-artifacts/` folder.
|
||||
|
||||
**Sign (requires Mozilla account):**
|
||||
```bash
|
||||
# Get API keys from https://addons.mozilla.org/developers/addon/api/key/
|
||||
web-ext sign \
|
||||
--api-key=YOUR_API_KEY \
|
||||
--api-secret=YOUR_API_SECRET
|
||||
```
|
||||
|
||||
**Run for testing:**
|
||||
```bash
|
||||
web-ext run
|
||||
```
|
||||
|
||||
This opens Firefox with your extension loaded.
|
||||
|
||||
---
|
||||
|
||||
## Distribution Options
|
||||
|
||||
### Option 1: Direct Distribution (Self-Hosted)
|
||||
|
||||
**Chrome (.crx file):**
|
||||
1. Pack the extension (see above)
|
||||
2. Host the `.crx` file on your website
|
||||
3. Users download and drag it to `chrome://extensions/`
|
||||
4. ⚠️ Chrome will show "unverified" warning
|
||||
|
||||
**Firefox (.xpi file):**
|
||||
1. Create and sign the extension
|
||||
2. Host the `.xpi` file on your website
|
||||
3. Users click to install
|
||||
4. ⚠️ Unsigned extensions need special Firefox config
|
||||
|
||||
### Option 2: Official Store Distribution
|
||||
|
||||
**Chrome Web Store:**
|
||||
1. Create developer account ($5 one-time fee)
|
||||
2. Go to [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard)
|
||||
3. Click "New Item"
|
||||
4. Upload your ZIP file
|
||||
5. Fill in listing details
|
||||
6. Submit for review
|
||||
7. ✅ Published after approval (usually 1-3 days)
|
||||
|
||||
**Firefox Add-ons:**
|
||||
1. Create account at [addons.mozilla.org](https://addons.mozilla.org/developers/)
|
||||
2. Submit new add-on
|
||||
3. Upload your ZIP/XPI
|
||||
4. Choose:
|
||||
- **Listed**: Public on addons.mozilla.org (requires review)
|
||||
- **Unlisted**: Self-distribute signed version (automatic)
|
||||
5. ✅ Get signed version immediately (unlisted) or after review (listed)
|
||||
|
||||
---
|
||||
|
||||
## Automation Scripts
|
||||
|
||||
I've created helper scripts for you:
|
||||
|
||||
### package-chrome.sh
|
||||
```bash
|
||||
#!/bin/bash
|
||||
cd chrome
|
||||
zip -r ../dist/greasyboii-chrome-v1.0.4.zip * -x "*.DS_Store"
|
||||
echo "✅ Chrome package created: dist/greasyboii-chrome-v1.0.4.zip"
|
||||
```
|
||||
|
||||
### package-firefox.sh
|
||||
```bash
|
||||
#!/bin/bash
|
||||
cd firefox
|
||||
zip -r ../dist/greasyboii-firefox-v1.0.4.zip * -x "*.DS_Store"
|
||||
echo "✅ Firefox package created: dist/greasyboii-firefox-v1.0.4.zip"
|
||||
```
|
||||
|
||||
### package-all.sh
|
||||
```bash
|
||||
#!/bin/bash
|
||||
mkdir -p dist
|
||||
|
||||
echo "📦 Packaging Chrome extension..."
|
||||
cd chrome
|
||||
zip -r ../dist/greasyboii-chrome-v1.0.4.zip * -x "*.DS_Store"
|
||||
cd ..
|
||||
|
||||
echo "📦 Packaging Firefox extension..."
|
||||
cd firefox
|
||||
zip -r ../dist/greasyboii-firefox-v1.0.4.zip * -x "*.DS_Store"
|
||||
cd ..
|
||||
|
||||
echo "✅ All packages created in dist/ folder!"
|
||||
ls -lh dist/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## File Checklist
|
||||
|
||||
Before packaging, ensure these files exist:
|
||||
|
||||
### Chrome folder must have:
|
||||
- ✅ manifest.json
|
||||
- ✅ background.js
|
||||
- ✅ content.js
|
||||
- ✅ popup.html
|
||||
- ✅ popup.css
|
||||
- ✅ popup.js
|
||||
- ✅ bootstrap.min.css
|
||||
- ✅ bootstrap.bundle.min.js
|
||||
- ✅ icon16.png
|
||||
- ✅ icon48.png
|
||||
- ✅ icon128.png
|
||||
|
||||
### Firefox folder must have:
|
||||
- ✅ manifest.json
|
||||
- ✅ background.js
|
||||
- ✅ content.js
|
||||
- ✅ popup.html
|
||||
- ✅ popup.css
|
||||
- ✅ popup.js
|
||||
- ✅ bootstrap.min.css
|
||||
- ✅ bootstrap.bundle.min.js
|
||||
- ✅ icon16.png
|
||||
- ✅ icon48.png
|
||||
- ✅ icon128.png
|
||||
|
||||
---
|
||||
|
||||
## Testing Packaged Extension
|
||||
|
||||
### Chrome:
|
||||
1. Go to `chrome://extensions/`
|
||||
2. Drag the `.crx` file into the window
|
||||
3. Click "Add extension"
|
||||
4. Test all features
|
||||
|
||||
### Firefox:
|
||||
1. Go to `about:addons`
|
||||
2. Click gear icon → "Install Add-on From File"
|
||||
3. Select your `.xpi` or `.zip` file
|
||||
4. Click "Add"
|
||||
5. Test all features
|
||||
|
||||
---
|
||||
|
||||
## Version Updates
|
||||
|
||||
When releasing a new version:
|
||||
|
||||
1. **Update version in manifests:**
|
||||
```json
|
||||
"version": "1.0.5"
|
||||
```
|
||||
|
||||
2. **For Chrome:**
|
||||
- Use the SAME `.pem` file when packing
|
||||
- This ensures it's recognized as an update
|
||||
|
||||
3. **For Firefox:**
|
||||
- Increment version number
|
||||
- Re-sign with same API keys
|
||||
- Upload to addons.mozilla.org
|
||||
|
||||
4. **Update documentation:**
|
||||
- README.md
|
||||
- CHANGELOG.md
|
||||
- Any version references
|
||||
|
||||
---
|
||||
|
||||
## Common Issues
|
||||
|
||||
### Chrome: "Package is invalid: CRX_REQUIRED_PROOF_MISSING"
|
||||
- **Solution**: Users must enable "Developer mode" to install unsigned extensions
|
||||
- **Better solution**: Publish on Chrome Web Store
|
||||
|
||||
### Firefox: "This add-on could not be installed because it appears to be corrupt"
|
||||
- **Solution**: Check ZIP file structure - files should be at root, not in a subfolder
|
||||
- **Fix**: Re-create ZIP from inside the firefox folder
|
||||
|
||||
### Chrome: "Extension update failed"
|
||||
- **Solution**: Use the same `.pem` file for updates
|
||||
- **Lost .pem?**: You'll need to create a new extension (new ID)
|
||||
|
||||
### Firefox: "This add-on is not signed"
|
||||
- **Solution**: Sign it with Mozilla or enable unsigned extensions
|
||||
- **Enable unsigned**: `about:config` → `xpinstall.signatures.required` → false (Firefox Developer Edition only)
|
||||
|
||||
---
|
||||
|
||||
## Security Notes
|
||||
|
||||
- ⚠️ **Never commit `.pem` files to version control**
|
||||
- ⚠️ **Keep your API keys secret**
|
||||
- ⚠️ **Don't bundle unnecessary files** (documentation, source maps, etc.)
|
||||
- ✅ **Only include required files** in the package
|
||||
- ✅ **Test packaged version** before distributing
|
||||
|
||||
---
|
||||
|
||||
## Quick Commands Reference
|
||||
|
||||
```bash
|
||||
# Create distribution folder
|
||||
mkdir -p dist
|
||||
|
||||
# Package Chrome (ZIP for Web Store)
|
||||
cd chrome && zip -r ../dist/greasyboii-chrome.zip * && cd ..
|
||||
|
||||
# Package Firefox (ZIP)
|
||||
cd firefox && zip -r ../dist/greasyboii-firefox.zip * && cd ..
|
||||
|
||||
# Package Firefox (XPI)
|
||||
cd firefox && zip -r ../dist/greasyboii-firefox.xpi * && cd ..
|
||||
|
||||
# Install web-ext (Firefox tool)
|
||||
npm install -g web-ext
|
||||
|
||||
# Build with web-ext
|
||||
cd firefox && web-ext build
|
||||
|
||||
# Run Firefox with extension
|
||||
cd firefox && web-ext run
|
||||
|
||||
# Sign Firefox extension
|
||||
cd firefox && web-ext sign --api-key=KEY --api-secret=SECRET
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **Test locally first** - Make sure everything works
|
||||
2. **Create packages** - Use scripts above
|
||||
3. **Test packages** - Install and verify
|
||||
4. **Decide distribution method**:
|
||||
- Self-host for personal use
|
||||
- Chrome Web Store for public Chrome users
|
||||
- Firefox Add-ons for public Firefox users
|
||||
5. **Update version numbers** for future releases
|
||||
|
||||
---
|
||||
|
||||
**Current Version:** 1.0.4
|
||||
**Ready to Package:** ✅ Yes
|
||||
**All Files Present:** ✅ Yes
|
||||
|
||||
Happy packaging! 🐒✨
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
# Greasemonkey Quick Start Guide
|
||||
|
||||
Get up and running with Greasemonkey in 5 minutes!
|
||||
|
||||
## Installation
|
||||
|
||||
### Chrome
|
||||
1. Open Chrome
|
||||
2. Go to `chrome://extensions/`
|
||||
3. Enable "Developer mode" (top-right toggle)
|
||||
4. Click "Load unpacked"
|
||||
5. Select the `chrome` folder
|
||||
6. Done! 🎉
|
||||
|
||||
### Firefox
|
||||
1. Open Firefox
|
||||
2. Go to `about:debugging#/runtime/this-firefox`
|
||||
3. Click "Load Temporary Add-on"
|
||||
4. Select `firefox/manifest.json`
|
||||
5. Done! 🎉
|
||||
|
||||
## Your First Rule
|
||||
|
||||
Let's create a simple rule that changes Google's background color:
|
||||
|
||||
1. **Click the Greasemonkey icon** in your browser toolbar
|
||||
2. **Click "+ Add Rule"**
|
||||
3. **Fill in the form:**
|
||||
- Rule Name: `Google Dark Background`
|
||||
- Match Type: `URL contains string`
|
||||
- URL Pattern: `google.com`
|
||||
- CSS Code:
|
||||
```css
|
||||
body {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
```
|
||||
- Leave JavaScript blank
|
||||
- Keep Enabled checked
|
||||
4. **Click "Save Rule"**
|
||||
5. **Visit google.com** and see the dark background!
|
||||
|
||||
## Testing with Test Page
|
||||
|
||||
A test page is included: `test-page.html`
|
||||
|
||||
1. Open `test-page.html` in your browser
|
||||
2. Create a rule:
|
||||
- Rule Name: `Test Page Alert`
|
||||
- Match Type: `Page contains element`
|
||||
- Element Selector: `#test-element-1`
|
||||
- JavaScript Code:
|
||||
```javascript
|
||||
alert('Greasemonkey is working!');
|
||||
```
|
||||
3. Reload the test page
|
||||
4. You should see an alert!
|
||||
|
||||
## Common Use Cases
|
||||
|
||||
### Hide Annoying Elements
|
||||
```css
|
||||
.advertisement,
|
||||
.popup-banner,
|
||||
#cookie-notice {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Change Colors
|
||||
```css
|
||||
body {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Auto-Click Buttons
|
||||
```javascript
|
||||
const button = document.querySelector('.accept-button');
|
||||
if (button) button.click();
|
||||
```
|
||||
|
||||
### Add Custom Content
|
||||
```javascript
|
||||
const banner = document.createElement('div');
|
||||
banner.textContent = 'Custom banner added by Greasemonkey!';
|
||||
banner.style.cssText = 'position:fixed;top:0;width:100%;background:red;color:white;padding:10px;z-index:9999;';
|
||||
document.body.insertBefore(banner, document.body.firstChild);
|
||||
```
|
||||
|
||||
## Tips
|
||||
|
||||
- **Use `!important`** in CSS to override existing styles
|
||||
- **Check the console** (F12) for error messages
|
||||
- **Start simple** and test before adding complex rules
|
||||
- **Toggle rules off** if they cause problems
|
||||
- **Element selectors** can be found by right-clicking → Inspect Element
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Rule not working?**
|
||||
- ✓ Is the rule enabled? (check the toggle)
|
||||
- ✓ Does the URL pattern match? (try a shorter string)
|
||||
- ✓ Does the element exist? (test in console: `document.querySelector('selector')`)
|
||||
- ✓ Did you reload the page?
|
||||
|
||||
**CSS not applying?**
|
||||
- Add `!important` to CSS rules
|
||||
- Check for syntax errors
|
||||
|
||||
**JavaScript not running?**
|
||||
- Check browser console (F12) for errors
|
||||
- Test code in console first
|
||||
|
||||
## Next Steps
|
||||
|
||||
- Read the full [README.md](README.md) for detailed documentation
|
||||
- See [BUILD.md](BUILD.md) for distribution instructions
|
||||
- Experiment with different selectors and code
|
||||
- Share your rules with others!
|
||||
|
||||
## Example: Complete Rule
|
||||
|
||||
Here's a complete rule that works on GitHub to highlight pull requests:
|
||||
|
||||
- **Rule Name:** `GitHub PR Highlight`
|
||||
- **Match Type:** `Both URL and element`
|
||||
- **URL Pattern:** `github.com`
|
||||
- **Element Selector:** `.js-issue-row`
|
||||
- **CSS Code:**
|
||||
```css
|
||||
.js-issue-row {
|
||||
border-left: 4px solid #28a745 !important;
|
||||
background-color: #f0fff4 !important;
|
||||
}
|
||||
```
|
||||
- **JavaScript Code:**
|
||||
```javascript
|
||||
console.log('GitHub PR highlighting active');
|
||||
```
|
||||
|
||||
## Help
|
||||
|
||||
Need help? Check:
|
||||
- Browser console (F12) for errors
|
||||
- README.md for full documentation
|
||||
- Element inspector to find correct selectors
|
||||
|
||||
Happy scripting! 🐒✨
|
||||
@@ -0,0 +1,100 @@
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
GREASYBOII PACKAGING GUIDE
|
||||
Quick Reference
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
✅ ALREADY PACKAGED!
|
||||
|
||||
Files ready in dist/ folder:
|
||||
• greasyboii-chrome-v1.0.4.zip (62 KB)
|
||||
• greasyboii-firefox-v1.0.4.zip (62 KB)
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
🚀 QUICK INSTALL
|
||||
|
||||
Chrome:
|
||||
1. Extract ZIP
|
||||
2. chrome://extensions/
|
||||
3. Enable "Developer mode"
|
||||
4. "Load unpacked" → select folder
|
||||
5. Done!
|
||||
|
||||
Firefox:
|
||||
1. Rename .zip to .xpi
|
||||
2. Drag .xpi into Firefox
|
||||
3. Click "Add"
|
||||
4. Done!
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
📦 RE-PACKAGE (if needed)
|
||||
|
||||
Run the script:
|
||||
./package-all.sh
|
||||
|
||||
Or manually:
|
||||
cd chrome && zip -r ../dist/greasyboii-chrome.zip *
|
||||
cd firefox && zip -r ../dist/greasyboii-firefox.zip *
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
🎁 CREATE .CRX FOR CHROME (Shareable)
|
||||
|
||||
1. chrome://extensions/
|
||||
2. Developer mode ON
|
||||
3. "Pack extension"
|
||||
4. Select chrome/ folder
|
||||
5. Leave private key empty
|
||||
6. Get chrome.crx file
|
||||
7. Share this file!
|
||||
|
||||
Users install: Drag chrome.crx to chrome://extensions/
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
🦊 CREATE .XPI FOR FIREFOX (Shareable)
|
||||
|
||||
Simply rename:
|
||||
mv dist/greasyboii-firefox-v1.0.4.zip dist/greasyboii-firefox-v1.0.4.xpi
|
||||
|
||||
Share the .xpi file!
|
||||
|
||||
Users install: Drag .xpi into Firefox
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
📚 DOCUMENTATION
|
||||
|
||||
• PACKAGING.md - Full packaging guide
|
||||
• INSTALL_PACKAGED.md - Installation instructions
|
||||
• BUILD.md - Build instructions
|
||||
• README.md - Complete documentation
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
🏪 PUBLISH TO STORES
|
||||
|
||||
Chrome Web Store:
|
||||
• $5 one-time fee
|
||||
• https://chrome.google.com/webstore/developer/dashboard
|
||||
• Upload ZIP file
|
||||
• Review takes 1-3 days
|
||||
|
||||
Firefox Add-ons:
|
||||
• Free
|
||||
• https://addons.mozilla.org/developers/
|
||||
• Upload ZIP file
|
||||
• Choose Listed or Unlisted
|
||||
• Instant signing for unlisted
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
✅ YOUR PACKAGES ARE READY!
|
||||
|
||||
Files: dist/greasyboii-chrome-v1.0.4.zip
|
||||
dist/greasyboii-firefox-v1.0.4.zip
|
||||
|
||||
Ready to: Install, Share, or Publish!
|
||||
|
||||
═══════════════════════════════════════════════════════════════════════
|
||||
@@ -0,0 +1,314 @@
|
||||
# Greasemonkey Browser Extension
|
||||
|
||||
**Author:** Andy Dixon
|
||||
**Version:** 1.0.0
|
||||
|
||||
A powerful browser extension that allows you to execute custom JavaScript and CSS on web pages based on flexible matching conditions.
|
||||
|
||||
## Features
|
||||
|
||||
- 🎯 **Flexible Matching**: Execute scripts when:
|
||||
- A URL contains a specific string
|
||||
- A page contains a specific element (CSS selector)
|
||||
- Both conditions are met simultaneously
|
||||
|
||||
- 🎨 **Bootstrap Dark UI**: Intuitive configuration interface with Bootstrap 5 dark theme
|
||||
- 💾 **Persistent Storage**: All rules are saved and synced across your browser sessions
|
||||
- ⚡ **Multiple Rules**: Add, edit, and manage unlimited custom rules
|
||||
- 🔄 **Toggle Controls**: Easily enable/disable individual rules
|
||||
- 📝 **JavaScript & CSS**: Support for both JavaScript execution and CSS injection
|
||||
- 🔍 **Visual Indicators**: Clear badges showing rule type (URL/Element/Both) and code types (JS/CSS)
|
||||
|
||||
## Installation
|
||||
|
||||
### Chrome Installation
|
||||
|
||||
1. Navigate to the `chrome` directory
|
||||
2. Open Chrome and go to `chrome://extensions/`
|
||||
3. Enable "Developer mode" (toggle in top-right corner)
|
||||
4. Click "Load unpacked"
|
||||
5. Select the `chrome` directory
|
||||
6. The Greasemonkey extension is now installed!
|
||||
|
||||
### Firefox Installation
|
||||
|
||||
1. Navigate to the `firefox` directory
|
||||
2. Open Firefox and go to `about:debugging#/runtime/this-firefox`
|
||||
3. Click "Load Temporary Add-on"
|
||||
4. Select the `manifest.json` file from the `firefox` directory
|
||||
5. The Greasemonkey extension is now installed!
|
||||
|
||||
**Note:** For permanent Firefox installation, you'll need to sign the extension through [addons.mozilla.org](https://addons.mozilla.org).
|
||||
|
||||
## Usage
|
||||
|
||||
### Creating a Rule
|
||||
|
||||
1. Click the Greasemonkey icon in your browser toolbar
|
||||
2. Click the "+ Add Rule" button
|
||||
3. Fill in the rule details:
|
||||
- **Rule Name**: A descriptive name for your rule
|
||||
- **Match Type**: Choose how the rule should be triggered
|
||||
- *URL contains string*: Matches if URL contains the pattern
|
||||
- *Page contains element*: Matches if element selector exists
|
||||
- *Both URL and element*: Requires both conditions
|
||||
- **URL Pattern**: The string to match in the URL (e.g., `github.com`, `/search?`)
|
||||
- **Element Selector**: CSS selector to match (e.g., `#my-element`, `.my-class`, `div[data-id="123"]`)
|
||||
- **JavaScript Code**: Custom JavaScript to execute
|
||||
- **CSS Code**: Custom CSS to inject
|
||||
- **Enabled**: Toggle to enable/disable the rule
|
||||
4. Click "Save Rule"
|
||||
|
||||
### Editing a Rule
|
||||
|
||||
1. Open the Greasemonkey popup
|
||||
2. Click the edit button (pencil icon) on any rule card
|
||||
3. Modify the rule details
|
||||
4. Click "Save Rule"
|
||||
|
||||
### Deleting a Rule
|
||||
|
||||
1. Open the Greasemonkey popup
|
||||
2. Click the delete button (trash icon) on any rule card
|
||||
3. Confirm the deletion
|
||||
|
||||
### Toggling a Rule
|
||||
|
||||
Use the toggle switch on each rule card to quickly enable or disable rules without editing them.
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Hide Ads on Specific Sites
|
||||
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** `example.com`
|
||||
**CSS Code:**
|
||||
```css
|
||||
.advertisement,
|
||||
.ad-banner,
|
||||
#sidebar-ads {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Example 2: Auto-fill Forms
|
||||
|
||||
**Match Type:** Both URL and element
|
||||
**URL Pattern:** `form-site.com`
|
||||
**Element Selector:** `#login-form`
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
document.getElementById('username').value = 'myusername';
|
||||
console.log('Auto-filled username field');
|
||||
```
|
||||
|
||||
### Example 3: Dark Mode Override
|
||||
|
||||
**Match Type:** URL contains string
|
||||
**URL Pattern:** `news-site.com`
|
||||
**CSS Code:**
|
||||
```css
|
||||
body {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4a9eff !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Example 4: Add Custom Features
|
||||
|
||||
**Match Type:** Element exists
|
||||
**Element Selector:** `.video-player`
|
||||
**JavaScript Code:**
|
||||
```javascript
|
||||
console.log('Video player detected!');
|
||||
|
||||
// Add a custom button
|
||||
const button = document.createElement('button');
|
||||
button.textContent = 'Custom Action';
|
||||
button.style.cssText = 'position:fixed;top:10px;right:10px;z-index:9999;';
|
||||
button.onclick = () => alert('Custom button clicked!');
|
||||
document.body.appendChild(button);
|
||||
```
|
||||
|
||||
### Example 5: Conditional Styling
|
||||
|
||||
**Match Type:** Both URL and element
|
||||
**URL Pattern:** `dashboard`
|
||||
**Element Selector:** `.data-table`
|
||||
**CSS Code:**
|
||||
```css
|
||||
.data-table {
|
||||
border: 2px solid #4CAF50;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
## Technical Details
|
||||
|
||||
### File Structure
|
||||
|
||||
```
|
||||
greasemonkey/
|
||||
├── chrome/ # Chrome extension files
|
||||
│ ├── manifest.json # Chrome extension manifest (v3)
|
||||
│ ├── background.js # Background service worker
|
||||
│ ├── content.js # Content script (runs on pages)
|
||||
│ ├── popup.html # Extension popup UI
|
||||
│ ├── popup.css # Popup styling
|
||||
│ ├── popup.js # Popup functionality
|
||||
│ └── icon*.png # Extension icons
|
||||
├── firefox/ # Firefox extension files
|
||||
│ ├── manifest.json # Firefox extension manifest (v2)
|
||||
│ ├── background.js # Background script
|
||||
│ ├── content.js # Content script (runs on pages)
|
||||
│ ├── popup.html # Extension popup UI
|
||||
│ ├── popup.css # Popup styling
|
||||
│ ├── popup.js # Popup functionality
|
||||
│ └── icon*.png # Extension icons
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
### How It Works
|
||||
|
||||
1. **Content Script**: Runs on every page load (`document_idle`)
|
||||
2. **Rule Matching**: Checks all enabled rules against current page
|
||||
3. **Condition Evaluation**: Tests URL patterns and element selectors
|
||||
4. **Code Execution**:
|
||||
- JavaScript is injected as a script element
|
||||
- CSS is injected as a style element
|
||||
5. **Storage**: Rules are stored in browser's sync storage
|
||||
|
||||
### Storage Format
|
||||
|
||||
Rules are stored as JSON in browser sync storage:
|
||||
|
||||
```javascript
|
||||
{
|
||||
"rules": [
|
||||
{
|
||||
"name": "Example Rule",
|
||||
"matchType": "url",
|
||||
"urlPattern": "example.com",
|
||||
"elementSelector": "",
|
||||
"javascript": "console.log('Hello');",
|
||||
"css": "body { background: red; }",
|
||||
"enabled": true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Browser Compatibility
|
||||
|
||||
- **Chrome**: Requires Chrome 88+ (Manifest V3)
|
||||
- **Firefox**: Requires Firefox 48+ (Manifest V2)
|
||||
- **Edge**: Should work (Chromium-based, same as Chrome)
|
||||
- **Opera**: Should work (Chromium-based, same as Chrome)
|
||||
|
||||
## Building for Distribution
|
||||
|
||||
### Chrome
|
||||
|
||||
1. Ensure all files are in the `chrome` directory
|
||||
2. Go to `chrome://extensions/`
|
||||
3. Click "Pack extension"
|
||||
4. Select the `chrome` directory
|
||||
5. This creates a `.crx` file for distribution
|
||||
|
||||
### Firefox
|
||||
|
||||
1. Install `web-ext` tool: `npm install -g web-ext`
|
||||
2. Navigate to the `firefox` directory
|
||||
3. Run: `web-ext build`
|
||||
4. This creates a `.zip` file in `web-ext-artifacts/`
|
||||
5. Submit to [addons.mozilla.org](https://addons.mozilla.org) for signing
|
||||
|
||||
## Security Considerations
|
||||
|
||||
- **User Responsibility**: Be cautious with JavaScript code execution
|
||||
- **HTTPS**: Script injection works on both HTTP and HTTPS sites
|
||||
- **CSP**: Some sites with strict Content Security Policy may block injected scripts
|
||||
- **Permissions**: Extension requires broad permissions (`<all_urls>`) to work on all sites
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Rules Not Executing
|
||||
|
||||
1. **Check the browser console** for error messages (F12)
|
||||
2. **Verify the rule is enabled** (toggle switch)
|
||||
3. **Test the URL pattern** - ensure it matches the current page
|
||||
4. **Test the element selector** - open console and run `document.querySelector('your-selector')`
|
||||
5. **Reload the page** after creating/editing rules
|
||||
|
||||
### CSS Not Applying
|
||||
|
||||
- Use `!important` flag to override existing styles
|
||||
- Check for syntax errors in CSS
|
||||
- Verify the rule conditions are met
|
||||
|
||||
### JavaScript Not Running
|
||||
|
||||
- Check browser console for errors
|
||||
- Ensure JavaScript syntax is correct
|
||||
- Some sites may have strict Content Security Policies
|
||||
|
||||
### Storage Not Syncing
|
||||
|
||||
- Ensure browser sync is enabled
|
||||
- Check available storage quota
|
||||
- For Firefox temporary add-ons, sync storage may not persist
|
||||
|
||||
## Development
|
||||
|
||||
### Local Development
|
||||
|
||||
1. Make changes to files in `chrome/` or `firefox/` directories
|
||||
2. Reload the extension:
|
||||
- **Chrome**: Go to `chrome://extensions/` and click reload icon
|
||||
- **Firefox**: Go to `about:debugging` and click reload
|
||||
3. Test your changes
|
||||
|
||||
### Debugging
|
||||
|
||||
- **Background Script**: Check browser console in extension management page
|
||||
- **Content Script**: Check page console (F12)
|
||||
- **Popup**: Right-click popup and select "Inspect"
|
||||
|
||||
## Privacy
|
||||
|
||||
- No data is sent to external servers
|
||||
- All rules are stored locally in browser storage
|
||||
- No analytics or tracking
|
||||
- No network requests made by the extension
|
||||
|
||||
## License
|
||||
|
||||
This extension is provided as-is for personal and educational use.
|
||||
|
||||
## Support
|
||||
|
||||
For issues, questions, or feature requests, please contact Andy Dixon.
|
||||
|
||||
## Version History
|
||||
|
||||
### 1.0.0 (Initial Release)
|
||||
- URL pattern matching
|
||||
- Element selector matching
|
||||
- Combined URL + Element matching
|
||||
- JavaScript execution
|
||||
- CSS injection
|
||||
- Bootstrap dark theme UI
|
||||
- Add/Edit/Delete rules
|
||||
- Enable/Disable toggle
|
||||
- Persistent storage
|
||||
- Chrome and Firefox support
|
||||
+213
@@ -0,0 +1,213 @@
|
||||
# 🐒 Greasemonkey - START HERE
|
||||
|
||||
**Welcome to Greasemonkey!** This browser extension lets you execute custom JavaScript and CSS on any webpage.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start (Choose Your Path)
|
||||
|
||||
### Path 1: I Want To Use It NOW (5 minutes)
|
||||
→ **Read [QUICKSTART.md](QUICKSTART.md)** - Get up and running immediately
|
||||
|
||||
### Path 2: I Want Example Rules
|
||||
→ **Read [EXAMPLES.md](EXAMPLES.md)** - 20+ ready-to-use rules to copy/paste
|
||||
|
||||
### Path 3: I Want Complete Documentation
|
||||
→ **Read [README.md](README.md)** - Full feature documentation and usage guide
|
||||
|
||||
### Path 4: I Want To Test It First
|
||||
→ **Open [test-page.html](test-page.html)** in your browser - Interactive test environment
|
||||
|
||||
### Path 5: I Want To Distribute It
|
||||
→ **Read [BUILD.md](BUILD.md)** - Building and distribution instructions
|
||||
|
||||
---
|
||||
|
||||
## 📦 Installation (Pick Your Browser)
|
||||
|
||||
### Google Chrome / Microsoft Edge
|
||||
```
|
||||
1. Open chrome://extensions/
|
||||
2. Enable "Developer mode" (top-right toggle)
|
||||
3. Click "Load unpacked"
|
||||
4. Select the chrome/ folder
|
||||
```
|
||||
|
||||
### Mozilla Firefox
|
||||
```
|
||||
1. Open about:debugging#/runtime/this-firefox
|
||||
2. Click "Load Temporary Add-on"
|
||||
3. Select firefox/manifest.json
|
||||
```
|
||||
|
||||
**That's it!** The Greasemonkey icon appears in your toolbar.
|
||||
|
||||
---
|
||||
|
||||
## 📚 Documentation Map
|
||||
|
||||
| File | What It Contains | When To Read |
|
||||
|------|------------------|--------------|
|
||||
| **QUICKSTART.md** | 5-minute tutorial | First time setup |
|
||||
| **EXAMPLES.md** | 20+ example rules | When you need ideas |
|
||||
| **README.md** | Complete documentation | Learning all features |
|
||||
| **BUILD.md** | Build instructions | Distributing the extension |
|
||||
| **test-page.html** | Test environment | Testing your rules |
|
||||
| **PROJECT_SUMMARY.md** | Project overview | Understanding the codebase |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 What Can I Do With This?
|
||||
|
||||
### Popular Use Cases
|
||||
- 🌙 **Add Dark Mode** to any website
|
||||
- 🚫 **Block Ads** and unwanted content
|
||||
- ⚡ **Automate Tasks** like form filling
|
||||
- 🎨 **Customize Design** of your favorite sites
|
||||
- 🔧 **Add Features** that websites are missing
|
||||
- 🔐 **Enhance Privacy** by removing trackers
|
||||
- ♿ **Improve Accessibility** with custom styles
|
||||
- 📝 **Inject Tools** like notepads or calculators
|
||||
|
||||
### Example: Make Any Site Dark
|
||||
1. Click Greasemonkey icon
|
||||
2. Add rule: URL contains `example.com`
|
||||
3. Add CSS: `body { background: #1a1a1a !important; color: #e0e0e0 !important; }`
|
||||
4. Visit example.com → Dark theme!
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Learning Path
|
||||
|
||||
**Total Time: ~30 minutes**
|
||||
|
||||
1. **Install** (5 min) → Follow installation steps above
|
||||
2. **Quick Start** (5 min) → Read QUICKSTART.md
|
||||
3. **First Rule** (5 min) → Create your first rule
|
||||
4. **Test** (5 min) → Open test-page.html and experiment
|
||||
5. **Examples** (10 min) → Browse EXAMPLES.md for ideas
|
||||
6. **Customize** (∞) → Start customizing your favorite sites!
|
||||
|
||||
---
|
||||
|
||||
## 📋 Features Checklist
|
||||
|
||||
✅ URL pattern matching
|
||||
✅ CSS selector matching
|
||||
✅ Combined URL + element matching
|
||||
✅ JavaScript execution
|
||||
✅ CSS injection
|
||||
✅ Bootstrap dark theme UI
|
||||
✅ Add/edit/delete rules
|
||||
✅ Enable/disable toggles
|
||||
✅ Persistent storage
|
||||
✅ Chrome support (Manifest V3)
|
||||
✅ Firefox support (Manifest V2)
|
||||
✅ Complete documentation
|
||||
✅ Example library
|
||||
✅ Test page
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Technical Details
|
||||
|
||||
**Architecture:**
|
||||
- Content scripts inject at page load
|
||||
- Bootstrap 5 dark theme UI
|
||||
- Sync storage for persistence
|
||||
- No external dependencies
|
||||
|
||||
**Browser Support:**
|
||||
- Chrome 88+ (Manifest V3)
|
||||
- Firefox 48+ (Manifest V2)
|
||||
- Edge, Opera (Chromium-based)
|
||||
|
||||
**File Count:**
|
||||
- 9 files per browser
|
||||
- 7 documentation files
|
||||
- 1 test page
|
||||
- Total: 26 files
|
||||
|
||||
---
|
||||
|
||||
## 🆘 Common Questions
|
||||
|
||||
**Q: Is it safe?**
|
||||
A: Yes! No external servers, no tracking. All code runs locally. Be cautious with JavaScript you execute.
|
||||
|
||||
**Q: Will it slow down my browser?**
|
||||
A: No. Scripts only run when conditions match, and inject efficiently at page load.
|
||||
|
||||
**Q: Can I share my rules?**
|
||||
A: Yes! Copy the rule configuration and share. Rules are just text in your browser storage.
|
||||
|
||||
**Q: Do I need programming knowledge?**
|
||||
A: Basic knowledge helps, but you can start with examples from EXAMPLES.md and modify them.
|
||||
|
||||
**Q: Can I break websites?**
|
||||
A: Unlikely to cause permanent issues. Just disable the rule if something goes wrong. Refresh to reset.
|
||||
|
||||
**Q: Does it work on all websites?**
|
||||
A: Yes, except some with strict Content Security Policy. Works on 99% of sites.
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
**Rule not working?**
|
||||
1. Check rule is enabled (toggle switch)
|
||||
2. Verify URL pattern matches current page
|
||||
3. Test element selector in console: `document.querySelector('selector')`
|
||||
4. Check browser console (F12) for errors
|
||||
5. Reload the page after creating/editing rules
|
||||
|
||||
**More help:** See troubleshooting section in [README.md](README.md)
|
||||
|
||||
---
|
||||
|
||||
## 📞 Support
|
||||
|
||||
- **Questions?** Check README.md troubleshooting section
|
||||
- **Bugs?** Check browser console for errors
|
||||
- **Ideas?** Browse EXAMPLES.md for inspiration
|
||||
- **Contact:** Andy Dixon (extension author)
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Ready To Start!
|
||||
|
||||
**Recommended first steps:**
|
||||
|
||||
1. ✅ Install extension in your browser (see above)
|
||||
2. ✅ Read [QUICKSTART.md](QUICKSTART.md) (5 minutes)
|
||||
3. ✅ Open [test-page.html](test-page.html) in browser
|
||||
4. ✅ Create your first rule
|
||||
5. ✅ Browse [EXAMPLES.md](EXAMPLES.md) for more ideas
|
||||
|
||||
---
|
||||
|
||||
## 📁 File Reference
|
||||
|
||||
```
|
||||
greasemonkey/
|
||||
├── START_HERE.md ← You are here!
|
||||
├── QUICKSTART.md ← Start here for installation
|
||||
├── EXAMPLES.md ← 20+ ready-to-use rules
|
||||
├── README.md ← Complete documentation
|
||||
├── BUILD.md ← Distribution guide
|
||||
├── test-page.html ← Test environment
|
||||
├── chrome/ ← Chrome extension files
|
||||
└── firefox/ ← Firefox extension files
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Author:** Andy Dixon
|
||||
**Version:** 1.0.0
|
||||
**License:** Personal and educational use
|
||||
|
||||
---
|
||||
|
||||
### 🚀 Let's Go!
|
||||
|
||||
Pick your path above and start customizing the web! 🐒✨
|
||||
@@ -0,0 +1,231 @@
|
||||
# Greasemonkey Troubleshooting Guide
|
||||
|
||||
## "Add Rule" Button Not Working
|
||||
|
||||
### Quick Fix
|
||||
1. **Reload the extension**:
|
||||
- Chrome: Go to `chrome://extensions/` and click the reload icon on Greasemonkey
|
||||
- Firefox: Go to `about:debugging` and click reload
|
||||
2. **Close and reopen the popup** by clicking the extension icon again
|
||||
3. **Check the browser console**:
|
||||
- Right-click on the popup window
|
||||
- Select "Inspect" or "Inspect Element"
|
||||
- Look at the Console tab for any error messages
|
||||
|
||||
### Common Causes
|
||||
|
||||
#### 1. Bootstrap Not Loaded
|
||||
**Symptom:** Modal doesn't open, or console shows "bootstrap is not defined"
|
||||
**Solution:**
|
||||
- Ensure you have an internet connection (Bootstrap loads from CDN)
|
||||
- If offline, the extension won't work properly without Bootstrap
|
||||
- Check browser console for network errors
|
||||
|
||||
#### 2. Content Security Policy
|
||||
**Symptom:** Console shows CSP violations
|
||||
**Solution:** Extension should work in popup, but if issues persist:
|
||||
- Try reloading the extension completely
|
||||
- Close all popup windows and reopen
|
||||
|
||||
#### 3. Extension Not Properly Loaded
|
||||
**Symptom:** Nothing happens when clicking buttons
|
||||
**Solution:**
|
||||
- Chrome:
|
||||
1. Go to `chrome://extensions/`
|
||||
2. Find Greasemonkey
|
||||
3. Click the reload icon (circular arrow)
|
||||
4. Try again
|
||||
- Firefox:
|
||||
1. Go to `about:debugging#/runtime/this-firefox`
|
||||
2. Find Greasemonkey
|
||||
3. Click "Reload"
|
||||
4. Try again
|
||||
|
||||
### Debug Steps
|
||||
|
||||
1. **Open the popup inspector**:
|
||||
- Right-click anywhere in the popup window
|
||||
- Select "Inspect" or "Inspect Element"
|
||||
- This opens DevTools for the popup
|
||||
|
||||
2. **Check the Console tab** for errors like:
|
||||
- "bootstrap is not defined" → Bootstrap didn't load
|
||||
- "Cannot read property 'show' of undefined" → Modal not initialized
|
||||
- "Element not found" → HTML structure issue
|
||||
|
||||
3. **Try in Console**:
|
||||
```javascript
|
||||
// Check if Bootstrap loaded
|
||||
console.log(typeof bootstrap); // Should show "object"
|
||||
|
||||
// Check if elements exist
|
||||
console.log(document.getElementById('addRuleBtn')); // Should show button element
|
||||
console.log(document.getElementById('ruleModal')); // Should show modal element
|
||||
```
|
||||
|
||||
4. **Manual test**:
|
||||
```javascript
|
||||
// Try to open modal manually
|
||||
const modal = new bootstrap.Modal(document.getElementById('ruleModal'));
|
||||
modal.show();
|
||||
```
|
||||
|
||||
### Testing After Fix
|
||||
|
||||
1. Reload the extension
|
||||
2. Click the Greasemonkey icon
|
||||
3. Click "+ Add Rule"
|
||||
4. Modal should open with the rule form
|
||||
5. If successful, you should see the modal with:
|
||||
- Rule Name field
|
||||
- Match Type dropdown
|
||||
- URL Pattern field (visible by default)
|
||||
- JavaScript code area
|
||||
- CSS code area
|
||||
- Enabled checkbox
|
||||
- Cancel and Save buttons
|
||||
|
||||
## Rules Not Executing
|
||||
|
||||
### Check List
|
||||
1. ✓ Is the rule enabled? (toggle switch should be on)
|
||||
2. ✓ Does the URL pattern match the current page URL?
|
||||
3. ✓ If using element selector, does the element exist on the page?
|
||||
4. ✓ Did you reload the page after creating/editing the rule?
|
||||
|
||||
### Debug Process
|
||||
1. Open the page where the rule should run
|
||||
2. Open browser console (F12)
|
||||
3. Look for messages like: `[Greasemonkey] Executing rule: YourRuleName`
|
||||
4. Check for error messages
|
||||
|
||||
### Common Issues
|
||||
|
||||
#### Rule Never Executes
|
||||
- **URL pattern too specific**: Try a shorter, more general pattern
|
||||
- ❌ `https://www.example.com/page.html?id=123`
|
||||
- ✅ `example.com`
|
||||
- **Element doesn't exist yet**: Page might load the element dynamically
|
||||
- **Rule is disabled**: Check the toggle switch
|
||||
|
||||
#### JavaScript Not Running
|
||||
- Check console for syntax errors
|
||||
- Test your code in the page console first:
|
||||
```javascript
|
||||
// Test in console before adding to rule
|
||||
console.log('Test');
|
||||
```
|
||||
|
||||
#### CSS Not Applying
|
||||
- Use `!important` to override existing styles:
|
||||
```css
|
||||
body {
|
||||
background: #000 !important;
|
||||
}
|
||||
```
|
||||
- Check CSS syntax is valid
|
||||
- Some sites have very specific CSS that overrides yours
|
||||
|
||||
## Storage Issues
|
||||
|
||||
### Rules Not Persisting
|
||||
**Chrome:**
|
||||
- Ensure sync is enabled: `chrome://settings/syncSetup`
|
||||
- Storage might be full (rare)
|
||||
|
||||
**Firefox:**
|
||||
- Temporary add-ons don't persist after restart
|
||||
- Use signed version for persistence
|
||||
|
||||
### Can't Edit/Delete Rules
|
||||
1. Check browser console for errors
|
||||
2. Try exporting rules (copy from console):
|
||||
```javascript
|
||||
chrome.storage.sync.get(['rules'], (result) => {
|
||||
console.log(JSON.stringify(result.rules, null, 2));
|
||||
});
|
||||
```
|
||||
3. Reload extension
|
||||
|
||||
## Performance Issues
|
||||
|
||||
### Popup Slow to Open
|
||||
- Too many rules? Try disabling some
|
||||
- Check if Bootstrap CDN is slow (network issue)
|
||||
|
||||
### Page Loads Slowly
|
||||
- Complex JavaScript in rules can slow down pages
|
||||
- Try simplifying your rules
|
||||
- Use CSS instead of JavaScript when possible
|
||||
|
||||
## Browser-Specific Issues
|
||||
|
||||
### Chrome/Edge
|
||||
- **Service worker inactive**: Reload extension
|
||||
- **CSP errors**: Some sites block injected scripts (rare)
|
||||
|
||||
### Firefox
|
||||
- **Temporary add-on removed**: Expected after restart, reload it
|
||||
- **Storage not syncing**: Sign the extension for production use
|
||||
|
||||
## Getting Help
|
||||
|
||||
1. **Check console** (F12) for error messages
|
||||
2. **Test with simple rule** first:
|
||||
- Name: Test
|
||||
- Match Type: URL
|
||||
- URL Pattern: (current page URL)
|
||||
- JavaScript: `alert('It works!');`
|
||||
3. **Reload extension** after any changes
|
||||
4. **Try test-page.html** to verify extension works
|
||||
|
||||
## Manual Reset
|
||||
|
||||
If all else fails, reset the extension:
|
||||
|
||||
### Chrome
|
||||
```javascript
|
||||
// In popup inspector console
|
||||
chrome.storage.sync.clear(() => {
|
||||
console.log('Storage cleared');
|
||||
location.reload();
|
||||
});
|
||||
```
|
||||
|
||||
### Firefox
|
||||
```javascript
|
||||
// In popup inspector console
|
||||
browser.storage.sync.clear().then(() => {
|
||||
console.log('Storage cleared');
|
||||
location.reload();
|
||||
});
|
||||
```
|
||||
|
||||
## Still Not Working?
|
||||
|
||||
1. Check if you have the latest version
|
||||
2. Try in a different browser
|
||||
3. Verify extension permissions are granted
|
||||
4. Look for browser console errors
|
||||
5. Try with a simple test rule on test-page.html
|
||||
|
||||
## Version Check
|
||||
|
||||
Current version: 1.0.0
|
||||
|
||||
Make sure you have all these files:
|
||||
- manifest.json
|
||||
- background.js
|
||||
- content.js
|
||||
- popup.html
|
||||
- popup.css
|
||||
- popup.js
|
||||
- icon files (16, 48, 128)
|
||||
|
||||
## Contact
|
||||
|
||||
If issues persist after following this guide, contact Andy Dixon with:
|
||||
- Browser version
|
||||
- Error messages from console
|
||||
- Steps to reproduce
|
||||
- Screenshot if possible
|
||||
@@ -0,0 +1,51 @@
|
||||
// Background service worker for Chrome extension
|
||||
chrome.runtime.onInstalled.addListener(() => {
|
||||
console.log('GreasyBoii extension installed');
|
||||
});
|
||||
|
||||
// Listen for messages from content script
|
||||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
if (request.action === 'getRules') {
|
||||
chrome.storage.sync.get(['rules'], (result) => {
|
||||
sendResponse({ rules: result.rules || [] });
|
||||
});
|
||||
return true; // Keep channel open for async response
|
||||
}
|
||||
|
||||
// Execute JavaScript via scripting API to bypass CSP
|
||||
if (request.action === 'executeScript') {
|
||||
if (!sender.tab || !sender.tab.id) {
|
||||
sendResponse({ success: false, error: 'No tab ID available' });
|
||||
return;
|
||||
}
|
||||
|
||||
const tabId = sender.tab.id;
|
||||
const code = request.code;
|
||||
const ruleName = request.ruleName;
|
||||
|
||||
console.log(`[GreasyBoii Background] Executing script for rule "${ruleName}" on tab ${tabId}`);
|
||||
|
||||
// Use chrome.scripting.executeScript which bypasses CSP
|
||||
chrome.scripting.executeScript({
|
||||
target: { tabId: tabId },
|
||||
world: 'MAIN', // Execute in main world (page context), not isolated world
|
||||
func: (jsCode) => {
|
||||
try {
|
||||
// Use indirect eval to execute in global scope
|
||||
(1, eval)(jsCode);
|
||||
} catch (e) {
|
||||
console.error('[GreasyBoii] Script execution error:', e);
|
||||
}
|
||||
},
|
||||
args: [code]
|
||||
}).then(() => {
|
||||
console.log(`[GreasyBoii Background] ✓ Script executed successfully`);
|
||||
sendResponse({ success: true });
|
||||
}).catch((error) => {
|
||||
console.error(`[GreasyBoii Background] ✗ Script execution failed:`, error);
|
||||
sendResponse({ success: false, error: error.message });
|
||||
});
|
||||
|
||||
return true; // Keep channel open for async response
|
||||
}
|
||||
});
|
||||
Vendored
+7
File diff suppressed because one or more lines are too long
Vendored
+6
File diff suppressed because one or more lines are too long
@@ -0,0 +1,93 @@
|
||||
// Content script that runs on all pages
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
console.log('[GreasyBoii] Content script loaded on:', window.location.href);
|
||||
|
||||
// Wait for DOM to be ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initGreasyBoii);
|
||||
} else {
|
||||
initGreasyBoii();
|
||||
}
|
||||
|
||||
function initGreasyBoii() {
|
||||
console.log('[GreasyBoii] Initializing...');
|
||||
|
||||
// Get rules from storage and execute matching ones
|
||||
chrome.storage.sync.get(['rules'], (result) => {
|
||||
const rules = result.rules || [];
|
||||
const currentUrl = window.location.href;
|
||||
|
||||
console.log('[GreasyBoii] Found', rules.length, 'rule(s) in storage');
|
||||
|
||||
rules.forEach((rule) => {
|
||||
if (!rule.enabled) {
|
||||
console.log('[GreasyBoii] Skipping disabled rule:', rule.name);
|
||||
return;
|
||||
}
|
||||
|
||||
let shouldExecute = false;
|
||||
|
||||
// Check conditions
|
||||
if (rule.matchType === 'url') {
|
||||
shouldExecute = currentUrl.includes(rule.urlPattern);
|
||||
console.log(`[GreasyBoii] URL match test for "${rule.name}": ${currentUrl} includes "${rule.urlPattern}" = ${shouldExecute}`);
|
||||
} else if (rule.matchType === 'element') {
|
||||
shouldExecute = document.querySelector(rule.elementSelector) !== null;
|
||||
console.log(`[GreasyBoii] Element match test for "${rule.name}": selector "${rule.elementSelector}" found = ${shouldExecute}`);
|
||||
} else if (rule.matchType === 'both') {
|
||||
const urlMatches = currentUrl.includes(rule.urlPattern);
|
||||
const elementExists = document.querySelector(rule.elementSelector) !== null;
|
||||
shouldExecute = urlMatches && elementExists;
|
||||
console.log(`[GreasyBoii] Combined match test for "${rule.name}": URL=${urlMatches}, Element=${elementExists}, Result=${shouldExecute}`);
|
||||
}
|
||||
|
||||
if (shouldExecute) {
|
||||
console.log(`[GreasyBoii] ✓ Executing rule: ${rule.name}`);
|
||||
executeRule(rule);
|
||||
} else {
|
||||
console.log(`[GreasyBoii] ✗ Rule "${rule.name}" conditions not met`);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function executeRule(rule) {
|
||||
// Execute JavaScript using chrome.scripting API to bypass CSP
|
||||
if (rule.javascript && rule.javascript.trim()) {
|
||||
console.log(`[GreasyBoii] Sending JavaScript execution request for rule: ${rule.name}`);
|
||||
|
||||
// Send message to background script to execute JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'executeScript',
|
||||
code: rule.javascript,
|
||||
ruleName: rule.name
|
||||
}, (response) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error(`[GreasyBoii] Error communicating with background:`, chrome.runtime.lastError);
|
||||
} else if (response && response.success) {
|
||||
console.log(`[GreasyBoii] ✓ JavaScript executed successfully via background script`);
|
||||
} else {
|
||||
console.error(`[GreasyBoii] JavaScript execution failed:`, response?.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Execute CSS - CSS injection doesn't have CSP issues
|
||||
if (rule.css && rule.css.trim()) {
|
||||
try {
|
||||
console.log(`[GreasyBoii] Injecting CSS for rule: ${rule.name}`);
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = rule.css;
|
||||
style.setAttribute('data-greasyboii-rule', rule.name);
|
||||
(document.head || document.documentElement).appendChild(style);
|
||||
|
||||
console.log(`[GreasyBoii] ✓ CSS injected successfully`);
|
||||
} catch (error) {
|
||||
console.error(`[GreasyBoii] Error applying CSS for rule "${rule.name}":`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 499 B |
Binary file not shown.
|
After Width: | Height: | Size: 115 B |
Binary file not shown.
|
After Width: | Height: | Size: 202 B |
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "GreasyBoii",
|
||||
"version": "1.0.4",
|
||||
"description": "Execute custom JavaScript and CSS based on URL patterns and page elements",
|
||||
"author": "Andy Dixon",
|
||||
"permissions": [
|
||||
"storage",
|
||||
"activeTab",
|
||||
"scripting"
|
||||
],
|
||||
"host_permissions": [
|
||||
"<all_urls>"
|
||||
],
|
||||
"background": {
|
||||
"service_worker": "background.js"
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["<all_urls>"],
|
||||
"js": ["content.js"],
|
||||
"run_at": "document_idle",
|
||||
"all_frames": false
|
||||
}
|
||||
],
|
||||
"action": {
|
||||
"default_popup": "popup.html",
|
||||
"default_icon": {
|
||||
"16": "icon16.png",
|
||||
"48": "icon48.png",
|
||||
"128": "icon128.png"
|
||||
}
|
||||
},
|
||||
"icons": {
|
||||
"16": "icon16.png",
|
||||
"48": "icon48.png",
|
||||
"128": "icon128.png"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
body {
|
||||
width: 600px;
|
||||
min-height: 400px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.rules-list {
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.rule-card {
|
||||
border: 1px solid #495057;
|
||||
border-radius: 0.375rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
background-color: #212529;
|
||||
}
|
||||
|
||||
.rule-card:hover {
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.rule-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.rule-name {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.rule-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.rule-details {
|
||||
font-size: 0.875rem;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.rule-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input {
|
||||
cursor: pointer;
|
||||
width: 3rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-lg {
|
||||
max-width: 700px;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GreasyBoii</title>
|
||||
<link rel="stylesheet" href="bootstrap.min.css">
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="mb-0">GreasyBoii</h4>
|
||||
<button class="btn btn-primary btn-sm" id="addRuleBtn">+ Add Rule</button>
|
||||
</div>
|
||||
|
||||
<div id="rulesList" class="rules-list mb-3">
|
||||
<!-- Rules will be dynamically inserted here -->
|
||||
</div>
|
||||
|
||||
<div id="emptyState" class="text-center text-muted py-4" style="display: none;">
|
||||
<p>No rules yet. Click "Add Rule" to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Rule Modal -->
|
||||
<div class="modal fade" id="ruleModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalTitle">Add Rule</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="ruleForm">
|
||||
<div class="mb-3">
|
||||
<label for="ruleName" class="form-label">Rule Name</label>
|
||||
<input type="text" class="form-control" id="ruleName" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="matchType" class="form-label">Match Type</label>
|
||||
<select class="form-select" id="matchType" required>
|
||||
<option value="url">URL contains string</option>
|
||||
<option value="element">Page contains element</option>
|
||||
<option value="both">Both URL and element</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="urlPatternGroup">
|
||||
<label for="urlPattern" class="form-label">URL Pattern</label>
|
||||
<input type="text" class="form-control" id="urlPattern" placeholder="e.g., example.com">
|
||||
<small class="form-text text-muted">Enter a string to match in the URL</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="elementSelectorGroup" style="display: none;">
|
||||
<label for="elementSelector" class="form-label">Element Selector</label>
|
||||
<input type="text" class="form-control" id="elementSelector" placeholder="e.g., #my-element or .my-class">
|
||||
<small class="form-text text-muted">Enter a CSS selector</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="javascript" class="form-label">JavaScript Code</label>
|
||||
<textarea class="form-control font-monospace" id="javascript" rows="6" placeholder="console.log('Hello from GreasyBoii!');"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="css" class="form-label">CSS Code</label>
|
||||
<textarea class="form-control font-monospace" id="css" rows="6" placeholder="body { background-color: #000; }"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="ruleEnabled" checked>
|
||||
<label class="form-check-label" for="ruleEnabled">
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="saveRuleBtn">Save Rule</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="bootstrap.bundle.min.js"></script>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+302
@@ -0,0 +1,302 @@
|
||||
// Popup script for managing rules
|
||||
let currentRules = [];
|
||||
let editingRuleIndex = -1;
|
||||
let ruleModal;
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Wait for Bootstrap to be fully loaded
|
||||
if (typeof bootstrap !== 'undefined') {
|
||||
initializeExtension();
|
||||
} else {
|
||||
// Fallback: wait a bit for Bootstrap to load
|
||||
setTimeout(initializeExtension, 100);
|
||||
}
|
||||
});
|
||||
|
||||
function initializeExtension() {
|
||||
try {
|
||||
ruleModal = new bootstrap.Modal(document.getElementById('ruleModal'));
|
||||
} catch (e) {
|
||||
console.error('Error initializing modal:', e);
|
||||
}
|
||||
|
||||
loadRules();
|
||||
setupEventListeners();
|
||||
}
|
||||
|
||||
function setupEventListeners() {
|
||||
const addRuleBtn = document.getElementById('addRuleBtn');
|
||||
const saveRuleBtn = document.getElementById('saveRuleBtn');
|
||||
const matchTypeSelect = document.getElementById('matchType');
|
||||
|
||||
if (addRuleBtn) {
|
||||
addRuleBtn.addEventListener('click', () => {
|
||||
console.log('Add Rule button clicked');
|
||||
openRuleModal();
|
||||
});
|
||||
} else {
|
||||
console.error('Add Rule button not found!');
|
||||
}
|
||||
|
||||
if (saveRuleBtn) {
|
||||
saveRuleBtn.addEventListener('click', saveRule);
|
||||
} else {
|
||||
console.error('Save Rule button not found!');
|
||||
}
|
||||
|
||||
if (matchTypeSelect) {
|
||||
matchTypeSelect.addEventListener('change', (e) => {
|
||||
updateFieldVisibility(e.target.value);
|
||||
});
|
||||
} else {
|
||||
console.error('Match Type select not found!');
|
||||
}
|
||||
}
|
||||
|
||||
function updateFieldVisibility(matchType) {
|
||||
const urlGroup = document.getElementById('urlPatternGroup');
|
||||
const elementGroup = document.getElementById('elementSelectorGroup');
|
||||
const urlInput = document.getElementById('urlPattern');
|
||||
const elementInput = document.getElementById('elementSelector');
|
||||
|
||||
if (matchType === 'url') {
|
||||
urlGroup.style.display = 'block';
|
||||
elementGroup.style.display = 'none';
|
||||
urlInput.required = true;
|
||||
elementInput.required = false;
|
||||
} else if (matchType === 'element') {
|
||||
urlGroup.style.display = 'none';
|
||||
elementGroup.style.display = 'block';
|
||||
urlInput.required = false;
|
||||
elementInput.required = true;
|
||||
} else if (matchType === 'both') {
|
||||
urlGroup.style.display = 'block';
|
||||
elementGroup.style.display = 'block';
|
||||
urlInput.required = true;
|
||||
elementInput.required = true;
|
||||
}
|
||||
}
|
||||
|
||||
function loadRules() {
|
||||
chrome.storage.sync.get(['rules'], (result) => {
|
||||
currentRules = result.rules || [];
|
||||
renderRules();
|
||||
});
|
||||
}
|
||||
|
||||
function renderRules() {
|
||||
const rulesList = document.getElementById('rulesList');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
|
||||
if (currentRules.length === 0) {
|
||||
rulesList.innerHTML = '';
|
||||
emptyState.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
emptyState.style.display = 'none';
|
||||
|
||||
rulesList.innerHTML = currentRules.map((rule, index) => {
|
||||
const matchTypeLabel = {
|
||||
'url': 'URL',
|
||||
'element': 'Element',
|
||||
'both': 'URL + Element'
|
||||
}[rule.matchType] || rule.matchType;
|
||||
|
||||
const hasJS = rule.javascript && rule.javascript.trim();
|
||||
const hasCSS = rule.css && rule.css.trim();
|
||||
|
||||
return `
|
||||
<div class="rule-card" data-rule-index="${index}">
|
||||
<div class="rule-header">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="rule-name">${escapeHtml(rule.name)}</span>
|
||||
<span class="badge rule-badge bg-secondary">${matchTypeLabel}</span>
|
||||
${hasJS ? '<span class="badge rule-badge bg-warning">JS</span>' : ''}
|
||||
${hasCSS ? '<span class="badge rule-badge bg-info">CSS</span>' : ''}
|
||||
</div>
|
||||
<div class="rule-actions">
|
||||
<div class="form-check form-switch mb-0">
|
||||
<input class="form-check-input rule-toggle" type="checkbox" ${rule.enabled ? 'checked' : ''}
|
||||
data-index="${index}" title="Enable/Disable">
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-light btn-edit-rule" data-index="${index}" title="Edit">
|
||||
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger btn-delete-rule" data-index="${index}" title="Delete">
|
||||
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
|
||||
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rule-details">
|
||||
${rule.matchType === 'url' || rule.matchType === 'both' ? `<div><strong>URL:</strong> ${escapeHtml(rule.urlPattern)}</div>` : ''}
|
||||
${rule.matchType === 'element' || rule.matchType === 'both' ? `<div><strong>Element:</strong> ${escapeHtml(rule.elementSelector)}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Add event listeners using event delegation
|
||||
attachRuleEventListeners();
|
||||
}
|
||||
|
||||
function attachRuleEventListeners() {
|
||||
const rulesList = document.getElementById('rulesList');
|
||||
|
||||
// Remove old listeners if any
|
||||
rulesList.removeEventListener('click', handleRuleClick);
|
||||
rulesList.removeEventListener('change', handleRuleToggle);
|
||||
|
||||
// Add new listeners
|
||||
rulesList.addEventListener('click', handleRuleClick);
|
||||
rulesList.addEventListener('change', handleRuleToggle);
|
||||
}
|
||||
|
||||
function handleRuleClick(e) {
|
||||
const editBtn = e.target.closest('.btn-edit-rule');
|
||||
const deleteBtn = e.target.closest('.btn-delete-rule');
|
||||
|
||||
if (editBtn) {
|
||||
const index = parseInt(editBtn.dataset.index);
|
||||
editRule(index);
|
||||
} else if (deleteBtn) {
|
||||
const index = parseInt(deleteBtn.dataset.index);
|
||||
deleteRule(index);
|
||||
}
|
||||
}
|
||||
|
||||
function handleRuleToggle(e) {
|
||||
if (e.target.classList.contains('rule-toggle')) {
|
||||
const index = parseInt(e.target.dataset.index);
|
||||
toggleRule(index);
|
||||
}
|
||||
}
|
||||
|
||||
function openRuleModal(ruleIndex = -1) {
|
||||
editingRuleIndex = ruleIndex;
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const form = document.getElementById('ruleForm');
|
||||
|
||||
form.reset();
|
||||
|
||||
if (ruleIndex >= 0) {
|
||||
modalTitle.textContent = 'Edit Rule';
|
||||
const rule = currentRules[ruleIndex];
|
||||
document.getElementById('ruleName').value = rule.name;
|
||||
document.getElementById('matchType').value = rule.matchType;
|
||||
document.getElementById('urlPattern').value = rule.urlPattern || '';
|
||||
document.getElementById('elementSelector').value = rule.elementSelector || '';
|
||||
document.getElementById('javascript').value = rule.javascript || '';
|
||||
document.getElementById('css').value = rule.css || '';
|
||||
document.getElementById('ruleEnabled').checked = rule.enabled;
|
||||
} else {
|
||||
modalTitle.textContent = 'Add Rule';
|
||||
document.getElementById('ruleEnabled').checked = true;
|
||||
}
|
||||
|
||||
updateFieldVisibility(document.getElementById('matchType').value);
|
||||
|
||||
// Show modal - ensure Bootstrap Modal is initialized
|
||||
if (ruleModal) {
|
||||
ruleModal.show();
|
||||
} else {
|
||||
// Fallback: try to initialize and show
|
||||
try {
|
||||
ruleModal = new bootstrap.Modal(document.getElementById('ruleModal'));
|
||||
ruleModal.show();
|
||||
} catch (e) {
|
||||
console.error('Error showing modal:', e);
|
||||
alert('Error opening rule editor. Please reload the extension.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function saveRule() {
|
||||
const name = document.getElementById('ruleName').value.trim();
|
||||
const matchType = document.getElementById('matchType').value;
|
||||
const urlPattern = document.getElementById('urlPattern').value.trim();
|
||||
const elementSelector = document.getElementById('elementSelector').value.trim();
|
||||
const javascript = document.getElementById('javascript').value;
|
||||
const css = document.getElementById('css').value;
|
||||
const enabled = document.getElementById('ruleEnabled').checked;
|
||||
|
||||
// Validation
|
||||
if (!name) {
|
||||
alert('Please enter a rule name');
|
||||
return;
|
||||
}
|
||||
|
||||
if (matchType === 'url' && !urlPattern) {
|
||||
alert('Please enter a URL pattern');
|
||||
return;
|
||||
}
|
||||
|
||||
if (matchType === 'element' && !elementSelector) {
|
||||
alert('Please enter an element selector');
|
||||
return;
|
||||
}
|
||||
|
||||
if (matchType === 'both' && (!urlPattern || !elementSelector)) {
|
||||
alert('Please enter both URL pattern and element selector');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!javascript && !css) {
|
||||
alert('Please enter either JavaScript or CSS code');
|
||||
return;
|
||||
}
|
||||
|
||||
const rule = {
|
||||
name,
|
||||
matchType,
|
||||
urlPattern,
|
||||
elementSelector,
|
||||
javascript,
|
||||
css,
|
||||
enabled
|
||||
};
|
||||
|
||||
if (editingRuleIndex >= 0) {
|
||||
currentRules[editingRuleIndex] = rule;
|
||||
} else {
|
||||
currentRules.push(rule);
|
||||
}
|
||||
|
||||
chrome.storage.sync.set({ rules: currentRules }, () => {
|
||||
loadRules();
|
||||
ruleModal.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function editRule(index) {
|
||||
openRuleModal(index);
|
||||
}
|
||||
|
||||
function deleteRule(index) {
|
||||
if (confirm(`Delete rule "${currentRules[index].name}"?`)) {
|
||||
currentRules.splice(index, 1);
|
||||
chrome.storage.sync.set({ rules: currentRules }, () => {
|
||||
loadRules();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function toggleRule(index) {
|
||||
currentRules[index].enabled = !currentRules[index].enabled;
|
||||
chrome.storage.sync.set({ rules: currentRules }, () => {
|
||||
loadRules();
|
||||
});
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
// Background script for Firefox extension
|
||||
browser.runtime.onInstalled.addListener(() => {
|
||||
console.log('GreasyBoii extension installed');
|
||||
});
|
||||
|
||||
// Listen for messages from content script
|
||||
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
if (request.action === 'getRules') {
|
||||
browser.storage.sync.get(['rules']).then((result) => {
|
||||
sendResponse({ rules: result.rules || [] });
|
||||
});
|
||||
return true; // Keep channel open for async response
|
||||
}
|
||||
});
|
||||
Vendored
+7
File diff suppressed because one or more lines are too long
Vendored
+6
File diff suppressed because one or more lines are too long
@@ -0,0 +1,117 @@
|
||||
// Content script that runs on all pages
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
console.log('[GreasyBoii] Content script loaded on:', window.location.href);
|
||||
|
||||
// Wait for DOM to be ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initGreasyBoii);
|
||||
} else {
|
||||
initGreasyBoii();
|
||||
}
|
||||
|
||||
function initGreasyBoii() {
|
||||
console.log('[GreasyBoii] Initializing...');
|
||||
|
||||
// Get rules from storage and execute matching ones
|
||||
browser.storage.sync.get(['rules']).then((result) => {
|
||||
const rules = result.rules || [];
|
||||
const currentUrl = window.location.href;
|
||||
|
||||
console.log('[GreasyBoii] Found', rules.length, 'rule(s) in storage');
|
||||
|
||||
rules.forEach((rule) => {
|
||||
if (!rule.enabled) {
|
||||
console.log('[GreasyBoii] Skipping disabled rule:', rule.name);
|
||||
return;
|
||||
}
|
||||
|
||||
let shouldExecute = false;
|
||||
|
||||
// Check conditions
|
||||
if (rule.matchType === 'url') {
|
||||
shouldExecute = currentUrl.includes(rule.urlPattern);
|
||||
console.log(`[GreasyBoii] URL match test for "${rule.name}": ${currentUrl} includes "${rule.urlPattern}" = ${shouldExecute}`);
|
||||
} else if (rule.matchType === 'element') {
|
||||
shouldExecute = document.querySelector(rule.elementSelector) !== null;
|
||||
console.log(`[GreasyBoii] Element match test for "${rule.name}": selector "${rule.elementSelector}" found = ${shouldExecute}`);
|
||||
} else if (rule.matchType === 'both') {
|
||||
const urlMatches = currentUrl.includes(rule.urlPattern);
|
||||
const elementExists = document.querySelector(rule.elementSelector) !== null;
|
||||
shouldExecute = urlMatches && elementExists;
|
||||
console.log(`[GreasyBoii] Combined match test for "${rule.name}": URL=${urlMatches}, Element=${elementExists}, Result=${shouldExecute}`);
|
||||
}
|
||||
|
||||
if (shouldExecute) {
|
||||
console.log(`[GreasyBoii] ✓ Executing rule: ${rule.name}`);
|
||||
executeRule(rule);
|
||||
} else {
|
||||
console.log(`[GreasyBoii] ✗ Rule "${rule.name}" conditions not met`);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function executeRule(rule) {
|
||||
// For Firefox, we'll use exportFunction and cloneInto to bypass CSP
|
||||
if (rule.javascript && rule.javascript.trim()) {
|
||||
console.log(`[GreasyBoii] Injecting JavaScript for rule: ${rule.name}`);
|
||||
|
||||
try {
|
||||
// Method 1: Try wrappedJSObject (Firefox specific)
|
||||
if (typeof wrappedJSObject !== 'undefined') {
|
||||
try {
|
||||
const code = `
|
||||
(function() {
|
||||
try {
|
||||
${rule.javascript}
|
||||
} catch (e) {
|
||||
console.error('[GreasyBoii] Error in injected script:', e);
|
||||
}
|
||||
})();
|
||||
`;
|
||||
wrappedJSObject.eval(code);
|
||||
console.log(`[GreasyBoii] ✓ JavaScript executed via wrappedJSObject`);
|
||||
return;
|
||||
} catch (e) {
|
||||
console.log(`[GreasyBoii] wrappedJSObject method failed, trying alternative...`);
|
||||
}
|
||||
}
|
||||
|
||||
// Method 2: Script injection (works on most sites)
|
||||
const script = document.createElement('script');
|
||||
script.textContent = `
|
||||
(function() {
|
||||
try {
|
||||
${rule.javascript}
|
||||
} catch (e) {
|
||||
console.error('[GreasyBoii] Error in injected script:', e);
|
||||
}
|
||||
})();
|
||||
`;
|
||||
(document.head || document.documentElement).appendChild(script);
|
||||
script.remove();
|
||||
console.log(`[GreasyBoii] ✓ JavaScript injected successfully`);
|
||||
} catch (error) {
|
||||
console.error(`[GreasyBoii] Error executing JavaScript for rule "${rule.name}":`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// Execute CSS - CSS injection doesn't have CSP issues
|
||||
if (rule.css && rule.css.trim()) {
|
||||
try {
|
||||
console.log(`[GreasyBoii] Injecting CSS for rule: ${rule.name}`);
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = rule.css;
|
||||
style.setAttribute('data-greasyboii-rule', rule.name);
|
||||
(document.head || document.documentElement).appendChild(style);
|
||||
|
||||
console.log(`[GreasyBoii] ✓ CSS injected successfully`);
|
||||
} catch (error) {
|
||||
console.error(`[GreasyBoii] Error applying CSS for rule "${rule.name}":`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 499 B |
Binary file not shown.
|
After Width: | Height: | Size: 115 B |
Binary file not shown.
|
After Width: | Height: | Size: 202 B |
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"manifest_version": 2,
|
||||
"name": "GreasyBoii",
|
||||
"version": "1.0.4",
|
||||
"description": "Execute custom JavaScript and CSS based on URL patterns and page elements",
|
||||
"author": "Andy Dixon",
|
||||
"permissions": [
|
||||
"storage",
|
||||
"activeTab",
|
||||
"<all_urls>"
|
||||
],
|
||||
"background": {
|
||||
"scripts": ["background.js"]
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["<all_urls>"],
|
||||
"js": ["content.js"],
|
||||
"run_at": "document_idle",
|
||||
"all_frames": false
|
||||
}
|
||||
],
|
||||
"browser_action": {
|
||||
"default_popup": "popup.html",
|
||||
"default_icon": {
|
||||
"16": "icon16.png",
|
||||
"48": "icon48.png",
|
||||
"128": "icon128.png"
|
||||
}
|
||||
},
|
||||
"icons": {
|
||||
"16": "icon16.png",
|
||||
"48": "icon48.png",
|
||||
"128": "icon128.png"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
body {
|
||||
width: 600px;
|
||||
min-height: 400px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.rules-list {
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.rule-card {
|
||||
border: 1px solid #495057;
|
||||
border-radius: 0.375rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
background-color: #212529;
|
||||
}
|
||||
|
||||
.rule-card:hover {
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.rule-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.rule-name {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.rule-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.rule-details {
|
||||
font-size: 0.875rem;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.rule-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.font-monospace {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input {
|
||||
cursor: pointer;
|
||||
width: 3rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-lg {
|
||||
max-width: 700px;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GreasyBoii</title>
|
||||
<link rel="stylesheet" href="bootstrap.min.css">
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="mb-0">GreasyBoii</h4>
|
||||
<button class="btn btn-primary btn-sm" id="addRuleBtn">+ Add Rule</button>
|
||||
</div>
|
||||
|
||||
<div id="rulesList" class="rules-list mb-3">
|
||||
<!-- Rules will be dynamically inserted here -->
|
||||
</div>
|
||||
|
||||
<div id="emptyState" class="text-center text-muted py-4" style="display: none;">
|
||||
<p>No rules yet. Click "Add Rule" to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Rule Modal -->
|
||||
<div class="modal fade" id="ruleModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalTitle">Add Rule</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="ruleForm">
|
||||
<div class="mb-3">
|
||||
<label for="ruleName" class="form-label">Rule Name</label>
|
||||
<input type="text" class="form-control" id="ruleName" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="matchType" class="form-label">Match Type</label>
|
||||
<select class="form-select" id="matchType" required>
|
||||
<option value="url">URL contains string</option>
|
||||
<option value="element">Page contains element</option>
|
||||
<option value="both">Both URL and element</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="urlPatternGroup">
|
||||
<label for="urlPattern" class="form-label">URL Pattern</label>
|
||||
<input type="text" class="form-control" id="urlPattern" placeholder="e.g., example.com">
|
||||
<small class="form-text text-muted">Enter a string to match in the URL</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="elementSelectorGroup" style="display: none;">
|
||||
<label for="elementSelector" class="form-label">Element Selector</label>
|
||||
<input type="text" class="form-control" id="elementSelector" placeholder="e.g., #my-element or .my-class">
|
||||
<small class="form-text text-muted">Enter a CSS selector</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="javascript" class="form-label">JavaScript Code</label>
|
||||
<textarea class="form-control font-monospace" id="javascript" rows="6" placeholder="console.log('Hello from GreasyBoii!');"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="css" class="form-label">CSS Code</label>
|
||||
<textarea class="form-control font-monospace" id="css" rows="6" placeholder="body { background-color: #000; }"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="ruleEnabled" checked>
|
||||
<label class="form-check-label" for="ruleEnabled">
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="saveRuleBtn">Save Rule</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="bootstrap.bundle.min.js"></script>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,302 @@
|
||||
// Popup script for managing rules (Firefox version)
|
||||
let currentRules = [];
|
||||
let editingRuleIndex = -1;
|
||||
let ruleModal;
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Wait for Bootstrap to be fully loaded
|
||||
if (typeof bootstrap !== 'undefined') {
|
||||
initializeExtension();
|
||||
} else {
|
||||
// Fallback: wait a bit for Bootstrap to load
|
||||
setTimeout(initializeExtension, 100);
|
||||
}
|
||||
});
|
||||
|
||||
function initializeExtension() {
|
||||
try {
|
||||
ruleModal = new bootstrap.Modal(document.getElementById('ruleModal'));
|
||||
} catch (e) {
|
||||
console.error('Error initializing modal:', e);
|
||||
}
|
||||
|
||||
loadRules();
|
||||
setupEventListeners();
|
||||
}
|
||||
|
||||
function setupEventListeners() {
|
||||
const addRuleBtn = document.getElementById('addRuleBtn');
|
||||
const saveRuleBtn = document.getElementById('saveRuleBtn');
|
||||
const matchTypeSelect = document.getElementById('matchType');
|
||||
|
||||
if (addRuleBtn) {
|
||||
addRuleBtn.addEventListener('click', () => {
|
||||
console.log('Add Rule button clicked');
|
||||
openRuleModal();
|
||||
});
|
||||
} else {
|
||||
console.error('Add Rule button not found!');
|
||||
}
|
||||
|
||||
if (saveRuleBtn) {
|
||||
saveRuleBtn.addEventListener('click', saveRule);
|
||||
} else {
|
||||
console.error('Save Rule button not found!');
|
||||
}
|
||||
|
||||
if (matchTypeSelect) {
|
||||
matchTypeSelect.addEventListener('change', (e) => {
|
||||
updateFieldVisibility(e.target.value);
|
||||
});
|
||||
} else {
|
||||
console.error('Match Type select not found!');
|
||||
}
|
||||
}
|
||||
|
||||
function updateFieldVisibility(matchType) {
|
||||
const urlGroup = document.getElementById('urlPatternGroup');
|
||||
const elementGroup = document.getElementById('elementSelectorGroup');
|
||||
const urlInput = document.getElementById('urlPattern');
|
||||
const elementInput = document.getElementById('elementSelector');
|
||||
|
||||
if (matchType === 'url') {
|
||||
urlGroup.style.display = 'block';
|
||||
elementGroup.style.display = 'none';
|
||||
urlInput.required = true;
|
||||
elementInput.required = false;
|
||||
} else if (matchType === 'element') {
|
||||
urlGroup.style.display = 'none';
|
||||
elementGroup.style.display = 'block';
|
||||
urlInput.required = false;
|
||||
elementInput.required = true;
|
||||
} else if (matchType === 'both') {
|
||||
urlGroup.style.display = 'block';
|
||||
elementGroup.style.display = 'block';
|
||||
urlInput.required = true;
|
||||
elementInput.required = true;
|
||||
}
|
||||
}
|
||||
|
||||
function loadRules() {
|
||||
browser.storage.sync.get(['rules']).then((result) => {
|
||||
currentRules = result.rules || [];
|
||||
renderRules();
|
||||
});
|
||||
}
|
||||
|
||||
function renderRules() {
|
||||
const rulesList = document.getElementById('rulesList');
|
||||
const emptyState = document.getElementById('emptyState');
|
||||
|
||||
if (currentRules.length === 0) {
|
||||
rulesList.innerHTML = '';
|
||||
emptyState.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
emptyState.style.display = 'none';
|
||||
|
||||
rulesList.innerHTML = currentRules.map((rule, index) => {
|
||||
const matchTypeLabel = {
|
||||
'url': 'URL',
|
||||
'element': 'Element',
|
||||
'both': 'URL + Element'
|
||||
}[rule.matchType] || rule.matchType;
|
||||
|
||||
const hasJS = rule.javascript && rule.javascript.trim();
|
||||
const hasCSS = rule.css && rule.css.trim();
|
||||
|
||||
return `
|
||||
<div class="rule-card" data-rule-index="${index}">
|
||||
<div class="rule-header">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="rule-name">${escapeHtml(rule.name)}</span>
|
||||
<span class="badge rule-badge bg-secondary">${matchTypeLabel}</span>
|
||||
${hasJS ? '<span class="badge rule-badge bg-warning">JS</span>' : ''}
|
||||
${hasCSS ? '<span class="badge rule-badge bg-info">CSS</span>' : ''}
|
||||
</div>
|
||||
<div class="rule-actions">
|
||||
<div class="form-check form-switch mb-0">
|
||||
<input class="form-check-input rule-toggle" type="checkbox" ${rule.enabled ? 'checked' : ''}
|
||||
data-index="${index}" title="Enable/Disable">
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-light btn-edit-rule" data-index="${index}" title="Edit">
|
||||
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger btn-delete-rule" data-index="${index}" title="Delete">
|
||||
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
|
||||
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rule-details">
|
||||
${rule.matchType === 'url' || rule.matchType === 'both' ? `<div><strong>URL:</strong> ${escapeHtml(rule.urlPattern)}</div>` : ''}
|
||||
${rule.matchType === 'element' || rule.matchType === 'both' ? `<div><strong>Element:</strong> ${escapeHtml(rule.elementSelector)}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Add event listeners using event delegation
|
||||
attachRuleEventListeners();
|
||||
}
|
||||
|
||||
function attachRuleEventListeners() {
|
||||
const rulesList = document.getElementById('rulesList');
|
||||
|
||||
// Remove old listeners if any
|
||||
rulesList.removeEventListener('click', handleRuleClick);
|
||||
rulesList.removeEventListener('change', handleRuleToggle);
|
||||
|
||||
// Add new listeners
|
||||
rulesList.addEventListener('click', handleRuleClick);
|
||||
rulesList.addEventListener('change', handleRuleToggle);
|
||||
}
|
||||
|
||||
function handleRuleClick(e) {
|
||||
const editBtn = e.target.closest('.btn-edit-rule');
|
||||
const deleteBtn = e.target.closest('.btn-delete-rule');
|
||||
|
||||
if (editBtn) {
|
||||
const index = parseInt(editBtn.dataset.index);
|
||||
editRule(index);
|
||||
} else if (deleteBtn) {
|
||||
const index = parseInt(deleteBtn.dataset.index);
|
||||
deleteRule(index);
|
||||
}
|
||||
}
|
||||
|
||||
function handleRuleToggle(e) {
|
||||
if (e.target.classList.contains('rule-toggle')) {
|
||||
const index = parseInt(e.target.dataset.index);
|
||||
toggleRule(index);
|
||||
}
|
||||
}
|
||||
|
||||
function openRuleModal(ruleIndex = -1) {
|
||||
editingRuleIndex = ruleIndex;
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const form = document.getElementById('ruleForm');
|
||||
|
||||
form.reset();
|
||||
|
||||
if (ruleIndex >= 0) {
|
||||
modalTitle.textContent = 'Edit Rule';
|
||||
const rule = currentRules[ruleIndex];
|
||||
document.getElementById('ruleName').value = rule.name;
|
||||
document.getElementById('matchType').value = rule.matchType;
|
||||
document.getElementById('urlPattern').value = rule.urlPattern || '';
|
||||
document.getElementById('elementSelector').value = rule.elementSelector || '';
|
||||
document.getElementById('javascript').value = rule.javascript || '';
|
||||
document.getElementById('css').value = rule.css || '';
|
||||
document.getElementById('ruleEnabled').checked = rule.enabled;
|
||||
} else {
|
||||
modalTitle.textContent = 'Add Rule';
|
||||
document.getElementById('ruleEnabled').checked = true;
|
||||
}
|
||||
|
||||
updateFieldVisibility(document.getElementById('matchType').value);
|
||||
|
||||
// Show modal - ensure Bootstrap Modal is initialized
|
||||
if (ruleModal) {
|
||||
ruleModal.show();
|
||||
} else {
|
||||
// Fallback: try to initialize and show
|
||||
try {
|
||||
ruleModal = new bootstrap.Modal(document.getElementById('ruleModal'));
|
||||
ruleModal.show();
|
||||
} catch (e) {
|
||||
console.error('Error showing modal:', e);
|
||||
alert('Error opening rule editor. Please reload the extension.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function saveRule() {
|
||||
const name = document.getElementById('ruleName').value.trim();
|
||||
const matchType = document.getElementById('matchType').value;
|
||||
const urlPattern = document.getElementById('urlPattern').value.trim();
|
||||
const elementSelector = document.getElementById('elementSelector').value.trim();
|
||||
const javascript = document.getElementById('javascript').value;
|
||||
const css = document.getElementById('css').value;
|
||||
const enabled = document.getElementById('ruleEnabled').checked;
|
||||
|
||||
// Validation
|
||||
if (!name) {
|
||||
alert('Please enter a rule name');
|
||||
return;
|
||||
}
|
||||
|
||||
if (matchType === 'url' && !urlPattern) {
|
||||
alert('Please enter a URL pattern');
|
||||
return;
|
||||
}
|
||||
|
||||
if (matchType === 'element' && !elementSelector) {
|
||||
alert('Please enter an element selector');
|
||||
return;
|
||||
}
|
||||
|
||||
if (matchType === 'both' && (!urlPattern || !elementSelector)) {
|
||||
alert('Please enter both URL pattern and element selector');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!javascript && !css) {
|
||||
alert('Please enter either JavaScript or CSS code');
|
||||
return;
|
||||
}
|
||||
|
||||
const rule = {
|
||||
name,
|
||||
matchType,
|
||||
urlPattern,
|
||||
elementSelector,
|
||||
javascript,
|
||||
css,
|
||||
enabled
|
||||
};
|
||||
|
||||
if (editingRuleIndex >= 0) {
|
||||
currentRules[editingRuleIndex] = rule;
|
||||
} else {
|
||||
currentRules.push(rule);
|
||||
}
|
||||
|
||||
browser.storage.sync.set({ rules: currentRules }).then(() => {
|
||||
loadRules();
|
||||
ruleModal.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function editRule(index) {
|
||||
openRuleModal(index);
|
||||
}
|
||||
|
||||
function deleteRule(index) {
|
||||
if (confirm(`Delete rule "${currentRules[index].name}"?`)) {
|
||||
currentRules.splice(index, 1);
|
||||
browser.storage.sync.set({ rules: currentRules }).then(() => {
|
||||
loadRules();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function toggleRule(index) {
|
||||
currentRules[index].enabled = !currentRules[index].enabled;
|
||||
browser.storage.sync.set({ rules: currentRules }).then(() => {
|
||||
loadRules();
|
||||
});
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
Executable
+13
@@ -0,0 +1,13 @@
|
||||
#!/bin/bash
|
||||
echo "📦 Packaging GreasyBoii v1.0.4..."
|
||||
mkdir -p dist
|
||||
|
||||
echo "Chrome..."
|
||||
cd chrome && zip -r ../dist/greasyboii-chrome-v1.0.4.zip * -x "*.DS_Store" && cd ..
|
||||
|
||||
echo "Firefox..."
|
||||
cd firefox && zip -r ../dist/greasyboii-firefox-v1.0.4.zip * -x "*.DS_Store" && cd ..
|
||||
|
||||
echo ""
|
||||
echo "✅ Done! Packages created:"
|
||||
ls -lh dist/
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Greasemonkey Test Page</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
h1 { color: #333; }
|
||||
.test-section {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.test-element {
|
||||
padding: 10px;
|
||||
background: #e3f2fd;
|
||||
border-left: 4px solid #2196F3;
|
||||
margin: 10px 0;
|
||||
}
|
||||
code {
|
||||
background: #f5f5f5;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Greasemonkey Extension Test Page</h1>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Test Element Selector</h2>
|
||||
<p>This page contains elements you can target with your Greasemonkey rules.</p>
|
||||
|
||||
<div id="test-element-1" class="test-element">
|
||||
<strong>Element #1</strong> - ID: <code>#test-element-1</code>
|
||||
</div>
|
||||
|
||||
<div id="test-element-2" class="test-element">
|
||||
<strong>Element #2</strong> - ID: <code>#test-element-2</code>
|
||||
</div>
|
||||
|
||||
<div class="test-class-target test-element">
|
||||
<strong>Element #3</strong> - Class: <code>.test-class-target</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Example Rules to Try</h2>
|
||||
|
||||
<h3>Example 1: Change Background Color</h3>
|
||||
<ul>
|
||||
<li><strong>Match Type:</strong> URL contains string</li>
|
||||
<li><strong>URL Pattern:</strong> <code>test-page.html</code></li>
|
||||
<li><strong>CSS Code:</strong></li>
|
||||
</ul>
|
||||
<pre><code>body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
color: white !important;
|
||||
}</code></pre>
|
||||
|
||||
<h3>Example 2: Add Alert on Element</h3>
|
||||
<ul>
|
||||
<li><strong>Match Type:</strong> Page contains element</li>
|
||||
<li><strong>Element Selector:</strong> <code>#test-element-1</code></li>
|
||||
<li><strong>JavaScript Code:</strong></li>
|
||||
</ul>
|
||||
<pre><code>const elem = document.getElementById('test-element-1');
|
||||
elem.style.background = 'yellow';
|
||||
elem.innerHTML += ' - Modified by Greasemonkey!';</code></pre>
|
||||
|
||||
<h3>Example 3: Combined Rule</h3>
|
||||
<ul>
|
||||
<li><strong>Match Type:</strong> Both URL and element</li>
|
||||
<li><strong>URL Pattern:</strong> <code>test-page</code></li>
|
||||
<li><strong>Element Selector:</strong> <code>.test-class-target</code></li>
|
||||
<li><strong>JavaScript Code:</strong></li>
|
||||
</ul>
|
||||
<pre><code>const elem = document.querySelector('.test-class-target');
|
||||
elem.style.border = '4px solid red';
|
||||
elem.style.animation = 'pulse 2s infinite';
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);</code></pre>
|
||||
|
||||
<h3>Example 4: Hide Elements</h3>
|
||||
<ul>
|
||||
<li><strong>Match Type:</strong> URL contains string</li>
|
||||
<li><strong>URL Pattern:</strong> <code>test-page.html</code></li>
|
||||
<li><strong>CSS Code:</strong></li>
|
||||
</ul>
|
||||
<pre><code>#test-element-2 {
|
||||
display: none !important;
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>How to Test</h2>
|
||||
<ol>
|
||||
<li>Install the Greasemonkey extension in your browser</li>
|
||||
<li>Open this test page in your browser</li>
|
||||
<li>Click the Greasemonkey icon in your toolbar</li>
|
||||
<li>Create a new rule using one of the examples above</li>
|
||||
<li>Reload this page to see the effects</li>
|
||||
<li>Check the browser console (F12) for Greasemonkey log messages</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>Verification</h2>
|
||||
<p>Open your browser's developer console (F12) to see Greasemonkey execution logs.</p>
|
||||
<p>You should see messages like: <code>[Greasemonkey] Executing rule: Your Rule Name</code></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
console.log('Test page loaded. Greasemonkey rules should execute now if conditions are met.');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user