Chrome custom JS and CSS extension

Using websites a lot - there might be a need to improve UX or UI.

For example, Block Youtube suggested videos overlay.

There are plenty of tools to change the website’s CSS (Stylebot, Stylus) and JS (Custom Javascript for Websites) and many more.

Mostly they are working fine, but there are several missing parts:

1. No sharing settings between accounts. You should setup plugin individually for each profile and copy rules on each change.
2. No automatic backup. You can store data in file, but again, you should update it manually on each change.
3. Separate plugins for CSS and JS. Each plugin affects your browser speed and performance is important.

So I’ve made a ”DNA” Chrome extension. Steps to setup:

1. Create a repository using DNA as a template at your GitHub account.
2. Write your CSS and JS rules in rules array:
3. Load the build folder as an unpacked extension
4. Profit!

Now you can set up your rules and persist in your GitHub account.

P.S. Here is how one of song translation site looks with DNA (before and after):

Brown background used to reduce eye fatigue.