How to build a Chrome extension, Part 1: Loading a form in a popup window
Step 1: Get your URL ready
- 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
Step 2: Create a manifest.json file
- 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/" ] }
Step 3: Create images
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
- Type
chrome://extensions
in browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox: and select Extensions under the Tools menu to get to the same place). - Make sure that the Developer mode checkbox in the top right-hand corner is checked.
- Click Load unpacked extension… to pop up a file-selection dialog.
- 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