Browser Extension


Published on

AOL Test Browser Extension

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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 </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 </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> </li></ul>