How To Develop a Screen Recorder Chrome Extension

Have you ever wanted to capture and save what's happening on your Chrome browser? Chrome Extensions make this possible, and they're more accessible to build than you might think. At their core, they're programs built with familiar web technologies,  HTML, CSS, and JavaScript, the same stack used for web applications. But what gives them advantage over web applications is that extensions, unlike web applications have the control over:

1. The browser: Chrome provides Chrome extension APIs to make changes in the way your browser works.

2. The web: Extensions can control and modify the web by intercepting network requests, injecting scripts, and using web APIs to interact with web pages.

This makes them powerful tools that can provide a more personalized web experience by giving users greater control over how they browse and interact with the internet.

Before we dive into creating our screen recorder, let's understand the building blocks that make Chrome Extensions work. Every extension is built from similar core pieces: manifest files, scripts (both background and content), and UI elements - these components work together to add new features to the browser.

Building Blocks of Chrome Extensions

Chrome extensions are built from several core pieces: manifest files, scripts (both background and content), and UI elements - these building blocks work together to add new features to the browser.

1. Manifest file

The manifest file is the foundation of every Chrome extension. It's a JSON file that defines what your extension can do, what permissions it needs, and how different components connect. It specifies the version, name, permissions, and references to all scripts and resources your extension uses.

2. User Interface

The user interface includes elements like popup windows (shown when clicking the extension icon), options pages for settings, and badge notifications. These components let users interact with your extension and can communicate with service workers to trigger actions or display information.

3. Content Scripts

Content scripts run directly in web pages, letting them interact with page content. While they can read and modify the page's DOM, they have limited access to Chrome APIs for security. They work in isolation from the page's own scripts to prevent conflicts.

These scripts communicate through a message-passing system. Content scripts can send information about page events or user actions to the service worker(background scripts), while service workers can respond with data or instructions. For example, a content script might detect certain page content and notify the service worker, which then updates the extension's state.

4. Background Scripts

Service workers run in the background but aren't persistent - they wake up when needed and go dormant when idle. They handle core functionality like managing data, responding to browser events, and coordinating different parts of your extension. Service workers can access all Chrome APIs that your extension has permission for, making them powerful for tasks like monitoring tabs or handling data storage.

All these components connect through Chrome's messaging API. Service workers can find active tabs and send messages to specific content scripts, while content scripts can send messages back to the service worker. This system, along with shared storage, helps maintain the state and coordinate actions across the extension.

Creating a Screen Recorder Chrome Extension

In this guide, we are going to go step by step to better understand the building blocks of Chrome Extension by creating a screen recorder extension which

1.  Have the Start and Stop recording functionality

2. Can record a tab, window or the entire screen

3. Saves the Video in your computer after recording

File Structure for the Extension:

chrome-screen-recorder/
├── manifest.json            # Manifest file (configuration and permissions)
├── content/                 
│   └── content.js           # Content script for interacting with web pages
├── popup/                   
│   ├── popup.html           # HTML for the extension's popup UI
│   ├── popup.js             # JavaScript for handling popup interactions
│   └── styles.css           # CSS styling for the popup UI
├── background/              
│   └── background.js        # Background script(Runs in Background)
└── icons/                   
    ├── icon16.png           # 16x16 pixel icon (used in browser actions)
    ├── icon48.png           # 48x48 pixel icon (used in extensions page)
    └── icon128.png          # 128x128 pixel icon (used in Chrome Web Store)

Above is the file structure of the project, which consists of:

1. Manifest.json

{
    "manifest_version": 3,
    "name": "Chrome Tab Recorder",
    "version": "1.0",
    "description": "Record any tab in your browser and save the video for later use",
    "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
      },
    "permissions": [
      "tabs",
      "activeTab",
      "downloads",
      "scripting"
    ],
    "host_permissions": [
      "<all_urls>"
    ],
    "background": {
      "service_worker": "background/background.js"
    },
    "action": {
      "default_popup": "popup/popup.html",
      "default_icon": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
      }
    }
  }

