update "Serving Resources Locally" docs

Author: marcustyphoon

docs/contributing/Build-XKit.md

@@ -10,9 +10,38 @@
 
 Serving extensions and themes locally is useful for rapid development without requiring the use of the XKit Editor, but some initial set up is required:
 
-1. Run `gulp server` to start the resource server.  This task will automatically build the extension and theme files from source before the server starts.  See [`gulp server`](#gulp-server) for more information.
-2. Navigate to `https://localhost:31337` and create a security exception for the `localhost` domain.  The project uses self-signed SSL/TLS certificates that are untrusted by default in order to work around mixed-content warnings for websites like Tumblr that are served over HTTPS.
-3. Change [the relevant lines](https://gist.github.com/hobinjk/4b0ae4698d4e35320d3c977753946cf5) in xkit.js and manifest.json to point to and allow serving XKit from `localhost`.
+1. Run `npm run watch-extensions` to start the resource server. This task will automatically build the extension and theme files from source whenever they are changed, storing them in `Extensions/dist`.
+2. Change these lines in xkit.js and manifest.json to point the XKit updater at `Extensions/dist`:
+
+```diff
+diff --git a/manifest.json b/manifest.json
+index 9e964097..52c4119c 100644
+--- a/manifest.json
++++ b/manifest.json
+@@ -33,7 +33,7 @@
+   "author": "New XKit Team",
+   "permissions": ["storage", "unlimitedStorage", "*://*.tumblr.com/*", "https://new-xkit.github.io/XKit/*", "https://cloud.new-xkit.com/*" ],
+   "version": "7.9.2",
+-  "web_accessible_resources": [ "manifest.json", "editor.js" ],
++  "web_accessible_resources": [ "*.json", "editor.js" ],
+   "applications": {
+     "gecko": {
+       "id": "@new-xkit",
+diff --git a/xkit.js b/xkit.js
+index d5b0cfd8..719402e1 100755
+--- a/xkit.js
++++ b/xkit.js
+@@ -192,7 +192,7 @@ var xkit_global_start = Date.now();  // log start timestamp
+ 		download: {
+ 			// TODO: implement as module, lose most of this code
+ 			github_fetch: function(path, callback) {
+-				var url = 'https://new-xkit.github.io/XKit/Extensions/dist/' + path;
++				var url = browser.runtime.getURL('/Extensions/dist/') + path;
+ 				GM_xmlhttpRequest({
+ 					method: "GET",
+ 					url: url,
+```
+
 4. Reload the XKit extension in the browser under test:
   - Chrome: [reload the unpacked extension](https://developer.chrome.com/extensions/getstarted#unpacked)
   - Firefox: [reload the temporary add-on](https://developer.mozilla.org/en-US/docs/Tools/about:debugging#Extensions)
@@ -26,10 +55,14 @@ Serving extensions and themes locally is useful for rapid development without re
 
 Shortcut for `eslint .`.
 
-#### `npm build-extensions`
+#### `npm run build-extensions`
 
 Builds the extension and themes distribution from source, including the JSON-ified extension files, `list.json`, `gallery.json`, and`themes.json`.
 
+#### `npm run watch-extensions`
+
+Starts a task that builds the extension and themes distribution from source whenever they are changed.
+
 #### `npm run build`
 
 Uses `web-ext build` with the necessary file exclusions to build and pack the WebExtension (unsigned).

package.json

@@ -3,6 +3,7 @@
   "license": "GPL-3.0",
   "scripts": {
     "build-extensions": "node dev/build.mjs",
+    "watch-extensions": "npx nodemon --ext js,css dev/build.mjs",
     "test": "eslint .",
     "lint": "web-ext lint",
     "build": "web-ext build",