How to publish chrome extension and to test it locally

Posted by & 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.

 

Test chrome extension 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.

How to create a developer account and upload chrome extension

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.

Upload-icon-description-and-screenshots-chrome-extension-upload

 

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.

link your blog url to your chrome 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.

use inline install to install from your blog chrome extension

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

How to view chrome extension id

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.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!