Wrap the webextension in a bootstrap addon

Fixes #2222

.eslintignore

@@ -3,5 +3,5 @@ static/vendor
 /scratch
 /Profile
 /build
-/webextension/build
+/addon/webextension/build
 /firefox

.gitignore

@@ -15,7 +15,7 @@ cookie-jar.txt
 *.log
 /.env.local
 /bin/.commit-new-version-copy
-/webextension/build
 /web-ext-artifacts
-/webextension/.web-extension-id
-/webextension/manifest.json
+/addon/webextension/build
+/addon/webextension/.web-extension-id
+/addon/webextension/manifest.json

Makefile

@@ -87,34 +87,34 @@ build/%.html: %.html
 	cp $< $@
 
 .PHONY: addon
-addon: npm set_backend set_sentry webextension/manifest.json webextension/build/shot.js webextension/build/inlineSelectionCss.js webextension/build/raven.js webextension/build/defaultSentryDsn.js
+addon: npm set_backend set_sentry addon/webextension/manifest.json addon/webextension/build/shot.js addon/webextension/build/inlineSelectionCss.js addon/webextension/build/raven.js addon/webextension/build/defaultSentryDsn.js
 
 .PHONY: zip
 zip: addon
 	# FIXME: should remove web-ext-artifacts/*.zip first
-	./node_modules/.bin/web-ext build --source-dir webextension/
+	./node_modules/.bin/web-ext build --source-dir addon/webextension/
 	mv web-ext-artifacts/page_shot*.zip build/pageshot.zip
 	# We'll try to remove this directory, but it's no big deal if we can't:
 	@rmdir web-ext-artifacts || true
 
 .PHONY: signed_xpi
 signed_xpi: addon
 	rm -f web-ext-artifacts/*.xpi
-	./node_modules/.bin/web-ext sign --api-key=${AMO_USER} --api-secret=${AMO_SECRET} --source-dir webextension/
+	./node_modules/.bin/web-ext sign --api-key=${AMO_USER} --api-secret=${AMO_SECRET} --source-dir addon/webextension/
 	mv web-ext-artifacts/*.xpi build/pageshot.xpi
 
-webextension/manifest.json: webextension/manifest.json.template build/.backend.txt package.json
+addon/webextension/manifest.json: addon/webextension/manifest.json.template build/.backend.txt package.json
 	./bin/build-scripts/update_manifest $< $@
 
-webextension/build/shot.js: shared/shot.js
+addon/webextension/build/shot.js: shared/shot.js
 	@mkdir -p $(@D)
 	./bin/build-scripts/modularize shot $< > $@
 
-webextension/build/inlineSelectionCss.js: build/server/static/css/inline-selection.css
+addon/webextension/build/inlineSelectionCss.js: build/server/static/css/inline-selection.css
 	@mkdir -p $(@D)
 	./bin/build-scripts/css_to_js inlineSelectionCss $< > $@
 
-webextension/build/raven.js: $(raven_source)
+addon/webextension/build/raven.js: $(raven_source)
 	@mkdir -p $(@D)
 	cp $< $@
 
@@ -188,13 +188,13 @@ set_backend:
 	@echo "Setting backend to ${PAGESHOT_BACKEND}"
 	./bin/build-scripts/set_file build/.backend.txt $(PAGESHOT_BACKEND)
 
-webextension/build/defaultSentryDsn.js: set_sentry
+addon/webextension/build/defaultSentryDsn.js: set_sentry
 
 .PHONY: set_sentry
 set_sentry:
 	@if [[ -z "$(PAGESHOT_SENTRY)" ]] ; then echo "No default Sentry" ; fi
 	@if [[ -n "$(PAGESHOT_SENTRY)" ]] ; then echo "Setting default Sentry ${PAGESHOT_SENTRY}" ; fi
-	./bin/build-scripts/set_file webextension/build/defaultSentryDsn.js "window.defaultSentryDsn = '${PAGESHOT_SENTRY}';null;"
+	./bin/build-scripts/set_file addon/webextension/build/defaultSentryDsn.js "window.defaultSentryDsn = '${PAGESHOT_SENTRY}';null;"
 
 
 build/.npm-install.log: package.json
@@ -212,20 +212,20 @@ all: addon server
 
 .PHONY: clean
 clean:
-	rm -rf build/ webextension/build/ webextension/manifest.json
+	rm -rf build/ addon/webextension/build/ addon/webextension/manifest.json
 
 .PHONY: help
 help:
 	@echo "Makes the addon and server"
 	@echo "Commands:"
 	@echo "  make addon"
-	@echo "    make/update the addon directly in webextension/ (built files in webextension/build/)"
+	@echo "    make/update the addon directly in addon/webextension/ (built files in addon/webextension/build/)"
 	@echo "  make server"
 	@echo "    make the server in build/server/"
 	@echo "  make all"
 	@echo "    equivalent to make server addon"
 	@echo "  make clean"
-	@echo "    rm -rf build/ webextension/build"
+	@echo "    rm -rf build/ addon/webextension/build"
 	@echo "  make zip"
 	@echo "    make a zip of the webextension in build/pageshot.zip"
 	@echo "See also:"

README.md

@@ -7,7 +7,7 @@ This is a prototype for a product to create better ways of sharing and saving co
 
 The project has been launched through [Test Pilot](https://testpilot.firefox.com/) at [pageshot.net](https://pageshot.net).  We are looking to a general audience release in the future.
 
-It is made up of both an add-on (using [WebExtensions](https://developer.mozilla.org/Add-ons/WebExtensions)) and a website using Node.js.  The add-on is in `webextension/`, and the website is in `server/`
+It is made up of both an add-on (using [WebExtensions](https://developer.mozilla.org/Add-ons/WebExtensions)) and a website using Node.js.  The add-on is in `addon/webextension/`, and the website is in `server/`
 
 Ian has been blogging about the [design, definition, and development process](http://www.ianbicking.org/tag/product-journal.html).
 
@@ -24,7 +24,7 @@ Clone the [repository](https://github.com/mozilla-services/pageshot/).
 There are two scripts to run the server locally and develop the add-on:
 
 - `./bin/run-server` will run the server on `http://localhost:10080` and automatically restart if there are changes.
-- `./bin/run-addon` will build a few parts of the addon (into `webextension/build/`) and start Firefox with the add-on installed.  The add-on will be refreshed automatically as you change files.  We recommend you open `about:debugging` to help debug the extension.
+- `./bin/run-addon` will build a few parts of the addon (into `addon/webextension/build/`) and start Firefox with the add-on installed.  The add-on will be refreshed automatically as you change files.  We recommend you open `about:debugging` to help debug the extension.
 - `./bin/run-addon --setup-profile` will setup a Firefox profile for your development; this way you can make persistent changes to the profile that you will use just for Page Shot development.
 
 **If you want to develop the add-on but not the server** you can run `./bin/run-addon -s https://pageshot.dev.mozaws.net`

addon/bootstrap.js

@@ -0,0 +1,14 @@
+/* exported startup */
+
+function startup(data, reason) {
+  data.webExtension.startup().then((api) => {
+    const {browser} = api;
+    browser.runtime.onMessage.addListener(handleMessage);
+  });
+}
+
+function install() {
+}
+
+function handleMessage() {
+}

