How To Make A Chrome Extension - Sourajit Saha

How To Make A Chrome Extension

The first step to learning how to make a chrome extension is to know what a chrome extension is and what it does. A chrome extension is a small software program that helps to enhance your browsing experience. Users of chrome can tailor their browsers to suit individual tastes and wants. Extensions are narrowly defined. They are only created for one specific task, it can contain a whole range of functions but they must all be made for one singular purpose. This article will help explain how to make a chrome extension in steps that you can follow and do on your own. Basic knowledge about JavaScript, CSS or HTML is needed.

Step 1 - Create a manifest.json (manifest file)
After opening your chrome browser, you will have to visit the "More Tools" section where you will find the "Extensions" menu. This leads you to the Extension Manager Page. It is important that on this page you must turn on the "Developer Mode". Usually, it is found in the top right corner of your screen.

In a new directory, you will make a " manifest.json" file. Inside this file is where most of the important data of your extension. Information such as "Permissions" are types of data the file will keep.

Step 2 - Upload your directory to the extension management page

To upload the new directory containing the manifest.json file you just created, you will click on the "Load Unpacked" button and choose the directory you have made. This upload is meant to link your directory to a web commissioned UI. This means your extension can also be checked now to see if it is valid.

In checking to see if your extension is valid, you will go to "chrome://extensions/". Make sure the developer mode is turned on and then check the directory list. If your extension is there, then your extension is valid.

This page is important because any additional code or changes in code to your directory will take effect once you refresh this page.

Note: Now you have an empty " manifest.json" file in your directory. To actually now configure it to suit your needs or likes, you can add codes of what changes you'll like to make to your browser in the manifest directory. Simple codes like making lines of your favorite movie glide across your browser.

Let us check out a few of these codes and how to input them into the manifest directory.

Step 1
Starting with just a simple phrase like "Hi there", we can use this to test our skills and our extension. Create a newtab.html file and put in the phrase we chose. " Hi there".  Once you have created this file, we can test it in the same way we tested the extension when it was empty. Upload the updated new directory and click on the "Load unpacked" button.

Step 2
If this has been successfully done and your extension is valid, you will be able to see your work immediately you open a new tab. When opening a new tab, you'll be greeted with your phrase "Hi there". Pretty cool right? 

Moving on to something a little more exciting, we will go step by step in finding out how to add " Content Scripts" into our extension.

Step 1
Content scripts are simply JavaScript files in the context of some web pages. It means the content scripts can have effects on every site you visit on your browser. We will start by adding a content script like "content.js" to our manifest.json file in the directory.

Step 2
It just means that now we have informed the chrome browser to put this content script into every site you visit (if you use the all URLs option) or specific sites (if you use match patterns). When you reload your chrome browser, every site or specifically targeted sites will have the content scripts interacting with the sites.

One more thing we could add to our extension is "Browser Actions"

Step 1

A browser action is when there is a small icon next to your address bar due to the extension. Get an "icon.png" and add it into the manifest.json file. Now we are done with fixing the browser action, but without something called "message passing", it cannot work well.

Step 2

To add the background script, you will add a " background.is" file to your manifest.json file. Content scripts like the one we added above, has limitations like they cannot listen for clicks. The browser action will not function unless backed up by a background script. Message passing will help the content script and background script interact well and your browser action will ease in seamlessly.

Conclusion

These are some easy steps to follow in creating a chrome extension. After creating your own special extension, you can publish it to the world by uploading it to the Chrome Store. There are a lot of extensions in the chrome store that we can use for models when we want to make ours. On completion of your extension, a review of the whole work can be gotten by first saving all of your files. Then go to the "Extension Management Page", if your extension is still valid, you will see it in the toolbar.

There is also a menu for checking out your options inside your extension. If you click " Details" in your extension, you'll find all of the options of your extension. Once again, to be able to understand these processes and follow them, you will need basic knowledge about JavaScript, HTML, and CSS.
The first step to learning how to make a chrome extension is to know what a chrome extension is and what it does. A chrome extension is a small software program that helps to enhance your browsing experience. Users of chrome can tailor their browsers to suit individual tastes and wants. Extensions are narrowly defined. They are only created for one specific task, it can contain a whole range of functions but they must all be made for one singular purpose. This article will help explain how to make a chrome extension in steps that you can follow and do on your own. Basic knowledge about JavaScript, CSS or HTML is needed.

