Merge pull request #145 from bvaughn/deploy-chrome-updates

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",
@@ -130,11 +131,13 @@
     "react-is": "^16.9.0-alpha.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
+    "request-promise": "^4.2.4",
     "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"
+    "webpack-cli": "^3.1.2",
+    "xml-js": "^1.6.11"
   }
 }

shells/browser/chrome/build.js

@@ -1,10 +1,35 @@
 #!/usr/bin/env node
 
 const chalk = require('chalk');
+const { execSync } = require('child_process');
+const { join } = require('path');
+const rp = require('request-promise');
+const convert = require('xml-js');
 const build = require('../shared/build');
 
 const main = async () => {
-  await build('chrome');
+  const manifestVersion = await rp(
+    'https://react-devtools-experimental-chrome.now.sh/updates.xml'
+  )
+    .then(xmlString => {
+      const parsedXML = convert.xml2js(xmlString);
+      const version =
+        parsedXML.elements[0].elements[0].elements[0].attributes.version;
+      const match = /(\d)\.(\d)\.(\d)\.*(\d)*/.exec(version);
+      if (match !== null) {
+        const prerelease = parseInt(match[4], 10) || 0;
+        return `${match[1]}.${match[2]}.${match[3]}.${prerelease + 1}`;
+      }
+    })
+    .catch(error => null);
+
+  await build('chrome', manifestVersion);
+
+  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:'));

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/build.js

@@ -17,7 +17,7 @@ const preProcess = async (destinationPath, tempPath) => {
   await ensureDir(tempPath); // Create temp dir for this new build
 };
 
-const build = async (tempPath, manifestPath) => {
+const build = async (tempPath, manifestPath, manifestVersion) => {
   const binPath = join(tempPath, 'bin');
   const zipPath = join(tempPath, 'zip');
 
@@ -63,8 +63,14 @@ const build = async (tempPath, manifestPath) => {
     STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file)))
   );
 
-  let manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
-  manifest.description += `\n\nCreated from revision ${getGitCommit()}`;
+  const commit = getGitCommit();
+
+  const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
+  manifest.description += `\n\nCreated from revision ${commit}`;
+  if (manifestVersion) {
+    manifest.version = manifestVersion;
+    manifest.version_name = `${manifestVersion} ${commit}`;
+  }
   writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
 
   // Pack the extension
@@ -84,7 +90,7 @@ const postProcess = async (tempPath, destinationPath) => {
   await remove(tempPath); // Clean up temp directory and files
 };
 
-const main = async buildId => {
+const main = async (buildId, manifestVersion) => {
   const root = join(__dirname, '..', buildId);
   const manifestPath = join(root, 'manifest.json');
   const destinationPath = join(root, 'build');
@@ -92,7 +98,7 @@ const main = async buildId => {
   try {
     const tempPath = join(__dirname, 'build', buildId);
     await preProcess(destinationPath, tempPath);
-    await build(tempPath, manifestPath);
+    await build(tempPath, manifestPath, manifestVersion);
 
     const builtUnpackedPath = join(destinationPath, 'unpacked');
     await postProcess(tempPath, destinationPath);

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.firefox.html

@@ -1,6 +1,7 @@
 <ol>
   <li><a href="packed.zip">download extension</a></li>
+  <li>Extract/unzip</li>
   <li>Visit <code>about:debugging</code></li>
   <li>Click "Load Temporary Add-on"</li>
-  <li>Select extension</li>
+  <li>Select the <code>manifest.json</code></li>
 </ol>

shells/browser/shared/deploy.js

@@ -3,18 +3,30 @@
 const { exec, execSync } = require('child_process');
 const { readFileSync, writeFileSync } = require('fs');
 const { join } = require('path');
-const build = require('./build');
+const convert = require('xml-js');
 
 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') {
+    const file = readFileSync(join(buildPath, 'unpacked', 'manifest.json'));
+    const json = JSON.parse(file);
+    const { version } = json;
+
+    const xmlString = readFileSync(join(root, 'updates.xml'), 'utf8');
+    const parsedXML = convert.xml2js(xmlString);
+    parsedXML.elements[0].elements[0].elements[0].attributes.version = version;
+
+    writeFileSync(join(buildPath, 'updates.xml'), convert.js2xml(parsedXML));
+  }
+
   const file = readFileSync(join(root, 'now.json'));
   const json = JSON.parse(file);
   const alias = json.alias[0];