ankit / stylebot

Change the appearance of the web instantly

Stylebot

Stylebot is a browser extension that lets you change the appearance of the web instantly.

Available on Chrome, Firefox and Edge.

• Easy to use: Pick and style elements using UI actions
• Simple & Quick: Changes are saved instantly
• Code editor - Write your own CSS
• Readability Mode - Make articles on any site readable by hiding non-essential page elements like sidebars, footers and ads.
• Grayscale Mode - Turn on grayscale to reduce strain from websites

How to contribute

Donate

Buy me a coffee via Ko-fi

Translate

Add support for a locale via the following steps

• See supported locales
• If src/_locales/[locale].config already exists, please help improve translations
• If not, copy src/_locales/en.config to src/_locales/[locale].config
• Update strings in src/_locales/[locale].config to match the locale

Add new features or fix bugs

If you would like to add a new feature to Stylebot or fix a bug, submit an issue in GitHub (if there is no existing one), discuss it, and wait for approval.

Development

Firefox

• Run yarn watch:firefox to build locally
• Run yarn start:firefox to launch Firefox with development build

Chrome/Edge

• Run yarn watch to build locally
• Open chrome://extensions page.
• Disable the official Stylebot version.
• Enable the Developer mode.
• Click Load unpacked extension button
• Navigate to the project's dist/ folder

Release

• Add entry to CHANGELOG
• Update version in package.json and src/extension/manifest.json
• Chrome and Edge: Run yarn build and manually create zip for distribution from dist/
• Firefox: Run yarn build:firefox and manually create zip for distribution from firefox-dist/

Patches

Patches to dependencies are located under /patches and are automatically applied on running yarn using patch-package.

• bootstrap-vue+2.21.1.patch - Patch to work around a requestAnimationFrame issue in Firefox extensions.

License

Stylebot is MIT licensed.

stylebot's Issues

Arrow cursors

Request:

Use up/down cursors to increment/decrement values.

fraction 'em' values failing

Try entering setting padding-bottom to '0.5' then set the units to 'em'. The CSS generated is "padding-bottom: 0.5" - the units are nowhere. 1em works fine.

Doesn't work

I just installed http://github.com/ankit/stylebot/commit/3fdb82c9fde3b8815 on Chrome 6.0.447.0 dev. It doesn't work at all. In background page console I see

Uncaught illegal access     js/background.js:81

The 81 line is:
cache.styles = JSON.parse( localStorage['stylebot_styles'] );

localStorage is empty, so it cause an error.

Fix glitch in scrollbar

The scrollbar that appears in the widget and textareas is glitched. Either try to fix the glitch or create your own styled scrollbar.

Change the "Edit CSS" modal window to textarea below "Advanced"

Modal window "Edit CSS" would be much better placed under "Advanced".
E.g. top third of the screen would be the textarea to "Edit custom CSS for selected elements" and the other 2 thirds below would fit the "Edit the CSS for example.com".

Reasoning:

• Modal window does not allow me to see what I am changing. It generally stops me from doing anything else with the developer tools.
• "Custom CSS for selected element(s)" is usually just a few lines, which means the rest of the window height is an empty white space.
• This empty space could accommodate the "Edit CSS" that currently goes to the modal window :(

If this would require an apply(save) button I would be still a happy user, but better with autosaving / autoapply.

Thank you for StyleBot Ankit, great work, let me know if you need some clarificaton.

Can't Paste into #newtwitter Dialog when StyleBot is enabled using Google Chrome dev branch

I am running the dev branch of Google Chrome and for a long time I couldn't paste into the new tweet dialog (not the textbox at the top of the page, but the dialog when you reply or click the pencil icon at the top right). I could immediate paste something into the dialog if it was empty, but as soon as any text was present in the dialog, I couldn't paste into it. This was mostly annoying when I was trying to append a short url to the end or try to reply to several people (pasting twitter usernames together). I eventually went through and disabled ALL my extension and then I was able to paste. At that point I went through narrowing down the extension that was causing the problem... which was StyleBot. I can consistently recreate the problem by enabling/disabling Stylebot and at least one other person on the internet verified it for me. I enjoy your extension, but at the same time copy/paste is important to me as well in #newtwitter. If you could research and fix this, that would be great. Thanks!

Reset or Reset All does not revert back to original site content

I changed font style and color and then pressed "Reset" and "Reset All" buttons, font size or style was recovered but changed foreground color remained, even if I reload the page.

CSS3 selectors dont get saved.

When using the 'Edit css' options (either from the sidebar or the preferences dialog) css3-style selectors dont get saved. I am currently trying to save this:

iframe[src^="http://ad"] {
    display: none;
}

but the ^ char keeps getting removed.

This does not happen when using the sidebar to select the element

chrome for linux

import styles doesn't work.

i exported styles from my mac, tried to import into chrome on linux and nothing happens, not error, no styles created.

Currently running: Chrome 9.0.597.107

Comments are being deleted

After adding a comment in Advanced Mode they seems to be saved, but after some time they mysteriously disappear.

Radio buttons for UI

They might not be the best choice for options like Style and Decoration. This is because they've an initial indeterminate state that the user cannot return to. Reference: http://css-tricks.com/indeterminate-radio-buttons/

What can be the alternatives? The reason for using radio buttons (instead of checkboxes) is so that the Style and Decoration can also be set to None.

usability issue

when i am selecting text, the selector highlight box intrudes. give a faux padding to the selector outline so that the content that is selected for editing can viewed properly without any sort of intrusion.

i am raising this issue because i am being forced to manually edit CSS to see the changes instead of using the widget. just my 2 cents.

Untitled

@-webkit-keyframes not saved

When editing css, I want to add an animation:

@-webkit-keyframes bounce {
from {
left: 0px;
}
to {
left: 200px;
}
}

when i click save, it doesn't save.

fetching existing data

okay. i may be going overboard with these issues. :)
what i am missing is that the extension is not fetching existing data. i have to guess what values to put inside the box.
For example, consider, Font Size. the widget should fetch the value that is present in the existing css. so that I can adjust it according to the need. as it stands, i have to first guess the value and then adjust it to see if it suits me.
hope this helps.