Step 1 - Create a manifest.json (manifest file)
After opening your chrome browser, you will have to visit the "More Tools" section where you will find the "Extensions" menu. This leads you to the Extension Manager Page. It is important that on this page you must turn on the "Developer Mode". Usually, it is found in the top right corner of your screen.

In a new directory, you will make a " manifest.json" file. Inside this file is where most of the important data of your extension. Information such as "Permissions" are types of data the file will keep.

Step 2 - Upload your directory to the extension management page

To upload the new directory containing the manifest.json file you just created, you will click on the "Load Unpacked" button and choose the directory you have made. This upload is meant to link your directory to a web commissioned UI. This means your extension can also be checked now to see if it is valid.

In checking to see if your extension is valid, you will go to "chrome://extensions/". Make sure the developer mode is turned on and then check the directory list. If your extension is there, then your extension is valid.

This page is important because any additional code or changes in code to your directory will take effect once you refresh this page.

Note: Now you have an empty " manifest.json" file in your directory. To actually now configure it to suit your needs or likes, you can add codes of what changes you'll like to make to your browser in the manifest directory. Simple codes like making lines of your favorite movie glide across your browser.

Let us check out a few of these codes and how to input them into the manifest directory.

Step 1
Starting with just a simple phrase like "Hi there", we can use this to test our skills and our extension. Create a newtab.html file and put in the phrase we chose. " Hi there".  Once you have created this file, we can test it in the same way we tested the extension when it was empty. Upload the updated new directory and click on the "Load unpacked" button.

Step 2
If this has been successfully done and your extension is valid, you will be able to see your work immediately you open a new tab. When opening a new tab, you'll be greeted with your phrase "Hi there". Pretty cool right? 

Moving on to something a little more exciting, we will go step by step in finding out how to add " Content Scripts" into our extension.

Step 1
Content scripts are simply JavaScript files in the context of some web pages. It means the content scripts can have effects on every site you visit on your browser. We will start by adding a content script like "content.js" to our manifest.json file in the directory.

Step 2
It just means that now we have informed the chrome browser to put this content script into every site you visit (if you use the all URLs option) or specific sites (if you use match patterns). When you reload your chrome browser, every site or specifically targeted sites will have the content scripts interacting with the sites.

One more thing we could add to our extension is "Browser Actions"

Step 1

A browser action is when there is a small icon next to your address bar due to the extension. Get an "icon.png" and add it into the manifest.json file. Now we are done with fixing the browser action, but without something called "message passing", it cannot work well.

Step 2

To add the background script, you will add a " background.is" file to your manifest.json file. Content scripts like the one we added above, has limitations like they cannot listen for clicks. The browser action will not function unless backed up by a background script. Message passing will help the content script and background script interact well and your browser action will ease in seamlessly.

Conclusion

These are some easy steps to follow in creating a chrome extension. After creating your own special extension, you can publish it to the world by uploading it to the Chrome Store. There are a lot of extensions in the chrome store that we can use for models when we want to make ours. On completion of your extension, a review of the whole work can be gotten by first saving all of your files. Then go to the "Extension Management Page", if your extension is still valid, you will see it in the toolbar.

There is also a menu for checking out your options inside your extension. If you click " Details" in your extension, you'll find all of the options of your extension. Once again, to be able to understand these processes and follow them, you will need basic knowledge about JavaScript, HTML, and CSS.

0 comments:

Post a Comment

Sourajit_Saha
Hi, I’m Sourajit Saha, An Online Marketer & Pro-Blogger From Kolkata, India. I Have Been Blogging Since Last Quarter Of 2010. I Started Blogging As A Hobby, And Soon It Turned Into Passion And Later Profession. Click Here To Know About Me!

Get All Updates