Greasemonkey Extension Test Page

Test Element Selector

This page contains elements you can target with your Greasemonkey rules.

Example Rules to Try

Example 1: Change Background Color

• Match Type: URL contains string
• URL Pattern: test-page.html
• CSS Code:

body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
}

Example 2: Add Alert on Element

• Match Type: Page contains element
• Element Selector: #test-element-1
• JavaScript Code:

const elem = document.getElementById('test-element-1');
elem.style.background = 'yellow';
elem.innerHTML += ' - Modified by Greasemonkey!';

Example 3: Combined Rule

• Match Type: Both URL and element
• URL Pattern: test-page
• Element Selector: .test-class-target
• JavaScript 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);

Example 4: Hide Elements

• Match Type: URL contains string
• URL Pattern: test-page.html
• CSS Code:

#test-element-2 {
  display: none !important;
}

How to Test

1. Install the Greasemonkey extension in your browser
2. Open this test page in your browser
3. Click the Greasemonkey icon in your toolbar
4. Create a new rule using one of the examples above
5. Reload this page to see the effects
6. Check the browser console (F12) for Greasemonkey log messages

Verification

Open your browser's developer console (F12) to see Greasemonkey execution logs.

You should see messages like: [Greasemonkey] Executing rule: Your Rule Name