Distinguish currently selected elements?

Maybe some way to distinguish the currently selected elements (corresponding to the current selector) from the rest of the DOM. These elements are the ones that will be affected when any property's value is changed in the widget.

Currently, I'm experimenting using expose. To try, checkout branch 'expose'.

Predefined Styles

This feature request is a little more tricky.
How about the user could create a list of styles and give a name to each style.
Then when editing a site and selecting a element he could go to that list and select one of those styles.
The selected style will be added to the current element style.

This will be a great because I try to use the same font family and font size for similar areas in different sites.

CSS Overide not working on Netvibes.com

I'm using www.netvibes.com, and i remove the header and the footer, but after applying the css, and closing stylebot it just reverts back to normal....

http://www.netvibes.com/senaxx#Nieuws

Add support for pseudo-classes

It would add more flexibility when customizing some awkwardly coded pages (facebook?)

Strip existing CSS

Could Stylebot strip existing CSS first, meaning style and link tags? I would like to start from scratch to edit a site.

Share your Styles/Themes/Skins

A repository to share with all the users your styles.
And a navegator within the extension or somewhere near. I want the styles in the Examples page!

No support for frames?

Doesn't Stylebot support web pages making use of HTML frames?

I've found a site using frames where the Stylebot window doesn't show up when clicking on the icon or using the shortcut, even though the icon is highlighted in the URL bar. Furthermore if I try to make my changes on the global config page of Stylebot they are not reflected on the website.

Using Javascript UI Toolkit?

For Widget UI, maybe use something like the jQuery UI? http://jqueryui.com/demos/button/

Suggest alternatives here.

Safari 5 version of the extension

The extension system in Safari 5 is conceived similarly to Chrome's, just how similar is the implementation, is it possible to have one codebase be made into a Safari extension and a Chrome extension?

Implementing parent selectors

Ability to put rule into specific element of selector chain.
Currently, css code is injected to last element of css selector chain. What if I need to address it's parent? For example, I want to outline forum post with structure like

[div class="message"]
   [font color="red"]Moderator[/font]
   [p]the whole message[/p]
[/div]

I can access [p] element by using ~ or + selectors, but I need to patch [div]. Is it even possible?

Keys Shortcuts

It would be nice to have some key shortcuts to the most used features.
A shortcut for the "select element" is a must.
Also I would like shortcut for the "Visibility: Hide" (I use this a lot)
And maybe for "Edit CSS", toogle "Basic/Advanced", font family...

To trim a page, the combination:
KeySelectElement-ClickElement-KeyToHide
would save a lot of time and patience.

Rendering delay with Stylebot enabled.

I encountered a rendering delay with Chrome 7 and 8 beta on many sites although I do not have created any CSS rules for these sites (only got 4 rules/sites on my list). Double checked it with stylebot enabled/disabled. Try to go back and forward (i.e. page in RAM) and notice the delay.

Privacy policy would be nice

