Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
communitycreator

How to create a Chrome extension

Dario Vincenzo Tarantini

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

A Chrome extension is a sandboxed webapp that can interact with a website or can run alone.

In this shot, we are going to make a simple “hello world” extension.

How to make it

First, we need to create a manifest.json file that will store information about our extension. It should be placed in the root dir of our project. You can copy this simple example:

{
  "name": "Hello educative!",
  "description": "Our simple project",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "main.html",
    "default_icon": "icon.png"
  }
}

Here, we specified the name of the extension, the description, and an object called action. We also specify the default “page” that should be displayed when clicking on the icon and the icon itself. If we omit the default_icon, Chrome will use a default one (as shown below).

These strings are basically relative paths to the files.

Now we can add content to our main.html, as follows:

<!doctype html>
<html>
<head>
<title>Hello Educative!</title>
</head>
<body>
<h1>Hello Educative!</h1>
</body>
</html>

Let’s try everything!

Now, you just need to open Chrome, navigate to chrome://extensions, set Developer Mode and Load unpacked extension, and select our project root dir. That’s it.

Once we click, we will have something like this:

widget

More information can be found in the official documentation here.

RELATED TAGS

html
communitycreator

CONTRIBUTOR

Dario Vincenzo Tarantini

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring