A Beginners guide to Building Content Scripts

Browser extensions are add-ons to the browsers which are used to add aesthetics to the site and also provide optimal user experience.
The concept of content script in extension development is a quite useful knowledge to be acquired by developers alike as its significantly expanded the use cases of browser extensions.

This article aims to introduce what content scripts are and how they work. There would also be a demo project in which the basic of chrome extensions will be discussed and a simple content script will be used in our extension. With that, let's get started.

Understanding Content Scripts

First of all, what is a content script? Content scripts are JavaScript codes which on interaction with web pages via a browser extension, are executed to modify the webpage.

It easily achieves this by interacting with the webpage document object model. The web page document object model is the raw structure of the given web page. The manner by which the Chrome content scripts act to modify the web page in question is usually termed injection.

Having had a brief intro to content scripts, we would then go on to implement it on our web pages. But before then, we need to set up our browser extension which will power the script.

Setting Up Your Chrome Extension

Setting up a Chrome extension file is pretty straightforward. For further reference building extensions, attached below is the link to the Chrome extension documentation page.
An ideal Chrome extension must include a well-detailed manifest.json file which provides the default background information about the Chrome extension.
Also, the appropriate JS file to be executed is also included. Other additional files (HTML and CSS) help provide aesthetics to the extension.
With that, let's go on to build our extension, incorporating our content script injection. We will illustrate the power of content scripts by creating a Chrome extension which displays a button overlaying on any active web page we navigate to.

Writing a Manifest file

In this section, the parts of the manifest file will be highlighted and discussed. Here is the code to the manifest file for the project.

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": ["<all_urls>"],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

Manifest version: The manifest version is usually requested. By default, it's set to 3. as it is a significant better upgrade than the version 2.
Name: The name of the extension is also typed in the manifest file. In my case, the project is named Add button. That can be tweaked to suit the user's preference.
The Version of the Chrome extension is also inputted. In our case, this is the first version of the extension hence it's named 1.0, subsequent improvements on this extension can prompt modifying the file to increase the versions respectively.
Description: A description of what the extension does also gives credence to the Chrome extension to the non-technical users of the extension.

Subsequent points raised are quite cogent in building the content scripts.

The permissions object highlights the route for the execution of the content scripts. This also prevents the content scripts from running in unexpected tabs and web pages. It allows us to list all the permissions our Chrome extension might require. Some Chrome extensions may need access to the browser storage, other Chrome APIs and some sites in question. In our case for this project, we are limiting our Chrome extension to just the active browser tab being used. It's important to have this in place to reduce the risk of Chrome extension compromising other non-used parts of our Chrome browser.

We will then configure the content scripts field in our manifest file.
The content scripts field specifies the various code files we intend to inject into our web page.
It contains the matches sub field which specifies the webpage URL we want it to act upon. For ease of use, we just included all URLs allowing this to act on all web pages we access. You can however specify the URL you intend to inject in the subfield value. Eg www.google.com,

"matches": ["https://*.google.com/*"]
run_at": "document_idle

The JS files which contain the injection code are also specified. In our case,
Our JS file is named Content script.js. We also specified the CSS file used in styling this project.

With this, we have had a miniature implementation of the manifest file for our project. We will then go on to write our injection code in the subsequent section

Creating Content Scripts

In the spirit of keeping things simple, we would be creating a simple button that when clicked upon, shows an alert message. This button is expected to overlay the existing webpage.
Here is the code below

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

The styling can be changed to suit your preference however a styling template has been included in the code repository.

here is a picture of its implementation.

Here is the link to the source code containing the code styling.

Advanced Techniques and Use Cases

So far we have completed the project. However to advance one's knowledge, here are some of the advanced techniques and best practices you can also implement while building content scripts.

• Cross-interaction with browser background scripts
• Implementation of data state managers to allow for dynamic scripting
• Integrating other external APIs allows for data manipulation and analysis
• Employing caching strategies in order to optimize extension performance
• Integrating Content scripts with service workers

Conclusion

You can also interact with me on my blog and check out my other articles here. Till next time, keep on coding!