Top Related Projects
A lightweight polyfill library for Promise-based WebExtension APIs in Chrome
uBlock Origin - An efficient blocker for Chromium and Firefox. Fast and lean.
Violentmonkey provides userscripts support for browsers. It works on browsers with WebExtensions support.
Greasemonkey is a user script manager for Firefox.
Tampermonkey is the most popular userscript manager, with over 10 million users. It's available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox.
Quick Overview
Stylus is a browser extension for Chrome, Firefox, and Opera that allows users to easily manage and apply custom CSS styles to websites. It provides a powerful interface for creating, editing, and organizing user styles, enabling extensive customization of web pages' appearance.
Pros
- Offers a user-friendly interface for creating and managing custom CSS styles
- Supports a wide range of browsers, including Chrome, Firefox, and Opera
- Provides advanced features like syntax highlighting, CSS preprocessing, and style sync
- Allows for conditional style application based on URLs, domains, or regular expressions
Cons
- May require basic knowledge of CSS for effective use
- Can potentially slow down browser performance if too many complex styles are applied
- Limited built-in sharing capabilities for user-created styles
- Occasional compatibility issues with certain websites or browser updates
Getting Started
-
Install the Stylus extension for your browser from the official store:
-
Click on the Stylus icon in your browser toolbar and select "Manage styles" to open the Stylus dashboard.
-
To create a new style, click on "Write new style" and enter your custom CSS code.
-
Set the domain or URL pattern for which the style should be applied.
-
Save the style and refresh the target website to see the changes.
For more detailed instructions and advanced usage, refer to the Stylus Wiki.
Competitor Comparisons
A lightweight polyfill library for Promise-based WebExtension APIs in Chrome
Pros of webextension-polyfill
- Provides a unified API for cross-browser extension development
- Simplifies the process of creating extensions compatible with multiple browsers
- Actively maintained by Mozilla, ensuring regular updates and support
Cons of webextension-polyfill
- Limited to browser extension development, not a general-purpose styling tool
- May introduce a small performance overhead due to the abstraction layer
- Requires additional setup and integration into existing projects
Code Comparison
webextension-polyfill:
browser.tabs.query({active: true, currentWindow: true}).then(tabs => {
browser.tabs.sendMessage(tabs[0].id, {greeting: "Hello"});
});
Stylus:
chrome.tabs.query({active: true, currentWindow: true}, tabs => {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "Hello"});
});
Summary
webextension-polyfill is a library focused on providing a consistent API for cross-browser extension development, while Stylus is a user styles manager for customizing web page appearances. The former offers broader browser compatibility and simplified development, but is limited to extension creation. Stylus, on the other hand, provides powerful styling capabilities for end-users but may require more effort for cross-browser compatibility in extension development.
uBlock Origin - An efficient blocker for Chromium and Firefox. Fast and lean.
Pros of uBlock
- More comprehensive content blocking, including network requests and scripts
- Larger user base and more frequent updates
- Better performance and lower resource usage
Cons of uBlock
- Less customizable for styling websites
- Primarily focused on ad-blocking rather than CSS customization
- Steeper learning curve for advanced features
Code Comparison
Stylus (CSS-based customization):
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
uBlock (Filter-based blocking):
||example.com/ads/*
||tracking.com^$third-party
Key Differences
- Stylus is primarily for custom CSS injection and website styling
- uBlock focuses on content blocking and privacy protection
- Stylus offers more granular control over website appearance
- uBlock provides broader protection against ads, trackers, and malware
Use Cases
- Use Stylus for customizing website appearance and layout
- Use uBlock for comprehensive ad-blocking and privacy protection
- Stylus is ideal for web developers and designers
- uBlock is better suited for general users seeking improved browsing experience
Community and Support
- Both projects have active communities on GitHub
- uBlock has more contributors and a larger user base
- Stylus has a more specialized focus, attracting CSS enthusiasts
Compatibility
- Both extensions are available for major browsers (Chrome, Firefox, Edge)
- uBlock offers additional features on Firefox due to extended API support
- Stylus works well alongside other content blockers, including uBlock
Violentmonkey provides userscripts support for browsers. It works on browsers with WebExtensions support.
Pros of Violentmonkey
- Supports a wider range of userscript managers, including Greasemonkey and Tampermonkey
- Offers more advanced features for userscript management and development
- Has a larger and more active community, resulting in frequent updates and improvements
Cons of Violentmonkey
- May have a steeper learning curve for new users compared to Stylus
- Can be more resource-intensive due to its broader feature set
- Lacks some of the specialized CSS-focused tools that Stylus provides
Code Comparison
Stylus (CSS-focused):
@-moz-document domain("example.com") {
body {
background-color: #f0f0f0;
}
}
Violentmonkey (JavaScript-focused):
// ==UserScript==
// @name Example Script
// @match https://example.com/*
// ==/UserScript==
(function() {
document.body.style.backgroundColor = '#f0f0f0';
})();
While both extensions allow for website customization, Stylus is primarily designed for CSS modifications, making it more straightforward for styling tasks. Violentmonkey, on the other hand, provides a full JavaScript environment, offering more flexibility and power for complex modifications and functionality enhancements.
Greasemonkey is a user script manager for Firefox.
Pros of Greasemonkey
- Supports a wider range of browsers, including Firefox and Chrome-based browsers
- More established and mature project with a longer history
- Offers more advanced scripting capabilities, allowing for complex user scripts
Cons of Greasemonkey
- Less user-friendly interface for managing scripts
- Requires more technical knowledge to create and modify scripts
- Limited built-in features for CSS manipulation compared to Stylus
Code Comparison
Greasemonkey script example:
// ==UserScript==
// @name My Script
// @include http://example.com/*
// ==/UserScript==
(function() {
// Your code here
})();
Stylus CSS example:
@-moz-document domain("example.com") {
body {
background-color: #f0f0f0;
}
}
Summary
Greasemonkey is a powerful tool for advanced users who need complex scripting capabilities across multiple browsers. It offers more flexibility but requires more technical knowledge. Stylus, on the other hand, focuses on CSS manipulation and provides a more user-friendly interface for managing styles. The choice between the two depends on the user's needs and technical expertise.
Tampermonkey is the most popular userscript manager, with over 10 million users. It's available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox.
Pros of Tampermonkey
- More versatile, supporting a wider range of script types and functionalities
- Larger user base and community, resulting in more available scripts and resources
- Better cross-browser compatibility, available on more platforms
Cons of Tampermonkey
- Potentially higher resource usage due to its broader scope
- More complex interface, which may be overwhelming for new users
- Higher security risk due to the ability to run arbitrary JavaScript
Code Comparison
Tampermonkey script example:
// ==UserScript==
// @name My Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Example script
// @match https://example.com/*
// ==/UserScript==
(function() {
'use strict';
// Your code here...
})();
Stylus CSS example:
@-moz-document domain("example.com") {
body {
background-color: #f0f0f0;
}
.header {
color: #333;
}
}
The main difference is that Tampermonkey allows for full JavaScript functionality, while Stylus is limited to CSS modifications. Tampermonkey scripts can manipulate page content and behavior, whereas Stylus focuses on styling changes.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Stylus
Stylus is a fork of Stylish for Chrome, also compatible with Firefox as a WebExtension
Highlights
- In addition to the userstyles.org site, styles with customizable parameters can also be installed from .user.css or .user.styl URLs (see Usercss format wiki).
- Site styles can be discovered and previewed in the popup using inline search with screenshot thumbnails.
- A backup feature which is compatible with other userstyles managers.
- Configurable automatic update function for installed styles.
- Customizable UI, optional layouts, and tweaks.
- Two different optional code validators with user-configurable rules: CSSLint and Stylelint.
- Both validators use Web Worker API to run in a separate background thread inside the editor tab without blocking your interaction with the code.
- CSSLint is heavily modified compared to the effectively frozen original one and supports various CSS3 features as well as CSS4 Color and CSS Grid syntax.
Releases
- Chrome Web Store or beta
- Firefox add-ons or beta (as an xpi file)
In Opera browser please use our extension from Chrome Web Store, see the instruction.
Screenshots
Manager | Editor | Popup search | Popup config | Manager config | Options |
---|---|---|---|---|---|
Help
- Stylus help and FAQ in our Wiki
- Discussion section of our representation on add0n.com
- Discord:
Contributing
The source is hosted on GitHub and pull requests are welcome.
You can help us translate the extension on Transifex.
See our contributing page for more details.
License
Inherited code from the original Stylish:
Copyright © 2005-2014 Jason Barnabe
Current Stylus:
Copyright © 2017-2023 Stylus Team
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/.
External libraries
The licenses of external libraries used in this project or modified versions of external libraries can be found in their respective directory.
Top Related Projects
A lightweight polyfill library for Promise-based WebExtension APIs in Chrome
uBlock Origin - An efficient blocker for Chromium and Firefox. Fast and lean.
Violentmonkey provides userscripts support for browsers. It works on browsers with WebExtensions support.
Greasemonkey is a user script manager for Firefox.
Tampermonkey is the most popular userscript manager, with over 10 million users. It's available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot