chandika94/oneclick_yeoman

git submodule init //this is to pull in the .pem file for signing
git submodule update
yeoman install //pull in all the browser extension javascript dependencies

Add the app directory as an unpacked chrome extension on the extension page

npm install //pull in the crx packaging dependencies

#Back Story

Its been over 6 months since I built and released OneClick, and in that time Google has changed the requirements for installing extensions. They've also had a team busy building Yeoman which looks like a great development/scaffolding tool. They have a generator for chrome apps, and I know there's a grunt plugin for building crx files, and I want to use all these things!

So I'm going to blog while I do the rewrite using these tools. Here it goes.

(Sun 4:52 PM)

created https://github.com/pwmckenna/oneclick_yeoman
found https://github.com/yeoman/generator-chromeapp#readme
ran yeoman init chromeapp

Please answer the following:
[?] What would you like to call this application? (OneClick) 
[?] How would you like to describe this application? (Download torrent content with the ease of a standard download.) 
[?] Would you like to use Storage in your app (Y/n) n
[?] Would you like to the experimental Identity API in your app (Y/n) n
[?] Would you like to use the Browser Tag in your app (Y/n) n
[?] Would you like to use the Camera in your app (n) n
[?] Would you like to use the Microphone in your app (n) n
[?] Would you like to use USB in your app (n) n
[?] Would you like to use Bluetooth in your app (n) n
[?] Would you like to use the Serial Port in your app (n) n
[?] Would you like to send UDP data in your app (n) n
[?] Would you like to receive UDP data in your app (n) n
[?] Would you like to use TCP in your app? (n) n
[?] Would you like to use the Media Gallery API in your app? (n) n
[?] Do you need to make any changes to the above before continuing? (y/N) 

   create    .editorconfig
   create    .gitattributes
   create    .jshintrc
   create    .npmignore
   create    app/.buildignore
   create    app/_locales/en/messages.json
   create    app/icon-128.png
   create    app/icon-16.png
   create    app/index.html
   create    app/main.js
   create    app/manifest.json
   create    app/styles/main.css
   create    Gruntfile.js
   create    test/index.html
   create    test/lib/chai.js
   create    test/lib/expect.js
   create    test/lib/mocha/mocha.css
   create    test/lib/mocha/mocha.js
   create    test/runner/mocha.js
identical    app/index.html
identical    app/manifest.json
identical    app/_locales/en/messages.json

Loaded the unpacked extension via the [chrome://chrome/extensions/](chrome extensions page)...made sure to select the app directory, not the root.
The permissions in the manifest were busted and showed a warning. Replaced the array with a single empty string with an empty array. Need to remember to submit a patch to the Yeoman ChromeApp Generator project.

K. I think I'm ready to roll porting everything over. I recently added support for Bower to both Btapp.js and Backbrace.js, so I'm going to attempt to take advantage of that when reassembling this extension.

(Sun 5:13 PM)

Looks like I'm in charge of dinner...I'll be back.

(Sun 6:32 PM)

Back in the game!

Lets add the btapp and backbrace libraries.

yeoman install btapp
yeoman install backbrace

These libraries and their dependencies are put into a components directory. Lets update manifest.json to add those as background scripts.

manifest.json

{
   //...
   "background": {
      "scripts": [
        "components/jquery/jquery.js",
        "components/underscore/underscore.js",
        "components/backbone/backbone.js",
        "components/jStorage/jstorage.js",
        "components/btapp/btapp.min.js",
        "components/backbrace/backbrace.js",
        "main.js"
      ]
   }
   //...
}

To test that we can still connect to the underlying Torque client, I updated main.js to the following.

main.js

jQuery(function() {
    var btapp = new Btapp();
    btapp.connect({
        mime_type: 'application/x-bittorrent-torquechrome'
    });
    btapp.on('all', _.bind(console.log, console));
});

No luck! We need to make this extension a npapi plugin, and provide the dll and plugin directory to load the native mime type handlers. Lets copy the following from the previous manifest.json over to the new one.

manifest.json

{
   //...
   "plugins": [
      // { "path": "plugin-linux.so" },
      { "path": "plugins/npTorqueChrome.dll" },
      { "path": "plugins/TorqueChrome.plugin" }
   ]
   //...
}

(Sun 10:21 PM)
After porting the javascript in the old application.js file to main.js, everything was up and running. I got a bit distracted trying to figure out how to build on top of bower dependencies, but I'll save that for a blog post, and potentially a Yeoman generator.

I added a component.json file so that I wouldn't need to include the component directories in the project, instead pulling them in by running yeoman install. The file looked like the following:

component.json

{
  "name": "OneClick",
  "version": "0.8.0",
  "dependencies": {
    "btapp": "latest",
    "backbrace": "latest"
  }
}

Next up is figuring out how to package the extension. I'm using https://github.com/oncletom/grunt-crx as a starting point.

To ensure we have the grunt-crx node modules, we need to create a package.json file with grunt-crx as a dependency. It looks like the following:

package.json

{
  "name": "OneClick",
  "version": "0.8.0",
  "description": "OneClick Chrome Extension for easy torrent content downloading.",
  "author": "Patrick Williams <patrick@bittorrent.com>",
  "dependencies": {
    "grunt-crx": "0.1.2"
  }
}

Got distracted with a few random patches to projects...but now jstorage is available via bower/yeoman and has a proper component.json file.

(Mon 2:32 AM)
Only a tiny bit left...just create a crx grunt task and call it a day. I have the pem file in its own repo located in the same parent directory as this project.

{
   //...
   grunt.loadNpmTasks('grunt-crx');
   //...
   grunt.initConfig({
      crx: {
         oneclick: {
           "src": "app/",
           "dest": "dist/",
           "privateKey": "../oneclick_pem/oneclick.pem",
           "baseURL": "http://torque.bittorrent.com/oneclick/",
           "exclude": [ 
             ".git", 
             ".svn", 
             "components/*/*/**"
           ],
           "filename": "OneClick.crx"
         }
       }
    }
    //...
 }

now running yeoman crx builds a signed crx file and drops it into a dist directory.

DONE!

chandika94 / oneclick_yeoman

About

Languages