Browser Plugin Extension — Making own web plugin extension

  1. Create a folder for web plugin e.g. Scribble Notepad
  2. Inside the Folder, create a Manifest.json file.
Manifest.json
  • 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/
Folder Structure

Installation of Plugin

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

Next : Will be working on Web Extension using React JS

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Understanding Math.ceil(), Math.round() and Math.floor()

From UI Design to Mobile App

Json Web Token Authentication for Angular App with Auht0 and RESTHeart

How to connect SQLite to React Native [2021]

JavaScript Algorithm: Confirm the Ending

Implement React Native Push Notifications with Firebase — Wonderpush

PubSub for communicating between React Components

Ionic 4 Tutorial with AngularJS and Cordova

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Samraj Soundarajan

Samraj Soundarajan

More from Medium

Simple CRUD App in CodeIgniter 4

Three steps to install WordPress LAMP on Ubuntu

Tailwind Devtools Inspector — How to quickly edit tailwind classes and apply tailwind templates —…

Pai-International Clone