Congratulations – It’s a Chrome Extension!

By Tomer S.

Jul 31, 2017

As a young parents of our little one, my wife and I are learning the “debugging life cycle” of babies.

The debugging life cycle: The baby is crying. Is he hungry? If yes, then feed him. Does the baby have stomach pains? If yes, then try to make him feel better by patting his back. For example, does the little one need a diaper change? If yes, change it.

If all the answers were “no,” then you should start again from the beginning. He is probably hungry by now. It was easier if parents knew that the diaper was clean. Moreover, the parents will be happier to know that their baby feels comfortable with the diaper on, in any place and at any time.

This is the same motivation you will need to build your own chrome
extension. We want everything “here and now” and not to sign in on multiple systems. It improves our user experience and helps us work in our “home base.”

In the following paragraphs, I will describe the basics of launching chrome extension from zero as we implant it in the EatNgage chrome extension, as well as the challenges one will likely face.

Behind enemy lines

Integration is one of the great challenges of using tech tools. The main challenge here is that we find ourselves behind enemy lines. We want to apply our code to different environments than our typical development one.

“Feel at home” isn’t a recommendation while developing a chrome extension; it is just a way of thinking. You need to pay attention to your development dependencies and handle it while developing your extension.

“Yes. Please.”

There is a famous joke about a waiter who gives an overweight man the menu. The man replies, “Yes. Please.” Manifest file is the menu of our chrome extension. It contains all the relevant details about our extension, and we will order it all.

Every chrome extension must include a manifest file. It is the only principle in order to upload the extension to the store or to our
browser in developer mode.

Since 2014, the version that declares the type of the manifest file is 2 .

Which data will be on the manifest file?

  • Full and short name of the extension
  • Short description
  • Version of the extension. Please note that in every upload to the store we will need to upload an extension with a newer version, according to the semantic versioning standard.
  • browser_action – This field describes the default icon and pop on the tool bar of the chrome browser. If you want to add configurable options to the extension, you can add an options page.
  • Content_script– This field will help us survive behind enemy lines. This field has the values of where and when the script will run. We can define where our extension will work by adding a matches key. Its value is a regex expression of URL, which will tell the browser on which web pages to run our code.
  • Icons – We will describe the icons we will use in the extension.
  • web_accessible_resources – This key specifies which external libraries or packages to load from our project folder.

Developer mode

After describing our project structure in the manifest file, the next step will be to develop our extension functionality. After developing our first feature on the extension, we will load it locally to our chrome browser in order to test it and show our progress.

In order to do so, we will open our chrome extension page: chrome://extensions/First, click on the “checkbox developer mode” to enable loading the unpacked files from their folder location.

Don’t forget to reload the extension after every change and refresh the web page you are working on.

How will we upload it?

After completing all the extension functionalities and testing them locally, we want to spread out our great extension.

You should open a developer account. It will cost you a small payment (currently 5$) for the first time and then you can upload your extension when you wish to update it.

Summary

In this article, I’ve tried to describe the whole picture of developing and uploading a chrome extension. It lacks the main part of the programming. This skill you will learn with your great teacher, which you can find it in any home, mostly near the computer screen – your keyboard.

Good Luck!

External Links:

Leave a Reply

Your email address will not be published.