build overhaul + basic structure

Gruntfile.js

@@ -15,8 +15,6 @@ module.exports = function (grunt) {
   // Time how long tasks take. Can help when optimizing build times
   require('time-grunt')(grunt);
 
-  grunt.loadNpmTasks('grunt-browserify');
-
   // Configurable paths
   var config = {
     app: 'app',
@@ -72,11 +70,11 @@ module.exports = function (grunt) {
         // change this to '0.0.0.0' to access the server from outside
         hostname: 'localhost'
       },
-      chrome: {
+      dev: {
         options: {
           open: false,
           base: [
-            '<%= config.app %>'
+            '<%= config.dist %>'
           ]
         }
       },
@@ -93,9 +91,7 @@ module.exports = function (grunt) {
 
     // Empties folders to start fresh
     clean: {
-      chrome: {
+      basic: {
-      },
-      dist: {
         files: [{
           dot: true,
           src: [
@@ -215,15 +211,21 @@ module.exports = function (grunt) {
     //     }
     //   }
     // },
-    // uglify: {
+    uglify: {
-    //   dist: {
+      dist: {
-    //     files: {
+        files: {
-    //       '<%= config.dist %>/scripts/scripts.js': [
+          '<%= config.dist %>/scripts/background.js': [
-    //         '<%= config.dist %>/scripts/scripts.js'
+            '<%= config.dist %>/scripts/background.js'
-    //       ]
+          ],
-    //     }
+          '<%= config.dist %>/scripts/contentscript.js': [
-    //   }
+            '<%= config.dist %>/scripts/contentscript.js'
-    // },
+          ],
+          '<%= config.dist %>/scripts/inpage.js': [
+            '<%= config.dist %>/scripts/inpage.js'
+          ],
+        }
+      }
+    },
     // concat: {
     //   dist: {}
     // },
@@ -231,7 +233,9 @@ module.exports = function (grunt) {
     browserify: {
       basic: {
         files: {
-          '<%= config.dist %>/scripts/web3.js': ['<%= config.app %>/scripts/web3.js'],
+          '<%= config.dist %>/scripts/background.js': ['<%= config.app %>/scripts/background.js'],
+          '<%= config.dist %>/scripts/contentscript.js': ['<%= config.app %>/scripts/contentscript.js'],
+          '<%= config.dist %>/scripts/inpage.js': ['<%= config.app %>/scripts/inpage.js'],
         },
       },
     },
@@ -251,26 +255,12 @@ module.exports = function (grunt) {
             'styles/{,*/}*.css',
             'styles/fonts/{,*/}*.*',
             '_locales/{,*/}*.json',
+            'manifest.json',
           ]
         }]
       }
     },
 
-    // Run some tasks in parallel to speed up build process
-    concurrent: {
-      chrome: [
-        'browserify',
-      ],
-      dist: [
-        'imagemin',
-        'svgmin',
-        'browserify',
-      ],
-      test: [
-        'browserify',
-      ]
-    },
-
     // Auto buildnumber, exclude dev files. smart builds that event pages
     chromeManifest: {
       dist: {
@@ -284,9 +274,9 @@ module.exports = function (grunt) {
             ]
           }
         },
-        src: '<%= config.app %>',
+        src: '<%= config.dist %>',
         dest: '<%= config.dist %>'
-      }
+      },
     },
 
     // Compres dist files to package
@@ -305,40 +295,57 @@ module.exports = function (grunt) {
           dest: ''
         }]
       }
-    }
+    },
+
+    // Run some tasks in parallel to speed up build process
+    concurrent: {
+      dev: [
+        'browserify',
+      ],
+      dist: [
+        'imagemin',
+        'svgmin',
+        'browserify',
+      ],
+      test: [
+        'browserify',
+      ]
+    },
+
+
   });
 
   grunt.registerTask('dev', function () {
     grunt.task.run([
-      'concurrent:chrome',
+      'clean',
-      'connect:chrome',
+      'concurrent:dev',
-      'build',
+      'connect:dev',
+      'copy',
+
       'watch',
     ]);
   });
 
   grunt.registerTask('test', [
-    'jshint',
+    // 'jshint',
+    'concurrent:test',
     'connect:test',
-    'mocha'
+    'copy',
+
+    'mocha',
   ]);
 
   grunt.registerTask('build', [
-    'clean:dist',
+    'clean',
-    'chromeManifest:dist',
-    'useminPrepare',
     'concurrent:dist',
-    'cssmin',
-    'concat',
     'uglify',
     'copy',
-    'usemin',
+    'chromeManifest:dist',
-    'compress'
+    'compress',
   ]);
 
   grunt.registerTask('default', [
-    'jshint',
     'test',
-    'build'
+    'build',
   ]);
 };

