Add build instructions

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.
+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.