When I begin to install StyleBot, it says "This extension will have access to all data, etc." (I'm paraphrasing)... It would be nice if on your main page with the "Install" button you mention that it will say this, and provide a link to a privacy policy saying what you do/don't collect and if you collect any information what you do with it.

Especially given that Google sponsored your summer of code work to produce it, and that they may have an interest in collecting information from users (though I'm guessing you aren't doing anything evil!! ;-), it behooves you to be very and explicitly clear about this.

Thanks for a great product!

Remove redundant Color Picker code

Get rid of redundant code that sets values for input fields that are not displayed. Also get rid of the redundant markup.

Paste (CMD + V) not working with Stylebot enabled

Hey guys,

I don't know whether it's an issue with stylebot or with the combination of my extensions. When Stylebot is enabled, I can't paste into any form field that already has any kind of content in it. When the form element is blank it's working though. Deactivating stylebot solves the issue for me.

Using Chrome 7.0.517.41 on OSX 10.6.4.

The other extensions I'm using are:

• 1Password
• AdBlock
• Delicious for GReader
• FlashBlock
• GReader Notifier
• GReader Snow Leopard
• Speed Dial

Specify for custom url?

It would be great if we can use it for specified custom url.

Support for style subscriptions (users can subscribe to maintained style lists)

This is similar to the browser sync feature, but instead of syncing to my other browsers, I could subscribe to a list of styles maintained by an editor. Similar in principle to AdBlock which maintains filter lists.

Temporary disable changes

Allow the user to temporary disable the changes made by stylebot, to se the page in the original formating

Color picker enhancements

*Page-wide color picker: Not sure if this is practical but you very often need to pick an existing color on your color scheme and modify it, a page-wide color picker would be a great tool for that.

*HSLa color adjustments: In the same mindset than the previous request, slight modifications of colors to achieve a consistent color palette usually require a simple reduction in saturation, brightness, hue or alpha transparency. Being able to toggle to HSLa fields would be a great addition to the color picking mechanism. Up/Down and Shift Up/Down events on the fields would be the cherry on top.

Rule selector with '>': can't access to definition via dropdown menu

I make some rules with '>'s in selector and they work fine, but now I can access them only via 'Edit CSS' button. They are listed in dropdown menu, but choosing any of them result empty rule edit box.

Apply styles to a page only instead of whole domain

It'd be cool to be able to apply styles only to a specific page instead of the whole domain.

I've found poorly coded pages where the styles I create work fine for one page but mess up other pages. This has to do with classes and IDs that are been re-used for different purposes in several pages.

Could it be possible to allow setting styles by individual pages too?

Thanks!

Single Color Picker Markup

Instead of inserting separate markup for each color picker in widget, insert markup for only one color picker. (use "Flat" mode in plugin and initialize the same instance of color picker for different properties)

All Styles Disappeared

All my styles simply disappeared.
Don't know what happened, so no much help there.
I'll be doing export and backup from now on.

enable/disable css

you could add enable/disable to css styles?

!important is removed

If I click Edit CSS, then add a rule like
p {
color: red !important;
}
and click Save, the !important will be removed next time I open Edit CSS on that page.

If an item has a background image, remove/override it if the user sets a background color.

Overriding an element's background fails if the element has a background image already. I'd suggest either removing the background image, or instead replacing it with a 1px transparent image - so that the user can see the background color show up.

Wildcard match URL

I would like to apply the same CSS when visiting several related sites or subdomains of a site. For example, several StackExchange sites would be selected by matching the URL with the regular expression

.*(serverfault|stackoverflow|superuser)\.com

Make omnibar icon optional

Not a fan of icons up there.

If is /has/ to stay, maybe it could change appearance to show that rules are active and have modified the page.

Breaks acid3

Acid3 is broken while Stylebot is enabled.

See http://crbug.com/53414

AFAIK this is a known problem with injecting scripts into acid3... I think the only workaround is for extension authors to blacklist the site from injection in their extensions.

Dragging too slow

The current implementation of dragging is not smooth ( especially on pages that are JS-heavy ). Some alternatives are:

1. Get rid of dragging altogether. Instead, open up the widget as a side panel (top/bottom/left/right)
2. Try another any other drag plugin other than jquery-ui's

Add support for sass.js

Would be fantastic if you could use SASS:

https://github.com/visionmedia/sass.js/tree/

Properties editable in Basic Widget

Which other properties may be added to the Basic widget? Off the top of my head, I can think of the following:

color, background-color, font-size, font-family, font-variant, font-style, text-decoration, display(hide element), border, opacity.

Stylebot prevents pasting of text into certain textareas that already contain text

There is a bug that appears to be caused by stylebot that leads to the inability to paste text into a textarea that already contains some text. This consistently occurs on some sites, and consistently does not occur on other sites.

To reproduce, try the following:
0) Load up Chrome. Install and enable stylebot. Disable any other Extensions.

1. Login to HN and go to the story submission page: http://news.ycombinator.com/x
2. In the 'text' field, paste some text. This should work normally.
3. Delete the text. Now type in any character or set of characters, such as an "s." Then attempt to paste the text again. This will not work.

Disabling stylebot eliminates this problem.

Visual Indication of changes

Provide an visual indication that stylebot have made changes to the current viewing page.

Rearrange top controls to support long selectors

Please move [^](selection toggler), < and X buttons down a little and expand rule dropdown menu to make space for long selectors (with exuberant class names)