Browser Extension

574 views

Published on

AOL Test Browser Extension

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
574
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Browser Extension

  1. 1. Sylvia Isidore
  2. 2. Requirements <ul><li>Build a browser extensions called “AOL Test” in either Google Chrome, Firefox or Internet Explorer.  </li></ul><ul><li>The extension should appear as a toolbar on Firefox or Internet Explorer or if using Google Chrome, it should appear as a drop down.  </li></ul><ul><li>In all cases it should contain two buttons and a text area. </li></ul><ul><ul><li>  The first button should be called “test1” and show a caption of “Test #1 - Home”.  Clicking the button will navigate the current tab to aol.com </li></ul></ul><ul><ul><li>The second button should be called “test2” and show a caption of “Test #2-Search”.Clicking the button will open a new tab and navigate that to search.aol.com/aol/webhome </li></ul></ul><ul><ul><li>The text area should be called “divs” and will dynamically display the count of HTML “div” tags on the page currently displayed in the browser once the page is loaded.  The count should appear as “X divs found”  where X is the count of divs on the page. </li></ul></ul>
  3. 3. Browser used: <ul><li>The browser selected to build the extension is </li></ul><ul><li>Google Chrome. </li></ul>
  4. 4. Google Chrome Extension <ul><li>Google Chrome Extension: </li></ul><ul><li>Google Chrome Extensions are small bits of programs </li></ul><ul><li>that add functionality to the current browser. </li></ul><ul><li>Google Chrome Extension installs without a browser restart. </li></ul><ul><li>Extensions are built using web technologies like HTML, CSS, JavaScript </li></ul>
  5. 5. Structure AOL Test Extension <ul><li>Compressed directory containing: </li></ul><ul><li>1) Manifest.json: Contains JSON formatted data. All Chrome extensions should contain atleast one manifest.json file. It contains meta data that describes the permissions and points to other components. The other components give the Extension the functionality. </li></ul><ul><li>2)Browser Action: popup.html </li></ul><ul><ul><li>UI shown when the AOL Extension icon is clicked. </li></ul></ul><ul><li>3)Content Script: textarea_content.js </li></ul><ul><li>Code injected inside the page. </li></ul>
  6. 6. Chrome API’s used: <ul><li>chrome.tabs.* </li></ul><ul><li>chrome.extension.* </li></ul>
  7. 7. Load the extension: <ul><ul><li>Open Chrome Browser </li></ul></ul><ul><ul><li>Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions . </li></ul></ul><ul><ul><li>If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear. </li></ul></ul><ul><ul><li>Click the Load unpacked extension button. A file dialog appears. </li></ul></ul><ul><ul><li>In the file dialog, navigate to your extension's folder and click OK . </li></ul></ul>
  8. 8. AOL test extension <ul><li>If the extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page, as the following screenshot shows: </li></ul>
  9. 9. Demo - ScreenShot <ul><li>The drop down appear when the AOL Extension Icon is clicked </li></ul>
  10. 10. References: <ul><li>http://code.google.com/chrome/extensions/index.html </li></ul>

×