1. Introduction

1.1 Introduction

As web browsers have become such a common part of our daily lives, the ability to enhance them with extensions has provided a new landscape for customization and functionality. Many of the most prominent Software-as-a-Service (SaaS) companies now offer browser extensions to further utilize their software, such as Bitwarden for password management, Grammarly for spelling and grammar, and Evernote for note-taking. These extensions help bring external functionality closer, changing how we view and interact with websites.

The number of Chrome extensions available for download is always growing, with the Chrome Web Store containing over 100,000 individual extensions. In addition to this, it does not include the thousands of extensions that developers keep for their own personal use to solve niggling web issues or to make life easier that have not been officially uploaded to the store.

When beginning the process of building your own custom extension, it can become a little daunting for novice developers. Although the official documentation (link) provides insights into how extensions can be developed, the wider full-stack implementation is often missing, leaving developers wondering how to integrate an extension into a back-end.

This book is designed to bridge the gap for novice developers who have a basic understanding of JavaScript on both the client and server-side. Even if you are new to JavaScript development, each example in this book is described in great detail, allowing you to put the pieces together to create a complete full-stack extension. This book aims to provide you with the knowledge and skills to build custom Chrome extensions by:

  • Introducing you to the basic Chrome extension structure and required files.
  • Describing the core functionality available to Chrome extensions in a browser environment.
  • Describing how an API server and database can be set up and integrated into an extension.
  • Providing real-world examples of Chrome extension functionality interacting with the full technology stack.
  • Describing how API servers and databases can be deployed on cloud-based servers to interact with your custom extensions.

Before we dive into the development process in Chapter 2, in this chapter, Section 1.2 Tools and Technologies Used describes the technologies used in this book and the dividing lines between them. Section 1.3 Conventions describes the conventions used in this book to describe examples and how to identify where sample code can be found for a given example. As each extension described in this book depends on additional libraries, Section 1.4 Additional Libraries describes how these can be obtained. Section 1.5 Chapter Overview then lists each chapter along with a brief description of the content it covers. Finally, Section 1.6 Summary provides a summary of this chapter and shows an example of the takeaway tips added at the end of each chapter to summarize key points.

1.2 Tools and Technologies Used

Before we begin, the first step in the process is ensuring that we have a local development environment set up on our machine. The local environment can be broken into five components:

  • Google Chrome Browser - Throughout this book, once extensions have been developed, they are then loaded into a local Chrome browser. For this book, Chrome v143.0.7499.192 (Stable) was used. However, the latest stable version of Chrome is sufficient.
  • Editor - For this book, Visual Studio Code was used as the default development environment. This can be downloaded from the official website. (link) Visual Studio Code provides additional features to aid development, such as syntax highlighting and easy-to-navigate project folder structures. If you would rather use an alternative editor you are familiar with, that can be used instead.
  • Server-side Language - When we need to build a custom API server to interact with extensions, Node.js is used. This can be downloaded from the official Node.js website. (link) The latest version at the time of writing is v25.2.1. This version, or higher, can be used.
  • Server-side Library - As Node.js is quite low-level, we will use the Express.js v4.2 library as the core library to build our API servers with. When required, the installation process of Express.js is described in the given chapter.
  • Data Storage Solution - For storing data when long-term storage is required, MongoDB v8.2 is used as the default database due to the simplicity of storing and retrieving records. When required, the installation and setup of the database are described in the individual chapters.

1.3 Conventions

At the start of each chapter, a link to the GitHub repository is provided that correlates to the described example. Although it is possible to copy the code directly from the examples, it is suggested to download the complete example from the repository (link) to speed up your development and to ensure no small syntax errors creep into your projects. For each sample in the GitHub repository, a simple README.txt file is added, providing details about the folders in the example. At the beginning of each core example, a link to the folder containing the complete code listing can be seen in the following format:

Source: /ch1/sample1/

Where ch1 is the chapter name and sample1 is the name of the example in the folder. (link) In the latter parts of the book, each individual example will contain two folders. The first of these is the extension itself, and the second is the API server it uses. To aid development, at the start of each example, the files required are listed in the following format:

File Structure

  • /sample-extension/manifest.json
  • /sample-extension/background.js
  • /sample-extension/icon.png

Individual files are then each described with the file name as the header, as shown below for the file titled exampleFile.html:

File Name: exampleFile.html

In the cases where the file already exists in the project, but modifications are needed, the complete final code is shown for the file. At the end of each chapter, a box with the title Takeaway Tips can be seen. This provides a summary of the core elements to remember for future development.

1.4 Additional Libraries

When building an extension, we often require additional libraries to help us. In this book, two additional libraries are frequently used as part of the extension base code. These include Bootstrap (link), which is used for styling user interface components, and jQuery (link), which provides additional JavaScript helper functions. As pulling JavaScript from an external location is considered a security risk, when developing extensions, the libraries are downloaded and placed into the /lib/ folder of each extension.

