Are you looking for ways to create Chrome extensions or chrome extension development? It is, in fact, one of the easiest things that you can help yourself to with little or no knowledge about the technical side of the web. We are sharing a step-by-step guide here to help you with the process. Here, you will be given an introduction on how to publish extensions in the Chrome Web Store.
But before that let us find out more about Chrome extension.
Table of Contents
If you are starting to learn about web development and design, then you should wait until you gain some basic idea about how it works before you delve into creating Chrome extensions.
So let us see further how we are going to deal with this.
Like any other task, it is important to have a strategy drafted before you start creating Chrome extensions. You need not be doing it on the professional front, but if you believe that you need to do some base work before starting over with the big ones, then this is where you can begin.
We will give you some examples to begin with. For example, if you have ever used the Unsplash Chrome extension, then you might be aware of how it helps in creating background images. But, you can even use the Muzli Chrome extension development instead (this helps in transforming tabs into feed of design news and shots from the web).
Before we set out to get ready with the Chrome extension ideas, there are a few other points to be noted, such as the quality guidelines.
As you might be aware, the developer program policies from Google are accompanied with a set of standards and policies, which help contribute to building an extension for Chrome. And ‘purpose’ forms one of the most important factors that contribute to quality. One of the single purposes that an extension is expected to fulfill is clearly described and very easy to grasp. This one extension comprises more than one entities and multiple functionalities, and all these serve the same purpose. Google has been particular about the fact that a Chrome extension development should serve not more than one purpose when in a particular scenario. This is mainly intended to avoid any bad browser performance issues that might arise from a highly packed up browser UI. Some of the criteria that you need to check when ensuring the quality include:
Though it is easy to create Chrome extensions, on the technical front, creating a Chrome extension is more or less like building a web page. But this doesn’t apply to the feel and experiences, i.e., the user experience and user interface that the extension is expected to provide. It is important that we draw a line of difference as every extension is here to serve a different use case or purpose. While some extensions are here to add UI to Chrome browser, known as page or browser actions – any Chrome extension can serve either one browser action or one-page action.
Let us take a look at what a browser action is and also find out more about ‘page actions’.
Browser action is nothing but a Chrome extension that would be relevant for website or web apps.
When it comes to page actions, you would be building an extension that can be implemented across a few web pages. With page actions, you can have a clear picture of what actions can be taken within the current page – but remember these cannot be applied to any of the web pages.
Whenever the user is inactive or doesn’t visit the relevant web page, Chrome extensions with page actions would be inactive or greyed out.
We will take you through the steps in setting up a Chrome extension
It is important that you start with this step, where you would be creating a manifest file by the name manifest.json. This metadata file in the format of JSON will hold certain properties, including the name of your extension, version number, and description. This is the file, which gives details to Chrome regarding what the extension is expected to do and what permission would it need further.
So now you have the most possible and basic extension which is a directory with a manifest.json file. First, create the directory and then put the below-given JSON into the manifest.json. It looks something like the below-given:
“name”: “My Cool Extension”,
You have seen the most possible and basic manifest.json that carries all the fields that are filled in. Make sure that the version for your manifest is 2 and not 1, as 1 is no longer supported now. As you can see, the manifest.json would not perform any actions until you load it into the browser. So, this makes it clear that the manifest.json comprises browser actions. We can do a lot more at this stage. For example, if you wish to display a popup, you can use something like the below-given:
What this will do is render popup.html within the popup window. This popup window is opened or created in response to the user’s actions across the browser. Since this would be a standard HTML file, you will have a control over what the popup will display. So let us add something to the ‘popup.html’ and see what happens next.
Let us see whether the ‘Hello World!’ will be displayed.
See whether this works. For that, you need to visit chrome://extensions in your browser. Here you have to examine whether the ‘Developer mode checkbox’ that appears on the right-hand side is checked. Next, you need to click the ‘Load unpacked extension’. Here, you should be selecting the directory within which your extension files have been embedded. And now the big question what if the extension is valid – it will be active no doubt. And you can easily open a new tab where you will see your ‘Hello World’ displayed.
Though we would not recommend jQuery as a compulsion, but adding it would make things easier. Start by downloading a version of jQuery from the jQuery_CDN – put it within the extension’s folder. Next download the latest minified version, jquery-2.1.3.min.js. If you have to load this, you will have to add manifest.json before ‘content.js’. And the entire manifest.json would appear something like:
“name”: “My Cool Extension”,
“js”: [“jquery-2.1.3.min.js”, “content.js”]
So now you have a perfectly designed Chrome extension that is awesome and functions as expected. Then next, you can publish it to the Chrome store.
You can click on the link: https://chrome.google.com/webstore/developer/dashboard and go to the Chrome web store dashboard.
Click on the ‘Add new item’ button. Check the terms and then go to the page and here, you can upload your extension. Next step is to compress the folder with your project and upload the ZIP file.
Once you have successfully uploaded the file, the next you will see a form within which you can add information regarding your extension. Here, you can add icons, detailed descriptions, upload screenshots and much more. From the store, you can use these images to endorse an extension. By clicking on the ‘Preview Changes’ button within the ‘web store’, you can preview the appearance of your extension. If you are satisfied with the result, you can ‘Publish changes’.
In the Chrome Web Store, just type in the name of the extension by its title and find what you are looking for.
If you are looking for some help to create websites that stand out, then, we can help you. Acodez is a web design and web development company in India that helps in developing and designing websites that are based on the latest trends and ideas.
Contact us and we'll give you a preliminary free consultation
on the web & mobile strategy that'd suit your needs best.