Browser extension sample – Chrome/Edge – HttpRequestViewer

Browser Extensions

The Evolution of Browser Extensions: From Web Customization to Advanced Development Tools – Part 2
We discussed about The evolution of the Browser extensions in the previous post. Lets quick learn how to create a Chrome/Edge/Firefox extension. I have mentioned “Advanced development tools” in the title, but never got chance to explore those capabilities earlier. We will create a simple extension to explore the power of it.

Creating a browser extension has never been easier, thanks to the comprehensive documentation and support provided by browser vendors. Below, we’ll walk through the steps to create a simple extension for both Chrome and Microsoft Edge using Manifest V3. We will use this tool to print the list of HTTP requests that are fired in a given browser and list it in the page.

Basics of extensions:

Manifests – A manifest is a JSON file that contains metadata about a browser extension, such as its name, version, permissions, and the files it uses. It serves as the blueprint for the extension, informing the browser about the extension’s capabilities and how it should be loaded.

Key Components of a Manifest File:

Here are the key components typically found in a Manifest V3 file:

1. Manifest Version: There are different versions of the manifest file, with Manifest V3 being the latest and most widely adopted version. Manifest V3 introduces several changes aimed at improving security, privacy, and performance with lot of controversies around it. Read more about the controversies at Ghostery.
2. Name and Version: These fields define the name and version of the extension. Choose a unique name and version. An excellent guide of version semantics is available here.
3. Description: A short description of the extension’s functionality.
4. Action: Defines the default popup and icon for the browser action (e.g., toolbar button).
5. Background: Specifies the background script that runs in the background and can handle events like network requests and alarms.
6. Content Scripts: Defines scripts and stylesheets to be injected into matching web pages.
7. Permissions: Lists the permissions the extension needs to operate, such as access to tabs, storage, and specific websites.
8. Icons: Specifies the icons for the extension in different sizes. For this post I created a simple icon using Microsoft Designer. I gave a simple prompt with the description above and I got the below image. Extension requires different sizes for showing it in different places. I used Chrome Extension Icon Generator and generated different sizes as needed.

     

9. Web Accessible Resources: Defines which resources can be accessed by web pages.

Create a project structure as follows:

HttpRequestViewer/
|-- manifest.json
|-- popup.html
|-- popup.js
|-- background.js
|-- history.html
|-- history.js
|-- popup.css
|-- styles.css
|-- icons/
    |-- icon.png
    |-- icon16.png
    |-- icon32.png
    |-- icon48.png
    |-- icon128.png

Manifest.json

{
  "name": "API Request Recorder",
  "description": "Extension to record all the HTTP request from a webpage.",
  "version": "0.0.1",
  "manifest_version": 3,
  "host_permissions": [""],
  "permissions": ["activeTab", "webRequest", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  },
  "web_accessible_resources": [{ "resources": ["images/*.png"], "matches": ["https://*/*"] }]
}

popup.html
We have two options with the extension.

1. A button with record option to start recording all the HTTP requests
2. Link to view the history of HTTP Requests recorded

<!DOCTYPE html>
<html>
  <head>
    <title>API Request Recorder</title>

    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div class="heading">
      <img class="logo" src="icons/icon48.png" />
      <h1>API Request Recorder</h1>
    </div>
    <button id="startStopRecord">Record</button>

    <div class="button-group">
      <a href="#" id="history">View Requests</a>
    </div>

    <script src="popup.js"></script>
  </body>
</html>

popup.js
Two event listeners are registered for recording (with start / stop) and viewing history.
First event is used to send a message to the background.js, while the second one instructs chrome to open the history page in new tab.

document.getElementById("startStopRecord").addEventListener("click", () => {
  chrome.runtime.sendMessage({ action: "startStopRecord" });
});

document.getElementById("history").addEventListener("click", () => {
  chrome.tabs.create({ url: chrome.runtime.getURL("/history.html") });
});

history.html

 
<!DOCTYPE html>
<html>
  <head>
    <title>History</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>History Page</h1>
    <table>
      <thead>
        <tr>
		  <th>Method</th>
          <th>URL</th>
          <th>Body</th>
        </tr>
      </thead>
      <tbody id="recorded-data-body">
        <!-- Data will be populated here -->
      </tbody>
    </table>
    <script src="history.js"></script>
  </body>
</html>

history.js
Requests background.js to “getRecordedData” and renders the result in the html format.

document.addEventListener("DOMContentLoaded", () => {
  chrome.runtime.sendMessage({ action: "getRecordedData" }, (response) => {
    const tableBody = document.getElementById("recorded-data-body");
    response.forEach((record) => {
      const row = document.createElement("tr");
      const urlCell = document.createElement("td");
      const methodCell = document.createElement("td");
      const bodyCell = document.createElement("td");

      urlCell.textContent = record.url;
      methodCell.textContent = record.method;
      bodyCell.textContent = record.body;

      row.appendChild(methodCell);
      row.appendChild(urlCell);
      row.appendChild(bodyCell);
      tableBody.appendChild(row);
    });
  });
});

background.js
Background JS works as a service worker for this extension, listening and handling events.
The background script does not have access to directly manipulate the user page content, but can post results back for the popup/history script to handle the cosmetic changes.

