How to publish chrome extension and to test it locally

Posted 1:32 pm by Jagan K & filed under Browser.

In the previous tutorial Chrome Extension for your Blog in 2 minutes you had the entire source code to create a dedicated chrome extension for your blog, but what if you need make changes to the design & customize it, definitely you need to code & test your extension locally. Follow these simple steps to get started

How to develop and test chrome extension locally

Step 1. Goto chrome://extensions

Step 2. Check  checkbox Developer Mode

Step 3. Click on button load unpacked extension

Step 4. Navigate to the downloaded zip folder that has the source of chrome extension.

Step 5. You’ll find the extension loaded on top of all other extensions.

Step 6. You can now make changes to the code and press CTRL + R to reload the extension and test it locally, click on Reload link on your loaded extension and test it locally.

How to publish chrome extension to chrome web-store?

Now you have completely customized chrome extension that you are ready to publish to chrome web-store and to share with the world. Chrome web-store developer account comes with a small one time fee $5 USD.

Step 1. Visit https://chrome.google.com/webstore/developer/dashboard login with your Gmail account and pay the small fee, your account will be activated instantly.

Step 2. Click on add new item after you paid for your account and your account is activated

Step 3. Upload zip package source, icon & promotional images.

Step 4 : Link your blog URL to your chrome extension, your extension can be directly installed from the link provided. There is no need for the user to visit chrome webstore to install the extension.

Step 5 : Check inline install to have your extension locally installed directly from your website, optionally give your analytic tracking ID to track the amount of traffic and installs your extension gets. Finally preview changes and publish your extension. Your extension will go live in 5 minutes.

Now your extension is ready is listed on chrome web-store & an unique ID is assigned to it. You need your extension ID to use inline install.

Use Inline Install for your chrome extension.

Step 1. Create a button with unique ID

<a id="install_btn" class="btn btn-primary" style="padding-left: 60px; padding-right: 60px; border: 3px solid red; float:left;">Install Chrome Extension&nbsp;Now</a>

Step 2. Attach following JavaScript code to the on-click of above button, change YOUR_EXTENSION_ID  to your extension id. You can find this on the URL your extension on chrome store.

 function successCallback(){
 location.reload();
 }
 
 function failureCallback(){
 alert('Installation failed please try again.');
 }
 
 //chrome extension scripts
 $('#install_btn').on('click', function(){
 
 if( $.browser.webkit ) {
 chrome.webstore.install('https://chrome.google.com/webstore/detail/YOUR_EXTENSION_ID', successCallback, failureCallback);
 } 
 });

Step 3 : Add the following link to the head section of your website.(Very important)

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/YOUR_EXTENSION_ID">

How to find your chrome extension ID?

Navigate to your extension on chrome webstore and you’ll find your extension ID on the URL

About the Author

Jagan K is passionate about web technologies. He is sole founder of free online resume creation service https://theresponsivecv.com and www.livepositiveway.com. Apart from web development, he loves reading books and to live life in the present, appreciating every single moment and being intensely grateful for all that he is & all that he has.