Using grunt / npm as the build tool of choice.

Added the ability to automatically create chrome extension packages (for circleci)
Added some structure to the project ;)

.gitignore

@@ -0,0 +1,5 @@
+key.pem
+node_modules
+build/*.crx
+build/unpacked-dev
+build/unpacked-prod

Gruntfile.js

@@ -0,0 +1,132 @@
+module.exports = function(grunt) {
+
+  var pkg = grunt.file.readJSON('package.json');
+  var mnf = grunt.file.readJSON('code/manifest.json');
+
+  var fileMaps = { browserify: {}, uglify: {} };
+  var file, files = grunt.file.expand({cwd:'code/js'}, ['*.js']);
+  for (var i = 0; i < files.length; i++) {
+    file = files[i];
+    fileMaps.browserify['build/unpacked-dev/js/' + file] = 'code/js/' + file;
+    fileMaps.uglify['build/unpacked-prod/js/' + file] = 'build/unpacked-dev/js/' + file;
+  }
+
+  //
+  // config
+  //
+
+  grunt.initConfig({
+
+    clean: ['build/unpacked-dev', 'build/unpacked-prod', 'build/*.crx'],
+
+    mkdir: {
+      unpacked: { options: { create: ['build/unpacked-dev', 'build/unpacked-prod'] } },
+      js: { options: { create: ['build/unpacked-dev/js'] } }
+    },
+
+    jshint: {
+      options: grunt.file.readJSON('lint-options.json'), // see http://www.jshint.com/docs/options/
+      all: { src: ['package.json', 'lint-options.json', 'Gruntfile.js', 'code/**/*.js',
+                   'code/**/*.json', '!code/js/libs/*'] }
+    },
+
+    copy: {
+      main: { files: [ {
+        expand: true,
+        cwd: 'code/',
+        src: ['**', '!js/**', '!**/*.md'],
+        dest: 'build/unpacked-dev/'
+      } ] },
+      prod: { files: [ {
+        expand: true,
+        cwd: 'build/unpacked-dev/',
+        src: ['**', '!js/*.js'],
+        dest: 'build/unpacked-prod/'
+      } ] },
+      artifact: { files: [ {
+        expand: true,
+        cwd: 'build/',
+        src: [pkg.name + '-' + pkg.version + '.crx'],
+        dest: process.env.CIRCLE_ARTIFACTS
+      } ] }
+    },
+
+    crx: {
+      package: {
+        "src": "build/unpacked-prod/**/*",
+        "dest": "build/",
+      }
+    },
+
+    browserify: {
+      build: {
+        files: fileMaps.browserify,
+        options: { browserifyOptions: {
+          debug: true,  // for source maps
+        } }
+      }
+    },
+
+    uglify: {
+      min: { files: fileMaps.uglify }
+    },
+
+    watch: {
+      js: {
+        files: ['package.json', 'lint-options.json', 'Gruntfile.js', 'code/**/*.js',
+                'code/**/*.json', '!code/js/libs/*'],
+        tasks: ['test']
+      }
+    }
+
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-mkdir');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-browserify');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-crx');
+
+  //
+  // custom tasks
+  //
+
+  grunt.registerTask(
+    'manifest', 'Extend manifest.json with extra fields from package.json',
+    function() {
+      var fields = ['name', 'version', 'description'];
+      for (var i = 0; i < fields.length; i++) {
+        var field = fields[i];
+        mnf[field] = pkg[field];
+      }
+      grunt.file.write('build/unpacked-dev/manifest.json', JSON.stringify(mnf, null, 4) + '\n');
+      grunt.log.ok('manifest.json generated');
+    }
+  );
+
+  grunt.registerTask(
+    'circleci', 'Store built extension as CircleCI arfitact',
+    function() {
+      if (process.env.CIRCLE_ARTIFACTS) { grunt.task.run('copy:artifact'); }
+      else { grunt.log.ok('Not on CircleCI, skipped'); }
+    }
+  );
+
+  //
+  // testing-related tasks
+  //
+
+  grunt.registerTask('test', ['jshint']);
+  grunt.registerTask('test-cont', ['test', 'watch']);
+
+  //
+  // DEFAULT
+  //
+
+  grunt.registerTask('default', ['clean', 'test', 'mkdir:unpacked', 'copy:main', 'manifest',
+    'mkdir:js', 'browserify', 'copy:prod', 'uglify', 'crx', 'circleci']);
+
+};

