Web Style Tweaker

A Chrome extension that allows you to adjust, customize, and test website styles. Enhance UI, test CSS resilience, and apply accessibility features with ease.

Features

Toggleable Features

• Dark Mode - Force dark mode on any website
• Focus Outlines - Force visible focus outlines for accessibility testing
• System Font - Replace all fonts with system fonts
• Hide Images & Media - Hide all images, videos, and media elements
• Layout Outlines - Visualize page structure with colored outlines
• Nerdy Mode - Enhance UI with polished, professional styling

One-Off Tests

• Random Colors - Apply random colors to break contrast
• Randomize Everything - Apply random styles to test CSS resilience

Utilities

• Soft Reset - Revert all toggleable changes without reloading
• Reload Page - Full page reload

Installation

From Source

1. Clone or download this repository
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" (toggle in top right)
4. Click "Load unpacked"
5. Select the extension directory

Development Setup

1. Make changes to the source files
2. Click the refresh icon on the extension card in chrome://extensions/
3. Test your changes on any webpage

Project Structure

web-style-tweaker/
├── manifest.json          # Extension manifest (Chrome Web Extension)
├── popup.html             # Extension popup UI
├── popup.js               # Popup logic and message handling
├── content.js             # Content script (injected into web pages)
├── nerdy-mode.css         # Enhanced UI styles for Nerdy Mode
└── README.md              # This file

Architecture

Components

manifest.json

Defines the extension metadata, permissions, and web accessible resources.

Note: Currently set to manifest_version: 1, but should be 3 for modern Chrome extensions. Update this if you encounter compatibility issues.

popup.html & popup.js

• popup.html: The extension's popup UI with all control buttons
• popup.js: Handles user interactions and communicates with content script via Chrome messaging API

content.js

The main content script that:

• Injects styles into web pages
• Manages toggle states
• Handles style application and removal
• Provides API for style manipulation

nerdy-mode.css

External stylesheet loaded dynamically for the Nerdy Mode feature.

Message Protocol

The extension uses Chrome's messaging API for communication between popup and content script:

Message Types

CSS_STRESS_TOGGLE

• Toggle a style feature on/off
• Request: { type: 'CSS_STRESS_TOGGLE', test: 'darkMode' }
• Response: { ok: true, toggledOn: boolean }

CSS_STRESS_RUN_ONCE

• Execute a one-off test
• Request: { type: 'CSS_STRESS_RUN_ONCE', test: 'randomColors' }
• Response: { ok: true }

CSS_STRESS_RESET_SOFT

• Reset all toggleable styles
• Request: { type: 'CSS_STRESS_RESET_SOFT' }
• Response: { ok: true }

CSS_STRESS_GET_STATE

• Get current state of all toggles
• Request: { type: 'CSS_STRESS_GET_STATE' }
• Response: { ok: true, states: { darkMode: boolean, ... } }

Style Injection System

Styles are injected using <style> elements with unique IDs:

• Prefix: css-stress-style-
• Example: css-stress-style-darkmode
• Stored in state.styles Map for tracking

State Management

The content script maintains state in window.__CSS_STRESS__:

{
  state: {
    styles: Map,      // Active style elements
    toggles: Set      // Active toggle keys
  },
  api: {
    toggle: { ... },  // Toggle functions
    runOnce: { ... }, // One-off functions
    resetSoft: fn     // Reset function
  }
}

Development Guide

Adding a New Toggle Feature

1. Add the function in content.js:

function toggleMyFeature() {
  return toggleStyle('myfeature', `
    /* Your CSS here */
    body { background: red !important; }
  `);
}

2. Add to API object:

const api = {
  toggle: {
    // ... existing
    myFeature: toggleMyFeature
  }
};

3. Add button in popup.html:

<button id="myFeature">My Feature</button>

4. Add to toggleConfig in popup.js:

const toggleConfig = {
  // ... existing
  myFeature: { id: 'myFeature', off: 'Enable My Feature', on: 'Disable My Feature' }
};

5. Bind the toggle:

bindToggle('myFeature');

6. Add to state detection:

['darkMode', 'myFeature', ...].forEach(key => {
  states[key] = !!document.getElementById(STYLE_PREFIX + key);
});

Adding a One-Off Test

1. Add the function in content.js:

function myTestOnce() {
  // Apply styles directly to elements
  document.querySelectorAll('*').forEach(el => {
    el.style.transform = 'rotate(5deg)';
  });
}

2. Add to API:

runOnce: {
  // ... existing
  myTest: myTestOnce
}

3. Add button and bind in popup.js:

bind('myTest', () => sendRunOnce('myTest'));

Loading External CSS

For features that use external CSS files (like Nerdy Mode):

1. Add to manifest.json web_accessible_resources:

"web_accessible_resources": [
  {
    "resources": ["my-feature.css"],
    "matches": ["<all_urls>"]
  }
]

2. Load in toggle function:

async function toggleMyFeature() {
  const id = STYLE_PREFIX + 'myfeature';
  if (state.styles.has(id)) {
    removeStyle(id);
    return false;
  } else {
    const cssUrl = chrome.runtime.getURL('my-feature.css');
    const response = await fetch(cssUrl);
    const css = await response.text();
    addStyle(id, css);
    return true;
  }
}

Testing

1. Load the extension in Chrome
2. Navigate to any website
3. Click the extension icon
4. Test each feature:
   • Toggle features should show active state (green highlight)
   • One-off tests should apply immediately
   • Soft Reset should revert all toggles
   • Reload should fully reset the page

Browser Compatibility

• Chrome/Chromium (Manifest V3)
• Edge (Chromium-based)
• Other Chromium-based browsers

Note: Currently uses Manifest V1 syntax. Update to V3 for future compatibility.

Permissions

• activeTab - Access to the currently active tab
• scripting - Inject content scripts into web pages

Troubleshooting

Styles not applying

• Check browser console for errors
• Verify content script is injected (window.__CSS_STRESS__ exists)
• Check that styles aren't being overridden by page styles

Toggle state not syncing

• Ensure CSS_STRESS_GET_STATE message handler is working
• Check that style IDs match between injection and detection

External CSS not loading

• Verify file is in web_accessible_resources
• Check file path matches chrome.runtime.getURL() call
• Look for CORS errors in console

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Credits

Built for developers and designers who want to test and customize web styles.