rails · gsamokovarov · Aug 4, 2015 · Jul 19, 2015 · Jul 23, 2015 · Jul 26, 2015
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,5 @@ test/dummy/tmp/
 test/dummy/.sass-cache
 Gemfile.lock
 node_modules/
+dist/
+tmp/
diff --git a/Rakefile b/Rakefile
@@ -8,6 +8,8 @@ require 'socket'
 require 'rake/testtask'
 require 'tmpdir'
 require 'securerandom'
+require 'json'
+require 'web_console/testing/erb_precompiler'
 
 EXPANDED_CWD = File.expand_path(File.dirname(__FILE__))
 
@@ -20,11 +22,11 @@ end
 
 namespace :test do
   desc "Run tests for templates"
-  task :templates => "templates:all"
+  task templates: "templates:all"
 
   namespace :templates do
-    task :all   => [:daemonize, :npm, :rackup, :mocha, :kill]
-    task :serve => [:npm, :rackup]
+    task all: [ :daemonize, :npm, :rackup, :mocha, :kill ]
+    task serve: [ :npm, :rackup ]
 
     work_dir    = Pathname(__FILE__).dirname.join("test/templates")
     pid_file    = Pathname(Dir.tmpdir).join("web_console.#{SecureRandom.uuid}.pid")
@@ -53,6 +55,67 @@ namespace :test do
   end
 end
 
+namespace :ext do
+  rootdir = Pathname('extensions')
+
+  desc 'Build Chrome Extension'
+  task chrome: 'chrome:build'
+
+  namespace :chrome do
+    dist   = Pathname('dist/crx')
+    extdir = rootdir.join(dist)
+    manifest_json = rootdir.join('chrome/manifest.json')
+
+    directory extdir
+
+    task build: [ extdir, 'lib:templates' ] do
+      cd rootdir do
+        cp_r [ 'img/', 'tmp/lib/' ], dist
+        `cd chrome && git ls-files`.split("\n").each do |src|
+          dest = dist.join(src)
+          mkdir_p dest.dirname
+          cp Pathname('chrome').join(src), dest
+        end
+      end
+    end
+
+    # Generate a .crx file.
+    task crx: [ :build, :npm ] do
+      out = "crx-web-console-#{JSON.parse(File.read(manifest_json))["version"]}.crx"
+      cd(extdir) { sh "node \"$(npm bin)/crx\" pack ./ -p ../crx-web-console.pem -o ../#{out}" }
+    end
+
+    # Generate a .zip file for Chrome Web Store.
+    task zip: [ :build ] do
+      version = JSON.parse(File.read(manifest_json))["version"]
+      cd(extdir) { sh "zip -r ../crx-web-console-#{version}.zip ./" }
+    end
+
+    desc 'Launch a browser with the chrome extension.'
+    task run: [ :build ] do
+      cd(rootdir) { sh "sh ./script/run_chrome.sh --load-extension=#{dist}" }
+    end
+  end
+
+  task :npm do
+    cd(rootdir) { sh "npm install --silent" }
+  end
+
+  namespace :lib do
+    templates = Pathname('lib/web_console/templates')
+    tmplib    = rootdir.join('tmp/lib/')
+    js_erb    = FileList.new(templates.join('**/*.js.erb'))
+    dirs      = js_erb.pathmap("%{^#{templates},#{tmplib}}d")
+
+    task templates: dirs + js_erb.pathmap("%{^#{templates},#{tmplib}}X")
+
+    dirs.each { |d| directory d }
+    rule '.js' => [ "%{^#{tmplib},#{templates}}X.js.erb" ] do |t|
+      File.write(t.name, WebConsole::Testing::ERBPrecompiler.new(t.source).build)
+    end
+  end
+end
+
 Bundler::GemHelper.install_tasks
 
 task default: :test
