Web Extension

Web Extension

Hi Everybody

Today we are going to see how to develop  an web extension..

first what is Web Extension?

web extension is piece of program or application software that's allow user to adds more functionality to your web Browser...example blocking ads filtering site content or making changes in Appearance of Web browser.

Languages required to make web extension:

HTML

CSS
JS (JavaScript)

JSON

these are the basic language that you need to know we are going to start with basics

Let's begin

 First create directory/folder for your ads-on or extension

inside that directory/folder create a "Manifest.json" file...this "manifest.json" will tell the Browser about our extension..like name,description,permission resources etc

Let's start writing Manifest.json(in the end of this post you will get link to download this Extension)

Manifest.json

first we declared manifest version later on i will tell you what is manifest version and about its role..

second element that is "name" type your Extension name in front of "name" (String only)

third "version" put version here it is first/initial build so 1.0 

these first three elements "manifest_version" ,"name","version" contains meta data of your extension.

fourth We define "description" give summery about your extension

fifth "icons" add your icons image it is optional but also recommended add your logo there is size limit..and support ".svg" formats too later on we will learn how to add .svg format icons here "48" is 48px the size for icons in our browser bar..there are two size you can use both together too

sixth "content_scripts" is an list that hold all information about additional files/scripts also style sheet.. your JavaScript and style-sheet should be declared here in order to have access to your web extension ...and we declared when to inject them into browser...like we are using here "matches" list for telling browser that on which url browser act/inject or perform that script content

seventh we declared "js" list to inject JavaScripts

let's write JS then we will see anatomy or our directory

DoSomthing.js

 anatomy of folder or directory would be like this:

Main

   |

   |-Icons

   |    |-border-48.png

   |-manifest.json

   |-DoSomthing.js

here is our most basic extension is ready to run on web

lets check it out i am gonna run this on my Firefox

to upload you web extension on browser as developer/local environment type "about:debugging" in your url input bar

or just click this link about:debugging   

here click on temporary add-ons

and go to your web extension directory and add you "manifest.json" 

 

Now your Extension is loaded to your browser in developer environment

 Let's check its is working or not

GG it is working thanks your question are welcome see ya soon

in next post i will show you how to add images and other things and how to create multi-browser extension.