Chrome Extension Basics - sahajss/knowledge_base GitHub Wiki

For our senior research project, Juliana and I are creating a Google Chrome extension that takes user inputted text, compares it to previously inputted text searching for overused words, and if need be, fetches data from a Thesaurus API to suggest synonyms to the user.

When beginning our project, we had to familiarize ourselves with the developer-side of Google Chrome extensions. First, each extension must be uploaded in the form of a zipped file containing at a manifest json file, one or more html files, one or more JavaScript files (optional) and anything else your extension may need such as image files.

The purpose of the manifest file is to set up and declare the properties of your extension. In this file, you include information such as extension's name, description, version number, and permissions. You also may declare a browser action within this file. The browser action creates the icon that shows up to the right of your search bar and sets up the code that will do the bulk of the work in the extension. In the example below, the manifest.json points to a popup.html file.

The popup.html controls what will be displayed when the icon for the extension is clicked on however the any actions within the popup will take place in the popup.js file.

Background pages are a useful tool in the architecture of extensions. A bacground page is an invisible html file, likely containing JavaScript code, that sets up the structure and behavior of the extension.

In order to get your extension to do something worthwhile, it probably needs to interact with webpages in some way. To do this, a content script is needed. A content script is JavaScript code that executes some function within the context of a webpage, they are able to read information from the page and make changes to the page.

The following is an example manifest.json file taken from the Chrome Extension developer site.