DEV Community

Cover image for How to create simple chrome extension
Hiro Takkii
Hiro Takkii

Posted on

How to create simple chrome extension

I am developing a notepad application by personal development. In the process, I needed to create a chrome extension.
So in this post, I want to introduce the way to develop a simple chrome extension.


In this case, the extension shows an alert message when you visit *

Image description

The codes are Here.

What you need

You have to create only two files; manifest.json and show_alert.js.


Every extension needs manifest.json, which provides essential information. (ref )This time the content of it is as follows.

  "name": "Alert Sample",
  "description": "Chrome Extension Alert Sample",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts": [
      "matches": ["*://**"],
      "js": ["show_alert.js"]
Enter fullscreen mode Exit fullscreen mode

manifest_version must be set to 2 or 3 now. (ref)

When you want to automatically run a script on some site, it is good to use content_scripts. (ref)
You can specify sites by matches consisting of scheme, host, and path. (ref)

Injected scripts into matching pages can be specified by js.

I omitted it this time, but other settings such as extension icon settings are also available in manifest.json.


This contains a simple alert script like this.

window.alert("You visit ''.");
Enter fullscreen mode Exit fullscreen mode

How to load the extension

After you create manifest.json and show_alert.js, you can load it in your chrome browser.

  • Visit chrome://extensions/ and push Load unpacked button (if it does not show, you have to turn on Developer mode).

load unpacked

  • Select the directory contains two files.
    select directory

  • After that, alert Sample is displayed in Extensions.

Image description

  • When you visit "*://**" an alert message is displayed.



I introduced the way to create a simple chrome extension.
I'd like to explain a little more complicated processing in the future.


Japanese: Chrome拡張の作り方 (超概要)

Top comments (0)