diff --git a/README.md b/README.md index 943721f..61b9cf3 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,31 @@ ## Contributing +### Building + +Development requires [Node.js](https://nodejs.org) and NPM: + +```shell +sudo apt install nodejs npm +``` + +To build the extension: + +```shell +npm run build +``` + +There is also `npm run dev` which will spawn a process that watches for changes and rebuilds the extension automatically. + +The files that drive the extension are: + +* `manifest.json` - This is read by browsers to let it know what permissions the extension needs, and where things like the extension options page and icons are. Note the `content_scripts` section that calls out `scpnet.org`, this is for the "interwiki" iframe provided by SCP-RU. +* `options.html` - This is the webpage that appears when you open the extension's options, and is the UI for setting preferences. +* `options.js` - This handles the loading and saving of preferences via the `chrome.storage.sync.get/set` API. +* `main.js` - This handles the injection of the stylesheets into the bottom of the `head` so they cascade correctly. + +### Adding new styles + There are five available types of stylesheets to build: 1. Layouts (movement of elements around the page, margins and padding for big block-level stuff. @@ -15,6 +40,8 @@ They also cascade in that order, with layout injected first and ratings last. Th If you want a unified theme that touches more than one area, it needs to be broken out into different stylesheets. That means no `background-color:` selectors in a `.layouts.css` file and no `position:` stuff in a `.fonts.css` file. +If you add a stylesheet, you need to add a corresponding option line in `options.html`. The extension is not smart enough to do it dynamically and probably won't ever be due to an interest in keeping it small and lightweight. + There is also a `/img` folder where you put your thumbnail of the look of the thing. Dimensions are: * Color: 275x225 @@ -25,13 +52,6 @@ There is also a `/img` folder where you put your thumbnail of the look of the th If you have assets that need to be loaded like alternate logos, please store them on http://www.scp-wiki.net/component:s-css-p which will require a wikidot login, or get them to me in some other manner and I will handle it. Do *not* link to imgur or some other image hosting service in your CSS. -The files that drive the extension are: - -* `manifest.json` - This is read by browsers to let it know what permissions the extension needs, and where things like the extension options page and icons are. Note the `content_scripts` section that calls out `scpnet.org`, this is for the "interwiki" iframe provided by SCP-RU. -* `options.html` - This is static so if you add a stylesheet, you need to add a corresponding option line here. The extension is not smart enough to do it dynamically and probably won't ever be due to an interest in keeping it small and lightweight. -* `options.js` - This handles the loading and saving of preferences via the `chrome.storage.sync.get/set` API. -* `main.js` - This handles the injection of the stylesheets into the bottom of the `head` so they cascade correctly. - ## Overriding S-CSS-P -If you have a page that contains custom CSS and would like to alert users of S-CSS-P that they should consider disabling the extension, please edit the slug of your page into http://scp-wiki.net/component:s-css-p in the code block. This is not yet implemented but the next major milestone will include this capability. \ No newline at end of file +If you have a page that contains custom CSS and would like to alert users of S-CSS-P that they should consider disabling the extension, please edit the slug of your page into http://scp-wiki.net/component:s-css-p in the code block. This is not yet implemented but the next major milestone will include this capability.