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.

Result

In this case, the extension shows…


This content originally appeared on DEV Community and was authored by Hiro Takkii

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.

Result

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

Image description

The codes are Here.

What you need

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

manifest.json

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": ["*://*.google.com/*"],
      "js": ["show_alert.js"]
    }
  ]
}

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.

show_alert.js

This contains a simple alert script like this.

window.alert("You visit 'google.com'.");

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 "*://*.google.com/*" an alert message is displayed.

visit

Summary

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

Reference

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


This content originally appeared on DEV Community and was authored by Hiro Takkii


Print Share Comment Cite Upload Translate Updates
APA

Hiro Takkii | Sciencx (2022-02-10T06:51:51+00:00) How to create simple chrome extension. Retrieved from https://www.scien.cx/2022/02/10/how-to-create-simple-chrome-extension/

MLA
" » How to create simple chrome extension." Hiro Takkii | Sciencx - Thursday February 10, 2022, https://www.scien.cx/2022/02/10/how-to-create-simple-chrome-extension/
HARVARD
Hiro Takkii | Sciencx Thursday February 10, 2022 » How to create simple chrome extension., viewed ,<https://www.scien.cx/2022/02/10/how-to-create-simple-chrome-extension/>
VANCOUVER
Hiro Takkii | Sciencx - » How to create simple chrome extension. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/10/how-to-create-simple-chrome-extension/
CHICAGO
" » How to create simple chrome extension." Hiro Takkii | Sciencx - Accessed . https://www.scien.cx/2022/02/10/how-to-create-simple-chrome-extension/
IEEE
" » How to create simple chrome extension." Hiro Takkii | Sciencx [Online]. Available: https://www.scien.cx/2022/02/10/how-to-create-simple-chrome-extension/. [Accessed: ]
rf:citation
» How to create simple chrome extension | Hiro Takkii | Sciencx | https://www.scien.cx/2022/02/10/how-to-create-simple-chrome-extension/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts