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