How to build Chrome Extension with TypeScript

Chrome is the trendiest as well as one of the best browsers for working. The debugging tools are outstanding and you can put much other functionality through extensions. These small-size programs other developers manage and write can create a difference in how you get work done. However, there is a possibility you will not find an extension that does precisely what you need it to.

The great news is that you can make your tool and it’s not essential for you to learn anything special. If you know how to write TypeScript so you can easily develop your Chrome extension. You can learn how exactly you can do that in this short tutorial. We are also going to cover building the extension, and some background, as well as learn how to utilize it in Chrome.

What are Chrome extensions?

For more knowledge about browser extensions, you can look at Google Chrome. A Chrome extension is a structure that is built up of different modules (or components), where each module offers different interaction types with the user and browser. Examples of modules contain an options page, background scripts, content scripts, as well as UI elements.

What’s TypeScript?

TypeScript is an object-oriented and open-source programming language that is maintained and designed by Microsoft. It’s a superset of JavaScript and it is also including optional typing. Also, it can compile plain JavaScript. Briefly, TypeScript is a statically compiled programming language for writing concise as well as clear JavaScript code. 

It’s fulfilling a similar purpose as JavaScript and can be utilized for both client-side as well as server-side applications. Additionally, the libraries of JavaScript are also well-suited to TypeScript.

Both static and dynamic typing is supported by the TypeScript programming language. It also offers visibility scopes, classes, namespaces, inheritance, unions, interfaces, and many other attributes. Also, it provides variables, statements comments, expressions, modules, as well as functions.

Why TypeScript?

For beginners, TypeScript is a superset of JavaScript which means it extends JavaScript. Therefore, it solves some issues that JavaScript cannot do.

Several JavaScript apps are the build-up of hundreds or thousands of files. A single modification to one individual file can impact the behavior of other files, like throwing a pebble into a pond as well as causing ripples to spread out to the bank but It does not indicate that the TypeScript must be utilized only for huge applications. If you like to code type securely then this is a great way to go.

TypeScript executes its targets in three ways:

• Advanced type system

• Support for modern JavaScript features

• Developer tooling support

With the support of TypeScript, your application can instantly be type-safe, easy to design, simple to debug, object-oriented, and well structured.

Designing a Chrome extension

Before the execution, let’s introduce our Chrome extension: the SEO validator extension. This extension investigates websites to identify common technical problems in the execution of SEO metadata and the structure of a site.

Our extension will run a set of pre-defined checks over the current page DOM as well as disclose any identified issues. The initial step toward developing our extension is to make a React application. 

Building a React application with Create React App (CRA)

Making a React application with TypeScript support is simple using CRA.

npx create-react-app chrome-react-seo-extension --template typescript

Now with our skeleton application up as well as running, we can convert it into an extension.

Transforming the React app into a Chrome extension

It is not essential to adjust the application code just because a Chrome extension is a web application. Although, it is important to ensure that Chrome can load our application.

Extension configuration

All the configurations for the extensions form the manifest.js file, which is presently living in our public folder.

This file is created automatically by CRA. Although to be valid for an extension, it must obey the extension instructions. There are currently two versions of manifest files supported by Chrome v3 and v2, but in this tutorial, we’ll use only v3.

Firstly we have to update the file public/manifest.json with the following code:

{

"name": "Chrome React SEO Extension",

"description": "The supremacy of TypeScript and React for making interactive Chrome extensions",

"version": "1.0",

"manifest_version": 3,

"action": {

"default_popup": "index.html",

"default_title": "Open the popup"

   },

"icons": {

"16": "logo192.png",

"48": "logo192.png",

"128": "logo192.png"

   }

}

Next, let’s discuss each field:

version: Latest version of the extension

description: explanation of the extension

name: the extension name

manifest_version: version for the manifest format we want to utilize in our project

Action: actions offer you to customize the buttons that display on the Chrome toolbar, which normally trigger a pop-up with the extension UI. In our scenario, we describe that we want our button to start a pop-up with the contents of our index.html, which can host our application

Icons: It is the bunch of extension icons

Developing your application

To make a React application you have to run simply:

npm run build

This command can call to react-scripts for the development of our application, producing the output in the build folder. But what just is happening there?

When we use React for our app development so it creates a series of files for us. 

Loading the extension into your browser