The extension's manifest is the core configuration file, this file tells the Chrome browser how to handle and run the extension. Manifest.json unlike any other JSON file consists of key-value pairs.

1. manifest_version, name, version, description, icons - These are the minimal keys that are required by the extensions platform and the Chrome web store.

1. "manifest_version": 3 - Specifies the manifest version for the extension. 
2. "name": "Chrome Tab Recorder" - This is the extension's name as it appears in the Chrome Web Store and the Extensions settings page.
3. "version": "1.0" - Specifies the extension's version number, It's used to track updates and compatibility.
4. "description": "Record any tab in your browser and save the video for later use" - A short description that appears in the Chrome Web Store and settings page. It helps users understand the purpose of the extension.
5. "icons": {...} - Specifies the icons for the extension in different sizes: 16x16 - Used in the extensions toolbar. 48x48 - Used in the extensions manager page. 128x128 - Used in the Chrome Web Store. These icons provide a visual identity for the extension.

2. permissions - This key enables the use of particular extension APIs

1.  "tabs" – Allows the extension to access tab-related actions like creating, modifying, or retrieving tab info.
2.  "activeTab" – Grants temporary permissions to interact with the active tab (e.g., injecting scripts).
3. "downloads" – Enables the extension to manage downloads (saving files to the user's device).
4.   "Scripting" – Allows the injection of scripts into web pages for interaction and modification.

3. host_permissions - Defines which URLs the extension can interact with.

<all_urls> grants the extension access to all websites.

4. background - Specifies the background script, which runs in the background to handle tasks such as event listening and processing.

1. "service_worker": "background/background.js" - The background.js script listens for browser events like tab updates, and communicates with other parts of the extension.

5. action - Defines the extension's toolbar action when the extension icon is clicked.It includes the following properties:

1. "default_popup" – Specifies the popup HTML file (popup/popup.html) that appears when the extension icon is clicked.
2. "default_icon" – Specifies icons to be used in the toolbar in different sizes.

 2. popup folder

1. popup.html - Defines the structure and content of the popup window which appears when clicked on the extension icon. 

It contains HTML elements such as buttons, inputs, and other UI components that users interact with.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <button id="startBtn" class="btn">Start Recording</button>
    <button id="stopBtn" class="btn" disabled>Stop Recording</button>
  </div>
  <script src="popup.js"></script>
</body>
</html>

2. styles.css - For styling the popup UI

.container {
    width: 200px;
    padding: 16px;
  }
  
  .btn {
    width: 100%;
    margin: 8px 0;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    font-size: 14px;
  }
  
  .btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }
  
  .btn:hover:not(:disabled) {
    background-color: #45a049;
  }

3. popup.js - Script file to handle interactions within the popup, such as button clicks, form submissions, and communication with the background script or content scripts.

document.addEventListener('DOMContentLoaded', () => {
    const startBtn = document.getElementById('startBtn');
    const stopBtn = document.getElementById('stopBtn');
  
    startBtn.addEventListener('click', () => {
      chrome.runtime.sendMessage({ action: 'START_RECORDING' });
    });
  
    stopBtn.addEventListener('click', () => {
      chrome.runtime.sendMessage({ action: 'STOP_RECORDING' });
    });
  
    chrome.runtime.onMessage.addListener((message) => {
      if (message.action === 'RECORDING_STARTED') {
        startBtn.disabled = true;
        stopBtn.disabled = false;
      } else if (message.action === 'RECORDING_STOPPED') {
        startBtn.disabled = false;
        stopBtn.disabled = true;
      } else if (message.action === 'RECORDING_ERROR') {
        alert('Recording error: ' + message.error);
        startBtn.disabled = false;
        stopBtn.disabled = true;
      }
    });
  });

3. Content folder (Content Scripts)

The content scripts have the ability to modify or read web page content, inject JavaScript and CSS, track user actions like clicks and form submissions, and communicate with other parts of the extension to enhance functionality. While they can read and modify the page's DOM, they have limited access to Chrome APIs for security. They work in isolation from the page's own scripts to prevent conflicts.