let isRecording = false;
let recordedDataList = [];

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Obtined message: ", message);
  if (message.action === "startStopRecord") {
    if (isRecording) {
      isRecording = false;
      console.log("Recording stopped...");
      sendResponse({ recorder: { status: "stopped" } });
    } else {
      isRecording = true;
      console.log("Recording started...");
      sendResponse({ recorder: { status: "started" } });
    }
  } else if (message.action === "getRecordedData") {
    sendResponse(recordedDataList);
  } else {
    console.log("Unhandled action ...");
  }
});

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    if (isRecording) {
      let requestBody = "";
      if (details.requestBody) {
        if (details.requestBody.formData) {
          requestBody = JSON.stringify(details.requestBody.formData);
        } else if (details.requestBody.raw) {
          requestBody = new TextDecoder().decode(new Uint8Array(details.requestBody.raw[0].bytes));
        }
      }
      recordedDataList.push({
        url: details.url,
        method: details.method,
        body: requestBody,
      });
      console.log("Recorded Request:", {
        url: details.url,
        method: details.method,
        body: requestBody,
      });
    }
  },
  { urls: [""] },
  ["requestBody"]
);

Lets load the Extension

All set, now lets load the extension and test it.

  • Open Chrome/Edge and go to chrome://extensions/ or edge://extensions/ based on your browser.
  • Enable “Developer mode” using the toggle in the top right corner.
  • Click “Load unpacked” and select the directory of your extension.

Load extensionupload extension

  • Your extension should now be loaded, and you can interact with it using the popup.
  • When you click the “Record” button, it will start logging API requests to the console.

  • Click the “Record” button again and hit the “View requests” link in the popup to view the history of APIs.

I have a sample page (https://itechgenie.com/demos/apitesting/index.html) with 4 API calls, which also loads images based on the API responses. You could see all the API requests that is fired from the page including the JS, CSS, Images and API calls.


Now its up to the developers imagination to build the extension to handle these APIs request and response data and give different experience.

Code is available in GitHub at HttpRequestViewer

The Evolution of Browser Extensions: From Web Customization to Advanced Development Tools

Browser Extensions

It’s been a while that I published a post. A week before, I created a new Chrome extension and shared with my team and noticed the new developers didn’t have knowledge on how powerful the browser extensions can be. It pushed me to write a short post about the history and power of browser extensions.

A Brief History

Browser extensions have dramatically transformed how users interact with the internet, offering a plethora of customization options and functionalities that enhance productivity, security, streamline workflows and user experience. These small software modules, integrated into web browsers like Chrome, Edge, Firefox etc., enable users and developers to tailor their browsing experience, automate tasks, and access additional features not available in standard browser installations. The evolution of browser extensions has marked a significant milestone in web development, fostering a community of developers who continuously innovate and simplify complex tasks.

The Early Days

Browser extensions trace their origins back to the early days of web browsers. The first notable implementation was by Internet Explorer in the late 1990s, which allowed for basic plugins to extend browser capabilities. Early days of these extensions allowed developers to add custom menu bars(also known as Browser Bands and Communication Bands), context menu options for seamless integration with extensions. CricInfo cricket score ticker was a popular toolbar that I have used in the early days. Internet download manager extension is one another toolbar which allowed the download of audios and videos, changed the life of lot of Dial-up connection users.

The Rise of Firefox

However, it was Mozilla Firefox that popularized the concept of extensions by providing a dedicated platform for the developers to create and submit the add-ons. Themes and skins are a fun part of extensions world. Greasemonkey,one of the early add-ons, allowed users to write custom code on top of extensions was a boon for customization. I used my first AdBlocker script from UserScripts.org installed using Greasemonkey. This Add-on allowed me to create customize my own scripts without taking the hassle of publishing. Firefox’s various components like Add-ons, Extensions, and Plugins (Flash, Java, SilverLight, etc.) eventually evolved into standardized extensions.

The Chrome Era

Then came the days of Chrome. Google Chrome, introduced in 2008, revolutionized the extension landscape by offering streamlined APIs and a dedicated web store for its extensions. This facilitated easier development and distribution of extensions, leading to a surge in their popularity. The Chrome Web Store, launched in 2010, became a central hub for users to discover and install extensions, further solidifying their importance in the web ecosystem.

Extensions like Web Developer and React Developer Tools provide essential utilities for debugging, testing, and optimizing web applications. By leveraging browser APIs, developers can create tools that integrate seamlessly into their development environment, automating repetitive tasks and offering real-time insights into application performance.

Essential Extensions for Users

Some of the most used extensions include:
AdBlock / AdBlock Plus / uBlock Origin: Blocks ads on websites, improving load times and reducing clutter.
Microsoft Editor / Grammarly: Enhances writing by checking grammar, spelling, and style.
Honey: Automatically finds and applies coupon codes at checkout.
Bitwarden / LastPass: A password manager that stores and auto-fills passwords securely.
Momentum: Replaces the new tab page with a personal dashboard featuring a to-do list, weather, and inspirational quotes.
Dark Reader: Applies a dark theme to websites, reducing eye strain.

Must-Have Extensions for Developers

From a developer’s perspective, extensions are a boon. Some popular developer-friendly extensions are:
TamperMonkey – Modify website layouts, add/remove features, or automate actions – Alternative to Greasemonkey supporting userscripts.
React Developer Tools / Vue.js / – Provides debugging and inspection tools for React and Vue.js applications.
Redux DevTools – Allows developers to inspect every state and action payload for Redux applications.
Postman – A powerful tool for testing APIs by making HTTP requests.
JSON Viewer – Formats JSON data to make it more readable.
XPath Helper – Helps to find XPath expressions for elements on a webpage.
ColorZilla – Advanced color picker and gradient generator.
WhatFont – Identifies fonts used on a webpage.

We will see how to create a simple browser extension in the next post –Browser extension sample – Chrome/Edge – HttpRequestViewer