Browser Plugin Extension — Making own web plugin extension

Well, Creating a web plugin is simple in the modern tech world.

Lets get started,

My project is to create a a scribble pad.

Configuring Manifest.json file

Manifest.json will be your base file for running web extension on browsers.

Explanation

manifest_version: Defining version of manifest. Using version 2 for this project and version 1 is deprecated and Google had launched version 3.
name & description: Name and Description of the Plugin
icons: Provide plugin icon in different sizes to support browsers and extension.
browser_actions : To provide toolbar to extension and it provides icon, tooltip, badge and popup (base file to act as landing page of extension)
content_security_policy: CSP is a policy to mitigate against cross-site scripting issues. Learn more from https://developer.chrome.com/docs/apps/contentSecurityPolicy/

Once the basement is done, It’s just need some walls, paints and interior to make it into a product.

Create index.html (same as name given in browser_action -> default_popup, js and css file if required.

In Html, JS and CSS, its your creation. Use some creative ideas to play with your coding skills.

Here, for this project, I created a notepad using html and css.

Installation of Plugin

We are going to install this plugin in Chrome.

Open chrome://extensions/
Switch to Developer Mode -> Should be visible to you on your top right
Click on LoadUnpacked Button and Select your Plugin folder which contains Manifest.json

Once loaded, It will be added to your extensions list.

There you go, Plugin should be ready to use.

Hope this was helpful. Thanks for reading. Follow for more content.