Create a Simple Google Chrome Extension Within JDeveloper 11g

After having a quick look at the chrome extension tutorial I realized  all I really need to create extensions was to use basic web techologies like HTML, CSS, JavaScript etc. Finally a chance to use the JavaScript editor with JDeveloper 11g , so here are the steps to build a demo from a JDeveloper project and eventually load the  extension within Google Chrome itself.

Note: JDeveloper 11g provides a JavaScript debugger making it a good choice to develop JavaScript from and also provides JavaScript insight which makes it productive at the same time.

1. New empty project called "HelloApples"
2. Right click on the project and select "New -> Web Tier -> HTML - JSON File"
3. Name the file "manifest.json"
4. Add contents as follows

{
  "name": "Apples First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  }
}

5. Right click on the project and select "New -> Web Tier -> HTML -> HTML Page"
6. Name the page "popup.html" and replace the file contents as follows.

<style> 
body {
  min-width:357px;
  overflow-x:hidden;
}
</style>

<SCRIPT LANGUAGE="JavaScript">
var now = new Date();

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

function fourdigits(number) {
 return (number < 1000) ? number + 1900 : number;
        }
today =  days[now.getDay()] + ", " +
         months[now.getMonth()] + " " +
         date + ", " +
         (fourdigits(now.getYear())) ;

document.write("Hello apples todays date is " + today);
</script>

7. Add the icon.png to the project , the one we use here is from the google demo below.

  http://code.google.com/chrome/extensions/getstarted.html

8. Your project would look as follows within JDeveloper. You will see a WEB-INF folder which
is there due to the fact the project has previously been run in the integrated WLS to test the popup.html

9. In Google Chrome bring up the extensions management page by clicking the wrench icon on the right hand side and choosing "Tools > Extensions". (On Mac, use Window > Extensions.)
10. If Developer mode has a + by it, click the + to add developer information to the page.
11. Click the Load unpacked extension button. A file dialog appears.
12. In the file dialog, navigate to your extension's folder within your JDeveloper project
and click OK.

eg:

C:\jdev\jdevprod\11113\jdeveloper\jdev\mywork\ChromeExtensionDemo\HelloApples\public_html

If all went well you should see your extension in the Google Chrome toolbar and when clicked it should show you todays date.