How to build a Chrome extension, Part 1: Loading a form in a popup window

  • make sure that you’ll be able to prove ownership of the site that hosts your web app.
  • bookmark this page: https://chrome.google.com/webstore/developer/dashboard
  • create a new directory on your local computer, create a text file named manifest.json and copy the following code into it, changing the italicized text to reflect your app feature.
  • {
      "manifest_version": 2,
      "name": "Your App Name",
      "description": "This extension displays a form for an realtor to import MLS data, analyze the data imported, and return a PDF form for download.",
      "version": "1.0",
    
      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Your App Title"
      },
      "permissions": [
        "activeTab",
        "https://ajax.googleapis.com/"
      ]
    }
    

Your app requires icon 128px x 128px and tiny icon of 19px x 19px

Step 4: Get the popup.js file

Download the initial popup.js file here

Step 5: Load the Extension for testing and packing

  1. Type chrome://extensions in browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox: The menu's icon is three horizontal bars. and select Extensions under the Tools menu to get to the same place).
  2. Make sure that the Developer mode checkbox in the top right-hand corner is checked.
  3. Click Load unpacked extension… to pop up a file-selection dialog.
  4. Navigate to the directory in which your extension files live, and select it.

This is just a basic how to start to build a Chrome Extension. If you need more powerful API to build complex extension, please visit this page https://developer.chrome.com/extensions/api_index