Now we are ready to load the extension into Chrome. This procedure is relatively simple. Firstly you have to visit chrome://extensions/ on your Chrome browser as well as make enable the developer mode toggle:

After this, you have to click Load unpacked and choose your build folder. After that, your extension will be loaded as well as listed on the extensions page. Additionally, a new button should display on your extensions toolbar and if you click on it then you will notice the React demo application as a pop-up.

Making the pop-up

The major entry point is the action icon for our extension because when we pressed it so at that time it launches a pop-up that contains index.html.

In our latest execution, I see two major issues: the pop-up is too small in size, as well as it’s rendering the React demo page.

The initial step is to resize the pop-up into a larger size so it can include the information we want to show to the user. It is essential to do is modify the height and width of the body element.

Open the file index.css which is generated by React and modify the body element to contain width and height.

body {

 width: 600px;

 height: 400px;

 ...

}

Now you have to return to Chrome and you will not observe any kind of variation here because our extension only works with the compiled code, It simply means that to see any modification in the extension itself, we will have to rebuild the code. 

This is a significant downside. You can usually run extensions as web applications and only run them as extensions for testing if you want to do your work minimize.

Chrome will observe the modifications automatically as well as refresh the extension for you after rebuilding the code. 

If you have any problems and your modifications are not applying so you can review the Chrome extensions page for any bugs on your extension or manually force a reload.

Designing the UI

Developing the UI happens completely on the React application using the functions, components, as well as styles you know, and we will not focus on making the screen itself.

Now we will directly discuss our App.tsx with our updated code:

import React from 'react';

import './App.css';

function App() {

 return (

<div className="App">

<h1>SEO Extension built with React!</h1>

<ulclassName="SEOForm">

<li className="SEOValidation">

<div className="SEOValidationField">

<span className="SEOValidationFieldTitle">Title</span>

<span className="SEOValidationFieldStatus Error">

90 Characters

</span>

</div>

<div className="SEOVAlidationFieldValue">

           The title of the page

</div>

</li>

<li className="SEOValidation">

<div className="SEOValidationField">

<span className="SEOValidationFieldTitle">Main Heading</span>

<span className="SEOValidationFieldStatus Ok">

1

</span>

</div>

<div className="SEOVAlidationFieldValue">

The main headline of the page (H1)

</div>

</li>

</ul>

</div>

 );

}

export default App;

Now the Chrome React Extension Pops up with Heading and White Background and It appears better, but it’s not quite there yet. We hardcoded the title of the page in the component code, the major heading, as well as the validations.

As seen, our extension works very well in isolation like a pure react application. But if we want to interact with the page that the user is seeking so we need to make the extension interact with the browser.

Setting up the project

Interacting with the message passing API for our need requires three things:

• Permissions

• Access to the Chrome API

• Content scripts

The Chrome API is approachable through the chrome object globally accessible in our React app. For instance, we could directly utilize it to query information about the browser tabs throughout the API call

chrome.tabs.query.

Trying this thing can enhance type bugs in our project, just because our project doesn’t know anything about this chrome object. So, First of all, we will have to install the proper types:

npm install @types/chrome --save-dev

After then we have to inform Chrome about the permissions needed by the extension. We can do that in the manifest file throughout the permissions property and because our extension only requires access to the current tab, the only one permission is essential: activeTab.

Please update your manifest to contain the latest permissions key:

"permissions": [

"activeTab"

],

Finally, we need to make the content script to gather all the information website is needed.

Conclusion

A Chrome extension can be designed with any front-end framework. The major element is to bring the make the result along with the necessary file and make sure you link in the manifest.json the index generated. React works well, not only because it creates for you the entry point as an easy HTML file which is the format needed by Chrome's extension. 

TypeScript is not a difficulty because the file generated by the build is JavaScript, therefore is no difference. TypeScript and React may be the best combination. With the ability to develop the extension outside Chrome's extension you can gain velocity and have a product quickly in a form that can be utilized by your user.

If you're interested in developing Chrome extensions, we urge you to check out this Groovy web development article basics of extension development, you can get started building your own extensions. If you are interested in chrome browser extension development, please contact  to and schedule a consultation with the Groovy Web.

Author Bio:

Bhagavati is a skilled SEO and Content specialist who has worked on many marketing projects. He is passionate about helping others understand the nuances of digital marketing, discover new opportunities in SEO, and build connections in this industry. When not working, you can find him with his adorable dog or with his friends.