diff --git a/extensions/README.markdown b/extensions/README.markdown
@@ -0,0 +1,12 @@
+# Web Console Browser Extensions
+
+## Development
+
+### Quickstart
+
+```
+$ git clone https://github.com/rails/web-console.git
+$ cd web-console
+$ bundle install
+$ bundle exec rake ext:chrome:run
+```
diff --git a/extensions/chrome/html/devtools.html b/extensions/chrome/html/devtools.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<html>
+  <script src="/js/devtools.js"></script>
+</html>
diff --git a/extensions/chrome/html/panel.html b/extensions/chrome/html/panel.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <head><meta charset="utf-8"></head>
+  <body><div id="console" class="full-screen"></div></body>
+  <script src="/lib/console.js"></script>
+  <script src="/js/panel.js"></script>
+</html>
diff --git a/extensions/chrome/js/background.js b/extensions/chrome/js/background.js
@@ -0,0 +1,98 @@
+var tabInfo = {};
+var ports = {};
+
+initPanelMessage();
+initReqRes();
+initHttpListener();
+initNavListener();
+
+function panelMessage(tabId, type, msg) {
+  msg = msg || {};
+  msg.type = type;
+  if (ports[tabId]) {
+    ports[tabId].postMessage(msg);
+  }
+}
+
+function sendSessionId(tabId) {
+  panelMessage(tabId, 'session-id', { sessionId: tabInfo[tabId].sessionId });
+}
+
+function removeConsole(tabId) {
+  panelMessage(tabId, 'remove-console');
+}
+
+function initPanelMessage() {
+  chrome.runtime.onConnect.addListener(onConnect);
+
+  function handleMessage(msg) {
+    if (msg.type === 'session-id') {
+      sendSessionId(msg.tabId);
+    }
+  }
+
+  function onConnect(newPort) {
+    ports[newPort.name] = newPort;
+    newPort.onMessage.addListener(handleMessage);
+  }
+}
+
+function initReqRes() {
+  chrome.runtime.onMessage.addListener(handleMessage);
+
+  function handleMessage(req, sender, sendResponse) {
+    if (req.type === 'request') {
+      var url = tabInfo[req.tabId].remoteHost + '/' + req.url;
+      REPLConsole.request(req.method, url, req.params, function(xhr) {
+        sendResponse({ status: xhr.status, responseText: xhr.responseText });
+      });
+    }
+    return true;
+  }
+}
+
+function initHttpListener() {
+  var requestFilter = {
+    types: [ 'main_frame' ],
+    urls: [ 'http://*/*', 'https://*/*' ]
+  };
+
+  // Fired when a request is completed.
+  chrome.webRequest.onCompleted.addListener(
+    onResponse, requestFilter, [ 'responseHeaders' ]
+  );
+
+  function getHeaders(details) {
+    return details.responseHeaders.reduce(reduceFunc, {});
+  }
+
+  function reduceFunc(obj, header) {
+    obj[header.name] = header.value;
+    return obj;
+  }
+
+  function onResponse(details) {
+    var headers = getHeaders(details);
+    var sessionId;
+    if (sessionId = headers['X-Web-Console-Session-Id']) {
+      tabInfo[details.tabId] = {
+        sessionId: sessionId,
+        remoteHost: details.url.match(/([^:]+:\/\/[^\/]+)\/?/)[1]
+      };
+    }
+  }
+}
+
+function initNavListener() {
+  // Fired when a document is completely loaded and initialized.
+  chrome.webNavigation.onCompleted.addListener(function(details) {
+    if (filter(details)) {
+      sendSessionId(details.tabId);
+      removeConsole(details.tabId);
+    }
+  });
+
+  function filter(details) {
+    return details.frameId === 0 && tabInfo[details.tabId];
+  }
+}
diff --git a/extensions/chrome/js/devtools.js b/extensions/chrome/js/devtools.js
@@ -0,0 +1,4 @@
+var label = 'Console (Rails)';
+var icon  = 'img/icon_128.png';
+var html  = 'html/panel.html';
+chrome.devtools.panels.create(label, icon, html);
diff --git a/extensions/chrome/js/panel.js b/extensions/chrome/js/panel.js
@@ -0,0 +1,40 @@
+var tabId = chrome.devtools.inspectedWindow.tabId;
+var port = chrome.runtime.connect({ name: tabId.toString() });
+var repl;
+
+// We need to avoid the sandbox of Chrome DevTools via the messaging system.
+REPLConsole.request = function(method, url, params, callback) {
+  chrome.runtime.sendMessage({
+    tabId: tabId,
+    type: 'request',
+    method: method,
+    url: url,
+    params: params
+  }, callback);
+};
+
+// Handle messages from the background script.
+port.onMessage.addListener(function(msg) {
+  if (msg.type === 'session-id') {
+    updateRemotePath(msg.sessionId);
+  } else if (msg.type === 'remove-console') {
+    removeConsole();
+  }
+});
+
+function updateRemotePath(sessionId) {
+  var remotePath = 'console/repl_sessions/' + sessionId;
+  if (repl) {
+    repl.remotePath = remotePath;
+  } else {
+    repl = REPLConsole.installInto('console', { remotePath: remotePath });
+  }
+}
+
+function removeConsole() {
+  var script = 'if (REPLConsole && REPLConsole.currentSession) REPLConsole.currentSession.uninstall()';
+  chrome.devtools.inspectedWindow.eval(script);
+}
+
+port.postMessage({ type: 'session-id', tabId: tabId });
+removeConsole();
diff --git a/extensions/chrome/manifest.json b/extensions/chrome/manifest.json
@@ -0,0 +1,19 @@
+{
+  "name": "Rails Web Console",
+  "version": "0.0.0",
+  "manifest_version": 2,
+  "background": {
+    "scripts": ["lib/console.js", "js/background.js"]
+  },
+  "icons": {
+    "128": "img/icon_128.png"
+  },
+  "devtools_page": "html/devtools.html",
+  "permissions": [
+    "webRequest",
+    "webNavigation",
+    "http://*/*",
+    "https://*/*"
+  ],
+  "homepage_url": "https://github.com/rails/web-console"
+}
diff --git a/extensions/img/icon_128.png b/extensions/img/icon_128.png
diff --git a/extensions/package.json b/extensions/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "dev",
+  "version": "0.0.0",
+  "devDependencies": {
+    "crx": "^3.0.2"
+  }
+}
diff --git a/extensions/script/run_chrome.sh b/extensions/script/run_chrome.sh
@@ -0,0 +1,24 @@
+#!/bin/sh
+
+is_command() {
+  type $1 > /dev/null 2>&1
+}
+
+find_chrome_binary() {
+  for name in 'chromium' 'google-chrome' 'chromium-browser'; do
+    if is_command $name; then
+      echo $name
+      return
+    fi
+  done
+}
+
+CHROME_BINARY=${CHROME_BINARY:-`find_chrome_binary`}
+
+if is_command $CHROME_BINARY; then
+  $CHROME_BINARY $@
+else
+  echo 'ERROR: Chrome is not found.'
+  echo 'Please try "CHROME_BINARY=path/to/chrome".'
+  exit 1
+fi