README.md

@@ -3,6 +3,25 @@
 
 Check out the [introduction post](http://marcelpociot.com/blog/2016-03-21-laravel-testtools) about the chrome extension.
 
+## Installation
+
+```
+git clone git@github.com:mpociot/laravel-testtools.git
+
+# in case you don't have Grunt yet:
+sudo npm install -g grunt-cli
+```
+
+## Build instructions
+
+```
+cd laravel-testtools
+npm install
+grunt
+```
+
+When the grunt command is finished, you can use the `build/unpacked-dev/` folder to use as the developer version of the extension.
+
 ## License
 
-Laravel TestTools is free software distributed under the terms of the MIT license.
+Laravel TestTools is free software distributed under the terms of the MIT license.

src/devtools.html → code/html/devtools.html

@@ -2,6 +2,6 @@
   <head>
   </head>
   <body>
-    <script src="devtools.js"></script>
+    <script src="../js/devtools.js"></script>
   </body>
 </html>

src/panel.html → code/html/panel.html

@@ -1,6 +1,6 @@
 <html>
   <head>
-    <link rel="stylesheet" href="panel.css" />
+    <link rel="stylesheet" href="../css/panel.css" />
     <link rel="stylesheet" href="../vendor/css/darkula.css" />
   </head>
   <body>
@@ -67,10 +67,6 @@
 }
 </code>
     </div>
-    <script src="../vendor/js/vue.min.js"></script>
-    <script src="../vendor/js/jquery-2.2.1.min.js"></script>
-    <script src="../vendor/js/highlight.pack.js"></script>
-    <script src="../vendor/js/faker.js"></script>
-    <script src="panel.js"></script>
+    <script src="../js/panel.js"></script>
   </body>
 </html>

src/background.js → code/js/background.js

@@ -5,15 +5,15 @@ chrome.runtime.onConnect.addListener(function (port) {
     var extensionListener = function (message, sender, sendResponse) {
         // The original connection event doesn't include the tab ID of the
         // DevTools page, so we need to send it explicitly.
-        if (message.name == "init") {
+        if (message.name === "init") {
           connections[message.tabId] = port;
           return;
         }
 
         if (message.name === "postMessage") {
           chrome.tabs.sendRequest(message.tabId, message.object);
         }
-    }
+    };
 
     // Listen to messages sent from the DevTools page
     port.onMessage.addListener(extensionListener);
@@ -23,12 +23,12 @@ chrome.runtime.onConnect.addListener(function (port) {
         // Disconnect means -> Dev tools closed. Set recording to false.
         var tabs = Object.keys(connections);
         for (var i=0, len=tabs.length; i < len; i++) {
-          if (connections[tabs[i]] == port) {
-            chrome.tabs.sendRequest(tabs[i], {
+          if (connections[tabs[i]] === port) {
+            chrome.tabs.sendRequest(parseInt(tabs[i]), {
                 "method": "recording",
                 "value": false
             });
-            delete connections[tabs[i]]
+            delete connections[tabs[i]];
             break;
           }
         }
@@ -87,25 +87,25 @@ function fake(info, tab, type) {
 
 // Create menu items
 var parent = chrome.contextMenus.create({"title": "Laravel TestTools", "contexts":["all"]});
-var visitMenu = chrome.contextMenus.create({
+chrome.contextMenus.create({
   "title": "Visit URL",
   "parentId": parent,
   "contexts":["all"],
   "onclick": visit
 });
-var seePageIsMenu = chrome.contextMenus.create({
+chrome.contextMenus.create({
   "title": "See Page is...",
   "parentId": parent,
   "contexts":["all"],
   "onclick": seePageIs
 });
-var seeTextMenu = chrome.contextMenus.create({
+chrome.contextMenus.create({
   "title": "See text",
   "parentId": parent,
   "contexts":["selection"],
   "onclick": seeText
 });
-var pressMenu = chrome.contextMenus.create({
+chrome.contextMenus.create({
   "title": "Press",
   "parentId": parent,
   "contexts":["all"],