Getting Started

Chameleon applies saved CSS to matching websites. A rule has a name, a domain, CSS text, and an enabled switch. Once saved, matching pages update through the extension content script when the stored rule changes.

Install Or Load The Extension

If you are using a packaged build, install it through the distribution method provided by the project. If you are working from source, build the extension and load the generated extension in Chrome:

1. Build the extension from the project root.
2. Open chrome://extensions.
3. Turn on Developer mode.
4. Click Load unpacked.
5. Select the built extension folder.

After Chameleon is loaded, pin it from Chrome’s extensions menu so the popup is easy to open.

Create Your First Rule

1. Open the website you want to customize.
2. Click the Chameleon icon in the toolbar.
3. Click Create a Rule if the current site has no saved rules yet, or open the options page from the popup.
4. Create a new rule.
5. Enter a clear name, such as Readable article view.
6. Enter the domain you want the rule to match, such as example.com.
7. Keep Enabled on.
8. Add CSS and save.

Use this small rule for a first test:

main {
  max-width: 72ch !important;
  line-height: 1.7 !important;
}

a {
  text-decoration-thickness: 0.12em !important;
}

Reload the target page if you want to confirm the rule applies from a fresh page load. Chameleon also listens for storage changes, so edits should apply to matching open pages after you save.

Choose The Right Domain

The domain field controls where a rule runs:

• example.com matches example.com and subdomains such as docs.example.com.
• docs.example.com matches that host and its own subdomains.
• * matches every website.
• Full URLs are cleaned down to their hostname before matching.

Use * carefully. A global CSS rule can affect unrelated sites.

Verify The Rule

After saving, check these points:

• The rule is enabled.
• The current page hostname matches the rule domain.
• The CSS selector matches elements on the page.
• The target page is a normal website, not an internal Chrome page.
• The CSS is strong enough to override the site’s styles.

When a site has strong existing CSS, add !important only to the declarations that need it.

Rules are best for one saved style. Palettes are best when you want multiple versions of a site style, such as compact, focus, and dark variants.