app/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "__MSG_appName__",
-  "version": "0.0.17",
+  "version": "0.0.49",
   "manifest_version": 2,
   "description": "__MSG_appDescription__",
   "icons": {
@@ -19,8 +19,7 @@
       "19": "images/icon-19.png",
       "38": "images/icon-38.png"
     },
-    "default_title": "metamask",
+    "default_title": "metamask"
-    "default_popup": "popup.html"
   },
   "content_scripts": [
     {
@@ -35,6 +34,9 @@
       "all_frames": false
     }
   ],
+  "permissions": [
+    "storage"
+  ],
   "web_accessible_resources": [
     "scripts/web3.js"
   ]

app/popup.html

@@ -1,25 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <!-- build:css styles/vendor.css -->
-    <!-- bower:css -->
-    <!-- endbower -->
-    <!-- endbuild -->
-    <!-- build:css styles/main.css -->
-    <link href="styles/main.css" rel="stylesheet">
-    <!-- endbuild -->
-  </head>
-  <body>
-    <h1>'Allo, 'Allo!</h1>
-
-    <!-- build:js scripts/vendor.js -->
-    <!-- bower:js -->
-    <!-- endbower -->
-    <!-- endbuild -->
-
-    <!-- build:js scripts/popup.js -->
-    <script src="scripts/popup.js"></script>
-    <!-- endbuild -->
-  </body>
-</html>

app/scripts/background.js

@@ -1,9 +1,41 @@
-'use strict';
+const web3 = require('web3')
 
-chrome.runtime.onInstalled.addListener(function (details) {
+const identitiesUrl = 'https://alpha.metamask.io/identities/'
-  console.log('previousVersion', details.previousVersion);
+const messagingChannelName = 'metamask'
-});
 
-chrome.browserAction.setBadgeText({text: '2'});
 
-console.log('\'Allo \'Allo! Event Page for Browser Action');
+// setup badge click handler
+chrome.browserAction.onClicked.addListener(function(activeTab) {
+  chrome.tabs.create({ url: identitiesUrl })
+})
+
+// setup page<->plugin messaging
+chrome.runtime.onConnect.addListener(function(port) {
+  console.assert(port.name == messagingChannelName)
+  port.onMessage.addListener(function(msg) {
+    console.log(msg)
+    port.postMessage({answer: 'Madame'})
+  })
+})
+
+// update badge text
+chrome.browserAction.setBadgeText({text: '2'})
+
+// listen to storage changes
+chrome.storage.onChanged.addListener(function(changes, namespace) {
+  for (key in changes) {
+    var storageChange = changes[key]
+    console.log('Storage key "%s" in namespace "%s" changed. ' +
+                'Old value was "%s", new value is "%s".',
+                key,
+                namespace,
+                storageChange.oldValue,
+                storageChange.newValue)
+  }
+})
+
+// Save it using the Chrome extension storage API.
+chrome.storage.sync.set({'zzz': 22}, function() {
+  // Notify that we saved.
+  console.log('Settings saved')
+})

app/scripts/contentscript.js

@@ -1,5 +1,16 @@
+const web3 = require('web3')
+
+// inject script tag
 var scriptTag = document.createElement('script')
 scriptTag.src = chrome.extension.getURL('scripts/web3.js')
-
 scriptTag.onload = function() { debugger; this.parentNode.removeChild(this) }
-;(document.head||document.documentElement).appendChild(scriptTag)
+var container = document.head || document.documentElement
+container.appendChild(scriptTag)
+
+// listen for messages
+var port = chrome.runtime.connect({name: 'metamask'})
+port.postMessage({joke: 'Knock knock'})
+port.onMessage.addListener(function(msg) {
+	console.log(msg)
+    // port.postMessage({answer: 'Madame'})
+})

app/scripts/inpage.js

@@ -0,0 +1,15 @@
+const web3 = require('web3')
+const MetamaskProvider = require('./lib/metamask-provider.js')
+
+const rpcUrl = 'https://rpc.metamask.io'
+
+
+var provider = new MetamaskProvider(forwardPayload, rpcUrl)
+web3.setProvider(provider)
+
+// injecting web3
+window.web3 = web3
+
+function forwardPayload(){
+  debugger
+}

app/scripts/popup.js

@@ -1,3 +0,0 @@
-'use strict';
-
-console.log('\'Allo \'Allo! Popup');

app/scripts/web3.js

@@ -1,14 +0,0 @@
-const web3 = require('web3')
-const MetamaskProvider = require('./metamask-provider.js')
-
-
-var provider = new MetamaskProvider(forwardPayload, 'https://rpc.metamask.io')
-web3.setProvider(provider)
-
-console.log('injecting web3....')
-window.web3 = web3
-
-
-function forwardPayload(){
-  debugger
-}