Convert Figma logo to code with AI

openstyles logostylus

Stylus - Userstyles Manager

5,315
300
5,315
87

Top Related Projects

A lightweight polyfill library for Promise-based WebExtension APIs in Chrome

46,727

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

  1. Install the Stylus extension for your browser from the official store:

  2. Click on the Stylus icon in your browser toolbar and select "Manage styles" to open the Stylus dashboard.

  3. To create a new style, click on "Write new style" and enter your custom CSS code.

  4. Set the domain or URL pattern for which the style should be applied.

  5. 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.

46,727

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

  1. Chrome Web Store or beta
  2. Firefox add-ons or beta (as an xpi file)

In Opera browser please use our extension from Chrome Web Store, see the instruction.

Screenshots

ManagerEditorPopup searchPopup configManager configOptions
Style managerStyle editorPopup inline searchPopup config for usercssStyle manager config for usercssOptions

Help

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

GNU GPLv3

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.