To add the libraries to your extension, create a new folder inside the extension folder titled lib. Inside this folder, add the files as described below:

  • For jQuery, the JavaScript file jquery-3.7.1.js is downloaded from the official jQuery website (link) and renamed jquery.js. It is then placed in the extension's lib folder.
  • For Bootstrap, the bootstrap-5.3.8-dist.zip file was downloaded from the official website (link). Once downloaded, the zip file was first extracted. From the extracted folder, the bootstrap-bundle.js file was then copied from the js folder, then renamed bootstrap.js and placed into the lib folder of the extension. After this, the associated bootstrap.css file was copied from the /css folder and placed into the lib folder of the extension.

In Chapter 7, two additional libraries are used. These include jQueryUI (link) to add a visual date picker, and Chart.js (link) to draw JavaScript-based charts. To get these files, the following steps were performed:

  • For Chart.js v4.5.1, a single JavaScript file titled chart.js was downloaded from the Chart.js Content Delivery Network (CDN) (link) and placed into the lib folder of the extension.
  • For jQueryUI v1.14, The jquery-ui.min.js file was downloaded then renamed jqueryui.js and placed into the lib folder. The associated jquery-ui.min.css file was also downloaded and renamed jqueryui.css and then placed in the lib folder also.

When accessing the example extension code from the book's git repository (link), the lib folder has already been added to each example extension for convenience.

1.5 Chapter Overview

This book begins by introducing full-stack extension development and the functionality available to extensions through API servers. From chapter 5 onwards, each chapter is dedicated to the process of developing an extension for a particular use case. Each chapter in this book contains standalone examples, allowing you to jump to different chapters in the book to try out examples you like. To get the full experience from this book, it is, however, best to read the chapters in order as each chapter logically builds on the last. Below is a brief summary of the contents of each chapter.

  • Chapter 1: Introduction - This chapter begins by introducing the extension development process and tools required to get started.
  • Chapter 2: Getting Started - This chapter begins by introducing a basic Hello World extension that does not require any additional back-end. Once developed, the process of loading the extension into a Chrome browser is described. After this, the basic theory of extension development is then covered, along with the core concepts of extension development.
  • Chapter 3: Chrome Extension Functionality - After learning about the basic extension structure, this chapter outlines some of the basic functionality of a Chrome extension to perform tasks such as modifying the current page, button click events, removing HTML elements from web pages, and replacing words on a web page from an extension side panel.
  • Chapter 4: The Full-Stack - This chapter introduces the concept of full-stack extension development. First, a basic extension is developed, which is then used to connect to a custom API server. The development of the custom API server for this extension is then outlined. Once set up, a MongoDB database is then created and connected to the new API server, which in turn interacts with the extension.
  • Chapter 5: Saving Extension Data - This chapter describes different methods available to browser extensions when they need to save data. Saving data to the browser itself is first described, followed by the process of saving data to a local MongoDB database. To allow data to be imported and exported from an extension, the process of saving and retrieving data from text files is then described.
  • Chapter 6: Extension: Text Snippet Manager - This chapter describes the process of creating an extension, API server, and database that allow the user to save and retrieve text-based snippets from their browser.
  • Chapter 7: Extension: Time Tracking and Graphing - This chapter describes creating an extension that allows the user to log and track time records. Once data has been recorded, JavaScript charts are then used to plot the data to provide a quick summary of the data collected.
  • Chapter 8: Extension: Browser Activity Logger - This chapter describes the process of creating an extension that runs in the background of a user's browser to monitor activity. The user can then start and stop the monitoring process from the extension. When active, each URL visited by the user is logged to a custom side panel. This extension also utilises a default settings page available to Chrome extensions.
  • Chapter 9: Extension: Screen Capture Extension - This chapter describes the process of developing an extension that allows the user to record a video of the user's current browser tab. When the recording is finished, the file is downloaded to the user's machine. In addition to this, an additional page capture function is added that allows the user to capture the web page they are viewing and save it to a single file on their machine.
  • Chapter 10: Extension: User Authentication - This chapter describes the process of building an extension, API server, and database that allows the user to log in, view restricted content, and log out from the extension when finished.
  • Chapter 11: Extension: AI Integration - This chapter describes the process of creating an extension that allows a user to select a word on a webpage using the right-click context menu. Once selected, the word is sent to the ChatGPT API to explain the term. Once the description is returned, it is embedded into a text area on a browser side panel for the user to view.
  • Chapter 12: Security - This chapter describes the different approaches that can be taken to secure a developed extension. This chapter covers both client-side and server-side validation techniques and the process of password encryption and management. To secure API endpoints, the chapter then describes the process of creating and managing custom API keys for developed API servers.
  • Chapter 13: Packaging and Deployment - The last chapter in this book walks through the process of packaging and migrating an extension’s API server and database to a cloud-based hosting platform. Once the solution is set up, the chapter then walks through all the modifications that must be made to the original extension code to allow it to work in the new cloud environment.

1.6 Summary

In this chapter, we looked at the basic tools needed to get started developing custom Chrome extensions. The conventions used in this book were then described along with examples of the visual layouts used for chapter content. After this, the libraries used throughout this book were described along with the steps required to access them. Finally, this chapter provided a brief outline of each chapter in this book. In Chapter 2, next, we begin the journey of developing a Hello World extension and loading it into a Chrome browser.