https://github.com/simov/styler
Styler / Browser Extension
https://github.com/simov/styler
Last synced: 9 months ago
JSON representation
Styler / Browser Extension
- Host: GitHub
- URL: https://github.com/simov/styler
- Owner: simov
- License: mit
- Created: 2013-01-05T13:48:51.000Z (about 13 years ago)
- Default Branch: main
- Last Pushed: 2023-12-03T07:42:34.000Z (about 2 years ago)
- Last Synced: 2025-03-24T09:47:00.257Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 147 KB
- Stars: 24
- Watchers: 5
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Styler / Browser Extension
> _Styler lets you inject `.css` and `.js` files into web sites you visit_
## Install
1. Clone this repository
2. Navigate to `chrome://extensions`
3. Make sure that the `Developer mode` switch is enabled
4. Click on the `Load unpacked` button and select the cloned directory
## Configuration
Option | Defaults | Description
:--- | :--: | :---
__enable__ | `false` | Toggle configuration
__domain__ | `[]` | List of domains to match
__ignore__ | `[]` | List of domains to ignore
__inject__ | `[]` | List of files to inject
__folder__ | `''` | Files location
Set `domain` to `['*']` to inject on all domains.
When `folder` is ommited it defaults to the `sites` folder.
## Example
```js
[
{
"enable": true,
"domain": [
"*"
],
"ignore": [
"google.com"
],
"inject": [
"global-font.css"
]
},
{
"enable": true,
"domain": [
"github.com",
"gist.github.com"
],
"folder": "github",
"inject": [
"dark-theme.css",
"fixes.css"
]
},
{
"enable": false,
"domain": [
"youtube.com"
],
"folder": "youtube",
"inject": [
"youtube.css",
"ads.js"
]
}
]
```
```
sites/
├── config.json
├── global-font.css
├── github
│ ├── fixes.css
│ └── dark-theme.css
└── youtube
├── ads.js
└── youtube.css
```
1. Create a folder called `sites` under the root directory of this extension
2. Copy the above configuration in `sites/config.json`
3. Create two separate directories: `sites/github` and `sites/youtube`, and place your styles and scripts there
4. Repeat step `3.` for each web site you want to style
On every change to the configuration data structure you have to `Reload` the extension from `chrome://extensions`