Google Chrome Extensions Notes

  1. An extension is a zipped bundle of files---HTML, CSS, Javascript, images, and anything else you need.
  2. Extensions are basically web pages, and can use all APIs that the browser can, from XMLHttpRequest to JSON to HTML5
  3. Extensions can interact with pages or servers using content scripts or cross-origin XMLHttpRequests
  4. Extensions can also interact programatically with bookmarks, tabs, and other browser functionality
  5. Many Extensions add UI to Google Chrome in the form of:
    • browser actions
    • page actions
  6. Each extension can have at most one browser or page action
  7. Choose a browser action when the extension is relevant to most pages
  8. Choose a page action when the extension should be stative depending on page

Anatomy of an extension

  1. A manifest file
  2. One or more HTML files (unless the extension is a theme)
  3. Optional: One or more JavaScript files
  4. Optional: Any other files your extension needs---for example, image files

Referring to files

  1. relative url OR
  2. chrome-extension:///
  3. You can use @@extension_id predefined message to avoid hardcoding the ID during development


  1. Many extensions have a background page, an invisible page that holds the main logic of the extension.
  2. If extension needs to interact with user loaded web pages, then it must use a content script

Background page

  1. Background pages defined by background.html can include JavaScript code that controls the behavior of the extension, two types:
    • persistent background pages (always open)
    • event pages (open and closed as needed, better default option)
Google Chrome Extensions Notes
Share this