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 servers and databases 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. Section 1.4 Chapter Overview then lists each chapter along with a brief description of the content it covers. Finally, Section 1.5 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 four components:

  • 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 v22.14.0. This version, or higher, can be used.
  • Server-side Library - As Node.js is quite low-level, we will use the Express.js 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 is used as the default database due to the simplicity in 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 book's website (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 code. 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 sample in the sample code. (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, each example contains both complete projects, not just the required changes to files. 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
  • /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 very quick outline of the core things to remember for future development. An example of this can be seen below:

1.4 Chapter Overview

This section provides a brief outline of each chapter in this book.

  • 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. The process of loading this extension into a Chrome browser is then described. A brief outline of the basic theory of extension development is then described, along with the core concepts.
  • 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. Here, a basic extension is first described, which is used to connect to a custom API server. The API server that interacts with this extension is then described. 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 logged times.
  • Chapter 8: Extension: Browser Activity Monitor - This chapter describes the process of creating an extension that runs in the background of a user's browser. The user can then start and stop the monitoring process. When active, each URL visited to 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 an extension.
  • 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, and then send the word to the ChatGPT API service to explain the term. When the description is returned, it is embedded into a text area on a 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 client-side and server-side validation techniques, and the process of password encryption and management. The chapter then covers the process of creating and managing custom API keys for your developed API servers.
  • Chapter 13: Extension Packaging and Deployment - The last chapter in this book describes the deployment process for an extension and associated API server and database to a cloud-based hosting environment. Once set up, the chapter walks through all the modifications that must be made to the original code to allow it to work in the new environment.

1.5 Summary

In this chapter, we looked at the basic tools needed to get started developing custom Chrome extensions. After this, we reviewed the conventions used in this book and provided a brief description of each chapter. In Chapter 2: Getting Started, next, we begin the journey of developing Chrome extensions by describing the process of creating a Hello World extension and loading it into a Chrome browser.