addon/install.rdf

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>pageshot@mozilla.org</em:id>
+    <em:name>Page Shot</em:name>
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!--Firefox-->
+        <em:minVersion>51.0a1</em:minVersion>
+        <!-- FIXME: get version from... somewhere -->
+        <em:maxVersion>55.0</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+    <em:type>2</em:type>
+    <!-- FIXME: get version from package.json -->
+    <em:version>1.0</em:version>
+    <em:bootstrap>true</em:bootstrap>
+    <em:hasEmbeddedWebExtension>true</em:hasEmbeddedWebExtension>
+    <em:homepageURL>https://pageshot.net/</em:homepageURL>
+    <em:multiprocessCompatible>true</em:multiprocessCompatible>
+  </Description>
+</RDF>

bin/run-addon

@@ -5,6 +5,7 @@ cd "$(dirname ${BASH_SOURCE[0]})/.."
 base="$(pwd)"
 PATH="node_modules/.bin:$PATH"
 webext="$base/node_modules/.bin/web-ext"
+jpm="$base/node_modules/.bin/jpm"
 nodemon_pid=
 
 binary=
@@ -15,6 +16,7 @@ firefoxes="
 "
 setup_profile=
 server=
+bootstrap=
 
 for firefox in $firefoxes ; do
   if [[ -e "$firefox" ]] ; then
@@ -43,6 +45,8 @@ help () {
   echo "      Setup ./Profile/ and open it (can be used to make sticky changes to the test profile)"
   #echo "    --scratch"
   #echo "      Use a scratch profile"
+  echo "    --bootstrap"
+  echo "      Run the bootstrap form of the extension with jpm"
   echo "    -s or --server URL"
   echo "      Use the given server (default localhost:10080)"
 }
@@ -72,6 +76,10 @@ while [[ -n "$1" ]] ; do
       shift
       shift
       ;;
+    --bootstrap)
+      bootstrap=1
+      shift
+      ;;
     *)
       help
       exit 2
@@ -110,23 +118,45 @@ if [[ -n "$server" ]] ; then
 fi
 
 profile_option=
+bootstrap_profile_option=
 if [[ -z "$scratch" ]] ; then
   mkdir -p ./Profile
   profile_option="--firefox-profile ./Profile/"
+  bootstrap_profile_option="--profile ../Profile/ --no-copy"
 fi
 
 make addon
-nodemon \
-  -w shared/shot.js \
-  -w Makefile \
-  -w static/css/inline-selection.scss \
-  -w static/css/partials/ \
-  --on-change-only \
-  --exec make addon &
-nodemon_pid=$!
-
-echo "Running Firefox.  You might want to go to:"
-echo "  about:debugging"
-echo "and Debug Page Shot"
-
-$webext run --firefox "$binary" $profile_option --source-dir ./webextension/
+
+run_nodemon() {
+  nodemon \
+    -w shared/shot.js \
+    -w Makefile \
+    -w static/css/inline-selection.scss \
+    -w static/css/partials/ \
+    --on-change-only \
+    --exec make addon &
+  nodemon_pid=$!
+}
+
+run_webext() {
+  run_nodemon
+  echo "Running Firefox.  You might want to go to:"
+  echo "  about:debugging"
+  echo "and Debug Page Shot"
+
+  $webext run --firefox "$binary" $profile_option --source-dir ./addon/webextension/
+}
+
+run_jpm() {
+  echo "Running Firefox.  Reloading with jpm *will not* happen"
+  echo "If the Page Shot icon doesn't show up go to:"
+  echo "  Tools > Add-ons > Extensions and look for an error loading the add-on"
+  cd addon
+  $jpm run $bootstrap_profile_option -b "$binary"
+}
+
+if [[ -z "$bootstrap" ]] ; then
+  run_webext
+else
+  run_jpm
+fi

package.json

@@ -17,6 +17,7 @@
     "envc": "2.4.1",
     "escape-html": "1.0.3",
     "express": "4.14.1",
+    "jpm": "1.3.0",
     "keygrip": "1.0.1",
     "mobile-detect": "1.3.5",
     "morgan": "1.7.0",