Styler lets you inject .css
and .js
files into web sites you visit.
- Pull this repository
- Navigate to
chrome://extensions
- Make sure that the
Developer mode
checkbox in the top right corner is checked - Click on the
Load Unpacked
button and select the folder containing this repository
Option | Defaults | Description |
---|---|---|
enable | false |
Toggle configuration |
cache | false |
Toggle caching |
match | [] |
List of domains to match |
ignore | [] |
List of domains to ignore |
inject | [] |
List of files to inject |
location | '' |
Files location |
When
cache
is enabled you have toReload
the extension every time you make changes to theinject
ed files.
When
match
is set to['*']
it is going to match every domain.
When
location
is ommited it defaults to thesites
folder.
[
{
"enable": true,
"cache": true,
"match": [
"*"
],
"ignore": [
"google.com"
],
"inject": [
"global-font.css"
]
},
{
"enable": true,
"cache": false,
"match": [
"github.com",
"gist.github.com"
],
"inject": [
"dark-theme.css",
"fixes.css"
],
"location": "github"
},
{
"enable": false,
"cache": true,
"match": [
"youtube.com"
],
"inject": [
"youtube.css",
"ads.js"
],
"location": "youtube"
}
]
sites/
├── config.json
├── global-font.css
├── github
│ ├── fixes.css
│ └── dark-theme.css
└── youtube
├── ads.js
└── youtube.css
- Create a folder called
sites
under the root directory of this extension - Copy the above configuration in
sites/config.json
- Create two separate directories:
sites/github
andsites/youtube
, and place your styles and scripts there - Repeat step
3.
for each web site you want to style
Every time you make changes to the configuration data structure you have to
Reload
the extension fromchrome://extensions