Auto-update Chrome extension

.gitignore

@@ -9,4 +9,6 @@ yarn-error.log
 yarn-error.log
 .vscode
 .idea
-.watchmanconfig
+.watchmanconfig
+key.pem
+

package.json

@@ -83,6 +83,7 @@
     "classnames": "2.2.1",
     "cli-spinners": "^1.0.0",
     "clipboard-js": "^0.3.6",
+    "crx": "git+https://github.com/oncletom/crx#ef150e8",
     "css-loader": "^1.0.1",
     "error-stack-parser": "^2.0.2",
     "es6-symbol": "3.0.2",
@@ -133,7 +134,7 @@
     "scheduler": "^0.14.0-alpha.0",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
-    "web-ext": "^1.10.1",
+    "web-ext": "^3.0.0",
     "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2"
   }

shells/browser/chrome/build.js

@@ -1,11 +1,19 @@
 #!/usr/bin/env node
 
 const chalk = require('chalk');
+const { execSync } = require('child_process');
+const { join } = require('path');
 const build = require('../shared/build');
 
 const main = async () => {
   await build('chrome');
 
+  const cwd = join(__dirname, 'build');
+  execSync('crx pack ./unpacked -o ReactDevTools.crx -p ../../../../key.pem', {
+    cwd,
+  });
+  execSync('rm packed.zip', { cwd });
+
   console.log(chalk.green('\nThe Chrome extension has been built!'));
   console.log(chalk.green('You can test this build by running:'));
   console.log(chalk.gray('\n# From the react-devtools root directory:'));

shells/browser/chrome/manifest.json

@@ -4,6 +4,8 @@
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
   "version": "4.0.0",
 
+  "update_url": "https://react-devtools-experimental-chrome.now.sh/updates.xml",
+
   "minimum_chrome_version": "49",
 
   "icons": {

shells/browser/chrome/now.json

@@ -1,5 +1,5 @@
 {
   "name": "react-devtools-experimental-chrome",
   "alias": ["react-devtools-experimental-chrome"],
-  "files": ["index.html", "packed.zip"]
+  "files": ["index.html", "updates.xml", "ReactDevTools.crx"]
 }

shells/browser/chrome/updates.xml

@@ -0,0 +1,6 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
+  <app appid='akkpaehpnolchhkkfbedcdcikfdnjobk'>
+    <updatecheck codebase='https://react-devtools-experimental-chrome.now.sh/ReactDevTools.crx' version='4.0.0' />
+  </app>
+</gupdate>

shells/browser/shared/deploy.chrome.html

@@ -1,8 +1,6 @@
 <ol>
-  <li><a href="packed.zip">download extension</a></li>
-  <li>Double-click to extract</li>
-  <li>Visit <code>chrome://extensions</code></li>
-  <li>Ensure "Developer Mode" is enabled</li>
-  <li>Click "LOAD UNPACKED"</li>
-  <li>Select extension</li>
+  <li><a href="ReactDevTools.crx">download extension</a></li>
+  <li>Navigate to <a href="chrome://extensions/">chrome://extensions/</a></li>
+  <li>Drag <code>ReactDevTools.crx</code> into Chrome</li>
+  <li>Choose "Add Extension" when prompted</li>
 </ol>

shells/browser/shared/deploy.js

@@ -3,18 +3,26 @@
 const { exec, execSync } = require('child_process');
 const { readFileSync, writeFileSync } = require('fs');
 const { join } = require('path');
-const build = require('./build');
 
 const main = async buildId => {
   const root = join(__dirname, '..', buildId);
   const buildPath = join(root, 'build');
 
-  await build(buildId);
+  execSync(`node ${join(root, './build')}`);
 
   await exec(`cp ${join(root, 'now.json')} ${join(buildPath, 'now.json')}`, {
     cwd: root,
   });
 
+  if (buildId === 'chrome') {
+    await exec(
+      `cp ${join(root, 'updates.xml')} ${join(buildPath, 'updates.xml')}`,
+      {
+        cwd: root,
+      }
+    );
+  }
+
   const file = readFileSync(join(root, 'now.json'));
   const json = JSON.parse(file);
   const alias = json.alias[0];