Custom chrome browser extension code | Add modify request headers | Good example for beginners

In this article we will create a simple custom chrome browser extension / plugin.

Chrome browser extension example

  • Show clickable icon on browser bar.
  • On click of icon show popup with checkbox to enable disable addition of header, a text area to provide all headers in JSON format & a save button.
  • On click of save button, store value in browser local storage.
  • After saving (if enable is checked), add/momdify the request headers from saved JSON in any website/url you visit.



Refer below sections for detailed explanation. To get source code directly go to GIT Repository

What chrome extension is made of

  • Manifest file
    • This is the first file that browser looks at to get information about extension.
    • This is a JSON file.
    • This file has information describing extension like name, version, java scripts to be used, permissions needed from browser etc.
  • Background script
    • This is a java script which executed on installation of extension, when chrome makes request & some other events. Rest of the time background script might stay dormant.
    • As a best practice, background javascript adds listeners to certain events, so that even if background script is dormant, events will trigger listener code.
  • User Interface
    • User interface includes HTML, images, scripts etc. for extension

Manifest file

  • Plugin info – Name, version & description provides information about the extension.
  • permissions – Permissions informs browser about the intentions of access that this extension needs. Some of the permissions are shown to user before installation when its published. Permissions also limit damage by hackers in case compromised.
    • storage – Requests access to save so that extension can save input header JSON.
    • webRequest, webRequestBlocking – Request access to web request & blocking API which will provide call back before request is sent. This way we can set request headers before request is sent.
    • <all_urls> – This is special keyword which request access to apply extension for all URLs. We can use url patterns in case we want to restrict use of extension for few URLs.
  • background – This section registers background script.
  • browser_action – This section registers user interface files.



Background script

This is the background script which will add listener for onBeforeSendHeaders event & then add or modify headers. Code comments provides documentation for logic.

  • chrome.storage.sync – This API provides storage  ability for extension so that user input data can be saved.
  • chrome.webRequest.onBeforeSendHeaders – This is a event which is fired before request is sent & when request headers are available. We can add or modify request headers using this event.



Extension user interface (UI)

This is the HTML which will be shown in a popup when user clicks on extension icon in browser bar. This HTML has checkbox to enable/disable header addition/modification, text area to provide headers JSON & a save button.

ui.js which is included in popup.html. When popup HTML is loaded, this JS will get earlier saved values of enable checkbox & header JSON & set them in checkbox & text area respectively. Then this will add a click listener for save button which will store value of checkbox & header JSON in chrome.storage.

Now we will have these files in a directory as given below.



Installing extension in chrome browser

Refer to these slides with screenshots about how to install our extension in chrome browser.

Here is how our extension look

 

Complete source code available at GIT Repository



Leave a Reply

Your email address will not be published.