These scripts communicate through a message-passing system. Content scripts can send information about page events or user actions to the service worker(background scripts), while service workers can respond with data or instructions.

content.js: Responsible for handling screen recording within the Chrome extension by using the MediaRecorder API.

let mediaRecorder = null;
let recordedChunks = [];
async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: false
    });
    
    mediaRecorder = new MediaRecorder(stream);
    recordedChunks = [];
    mediaRecorder.ondataavailable = (e) => {
      if (e.data.size > 0) recordedChunks.push(e.data);
    };
    mediaRecorder.onstop = () => {
      const blob = new Blob(recordedChunks, { type: 'video/mp4' });
      const url = URL.createObjectURL(blob);
      chrome.runtime.sendMessage({ 
        action: 'DOWNLOAD_RECORDING',
        url: url
      });
      stream.getTracks().forEach(track => track.stop());
    };
    mediaRecorder.start(1000);
    chrome.runtime.sendMessage({ action: 'RECORDING_STARTED' });
  } catch (err) {
    chrome.runtime.sendMessage({ 
      action: 'RECORDING_ERROR', 
      error: err.message 
    });
  }
}
function stopRecording() {
  if (mediaRecorder?.state === 'recording') {
    mediaRecorder.stop();
    chrome.runtime.sendMessage({ action: 'RECORDING_STOPPED' });
  }
}
chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'START_RECORDING') startRecording();
  if (message.action === 'STOP_RECORDING') stopRecording();
});

4. background folder (Background Script)

background.js - Responsible for managing the recording process, starting and stopping recordings, and handling the download of the recorded files. It communicates with the content script (content/content.js) to initiate and stop recording and allows for downloading the recorded media.

chrome.runtime.onMessage.addListener(async (message, sender) => {
    if (message.action === 'START_RECORDING') {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        files: ['content/content.js']
      });
      chrome.tabs.sendMessage(tab.id, { action: 'START_RECORDING' });
    }
    else if (message.action === 'STOP_RECORDING') {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      chrome.tabs.sendMessage(tab.id, { action: 'STOP_RECORDING' });
    }
    else if (message.action === 'DOWNLOAD_RECORDING') {
      chrome.downloads.download({
        url: message.url,
        filename: `recording-${Date.now()}.mp4`,
        saveAs: true
      });
    }
  });

The communication between the background script and content script in this Chrome extension happens using the chrome.runtime.sendMessage and chrome.runtime.onMessage.addListener methods.The background script sends the 'START_RECORDING' action to the active tab (content script).

1. The content script receives the message and starts the recording via startRecording.
2. While recording, the content script keeps track of the video chunks.
3. When the recording stops, the content script sends the recording URL to the background script for download.
4. The background script receives the URL and triggers the download.
5. Additionally, the content script sends status messages about whether the recording started, stopped, or encountered an error.

This communication between the background script and content script is crucial for managing the recording process and allowing interaction between the user interface (like a popup) and the content that’s being recorded on the active tab.

4. Icons folder

This folder contains the icons used by the extension in different places of the browser UI.                                             

1. Icon16.png: The 16x16 pixel icon, used in the browser's toolbar (next to the extension name) or in the browser action button.

2. Icon48.png: The 48x48 pixel icon, which is usually used in the Extensions page in Chrome (the extensions management page).

3. Icon128.png: The 128x128 pixel icon, used in the Chrome Web Store or other places that may require a larger icon for the extension.

Takeaway

Chrome Extensions are small programs made from the same building blocks(HTML, CSS & JavaScript) that are used to create web applications. They are built from several core pieces: manifest files, scripts (both background and content), and UI elements - these building blocks work together to add new features to the browser. In the above-given guide, we understood these building blocks through the code for the screen recorder extension.Put the code in the above-given project structure and follow these steps to add the screen recorder extension to your Chrome browser

1.  Go to chrome://extensions/ and turn the developer mode on

2. Click on the Load Unpacked and select the project folder

3. You’ll see the extension loaded and ready to be used

And that's it!!