How To Setup A Chrome Extension For Inline Installation

In my previous blog post, I made a Chrome extension to make JSFiddle default to jQuery library.  I already uploaded the extension to the Chrome developer dashboard but did not press the “Publish” yet. I want to try and setup a chrome extension for inline installation so users can directly download the extension from this site without going to the Chrome Web store.

What settings to make for Inline Installation?

From the developers dashboard you can click edit to setup the extension. I’ve already published my extension as you can see below, but you can still edit.

Chrome Extension Inline Installation Developer Dashboard

After clicking Edit, the setting for the extension will show up. There is an option for inline install which you need to enable if you want inline installation.

Chrome Extension Inline Installation Inline Install Option

Another important setting is the Websites option. You will need to choose a website linked to your Google account. This will be the site where users will be able to do direct installation of the extension.

Chrome Extension Inline Installation Website Option

These are the two main settings you need to enable to setup a chrome extension for inline installation. You can also fill up options like the Visibility, Price, Language and Description for the chrome extension to give more information about what is the extension is about.

Once everything is setup, click Publish to make the extension available from the Chrome Web Store.

Chrome Extension Inline Installation Publish Prompt message

 

Installation From the Chrome Web Store

To verify the extension you just published, you can search the Chrome Web Store for the extension. I searched the Chrome Web Store and search results returned this. Cool!

Chrome Extension Inline Installation Chrome Webstore Search

You can also click the extension name from the dashboard and it will take you to the extension page from the Web store.

Chrome Extension Inline Installation Extension in Web Store

Go ahead and click the “Free” link to install the extension.

Chrome Extension Inline Installation Install Extension Popup

 

Setup inline script from the website

Now that the extension is already available from the Chrome Web Store, you can go ahead and setup the links for inline install from your site. I’m using wordpress on my site so most of the setup that I need to do will be from the wordpress admin page of my site.

Add <link> tag in <head>

To add a Chrome web store link to a site you need to add a <link> tag in the <head> of the page you want to add the link. In my case, I can add the script to my wordpress theme page for head script.

Chrome Extension Inline Installation Head Script

 

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

Take note that the itemID is the 32 char latin word of you Chrome extesion.

Add Javascript function call to chrome.webstore.install()

The inline installation will happen if the user clicks a link or trigger an installation. Its not allowed to perform the installation without the user triggering an event. From my site, I added a link to call the chrome.webstore.install() function.

 <ul> <li><a href="#" onclick="chrome.webstore.install()" id="install-link">JSFiddle.Net Default To jQuery Library</a></li> </ul> 

Chrome Extension Inline Installation  Setup Link From WordPress

 

Test the install from the link

To test the installation, I can click the added link from my site and click Add.

Chrome Extension Inline Installation Link From NoelArlante com

Chrome Extension Inline Installation Test Link

You can then check the installed extension from Chrome://extension. You will notice that the extension does not have the “Not from Chrome Web Store” message below the Enabled checkbox. This means the extension was installed from the Web Store. Nice!

Chrome Extension Inline Installation From Web Store

 

You can refer to the Inline Install documentation from Google here. I have now an extension that can be installed from the Chrome Web Store or from my site 🙂

 

How To Make JSFiddle Default To jQuery Library

You click Run or hit Ctrl+Enter from your JSFiddle session but nothing happens. Yes, that simple jQuery script you are trying to run seems too simple not to work, isn’t it? Then you notice that yes there is an option located in the left side of JSFiddle to choose the javascript library you want to use. You select the latest jQuery version available from the list and click Run. You just had the last 10 minutes sorting out the script making sure it is a valid jQuery script but the problem is that JSFiddle is not using jQuery as the default javascript library. That happened to me too many times, that its really frustrating.

I forgot to make JSFiddle default to jQuery library.

I often forget to make JSFiddle default to jQuery library when my brain is to eager to try and fiddle with an idea and turn it into an actual jQuery script. When you start from scratch JSFiddle’s default library is set No library (pure JS).

JSFiddle Default Library No JS

You need to choose what library you want to use before diving in and coding into the Javascript pane. There must be a way to make JSFiddle default to jQuery library. The left side of JSFiddle is the area for user options. I was trying to find a setting that will make JSFiddle default to jQuery library. But there is no option for that as of this writing.

JohnKPaul user script

I came across the blog post of Mr. JohnKPaul for Changing jsFiddle’s default library to jQuery. He had the same experience using JSFiddle with the library not using jQuery by default. He created a chrome user script to solve this problem. The user script will make JSFiddle default to jQuery library. Perfect!

How do I apply the user script to Chrome?

I’m not familiar with user scripts. Now I have a user script to use on Chrome for my JSFiddle problem but I do not know how to set it up. I attempted to search for an extension to handle users cripts and it pointed me to use TamperMonkey Chrome extension.

TamperMonkey

Tampermonkey userscript manager

TamperMonkey is the Chrome version of GreaseMonkey in Firefox to house and run user scripts. I thought I had the solution to install and setup the user script to Chrome using TamperMonkey but I came across a better solution.

Install the user script using chrome://extensions

A more direct way of installing user scripts in Chrome is to just go directly to the Chrome extensions page. From Chrome go to chrome://extensions and then drag the user script file to the page.

Userscript install to Chrome

JSFiddle User Script Installed in Chrome

The user script will be installed like any extension in Chrome.

JsFiddle Default Library jQuery

Now when you go to JSFiddle and create a new fiddle session, the default library is now showing jQuery 2.x(edge) as the Javascript library. Now I’m happy! 🙂

UPDATE : It seems Google does not allow user scripts to be installed directly to Chrome. I made another blog post as an update to this. Check it here How To Make JSFiddle Default To jQuery Library – Update

Ajax Not Passing Parameters Using Internet Explorer – Solved

I was trying a simple ASP.Net project that calls a web service using AJAX. I just want to try some stuffs I can do with AJAX and JQuery in my desktop. Sort of just diving into the code and expecting that as simple as this would work in 5 minutes. But no, I guess its that kind of a problem that will only happen in your machine and not with others. Thanks to the Download Accelerator Plus installed on my machine I would have not encountered Ajax not passing parameters to the web service. Arrgh!.

Ajax Not Passing Parameters

As you would expect, I got the following components in my ASP.Net project to work on the  simple Ajax call test that I want to do.

Web Service

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string CheckIfGalaxyGuardian(string guardian)
{
var guardians = new[] { "Peter", "Gamora", "Drax", "Groot", "Rocket" };

if (guardians.Any(x => x == guardian))
return "We are Groot!";
else
throw new Exception(string.Format("{0} is not a Guardian.", guardian));

}

 

 Asp.Net Page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JSON Exception Sample</title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/Guardian.js"></script>
<meta http-equiv="x-ua-compatible" content="IE=9" />
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btnSubmit" value="Check Galaxy Guardian"/>
<input type="text" id="name"/>
</div>
</form>
</body>
</html>

 

Javascript

$(document).ready(function () {

$("input[type=button]").click(function () {

var guardian = $("input[type=text]").val();

// Ajax call to service.asmx.
$.ajax({
type: 'POST',
url: 'GuardianSvc.asmx/CheckIfGalaxyGuardian',
data: JSON.stringify({ guardian: guardian }),
contentType: "application/json",
dataType: 'json',
success: function (result) {
alert(result.d);
},
error: function (result) {
var e = JSON.parse(result.responseText);
alert(e.Message);
}
});

});

});

 Invalid web service call, missing value for parameter error

When I ran the application I got the error : Invalid web service call, missing value for parameter… Ajax is not passing the parameters to the web service. When you look at the message in fiddler it will show you that no data was passed into the request.

Fiddler Request Message  Before DAP

Fiddler Response Message  Before DAP

When I tried to use Chrome, it works. So what is wrong with using Internet Explorer?

I tried using the Chrome browser and voila everything is working as expected. I did not do any change in my code. It just works with Chrome.  I tried searching about the issue and I got into this Stackoverflow post about IE refusing to send POST data. One of the comments recommended that uninstalling FDM (Free Download Accelerator) fixed the issue for him. I remember having a download manager on my machine so I tried to look  a download manager installed and saw that Download Accelerator Plus is installed. My hope is restored.

Disable Download Accelerator Plus or Free Download Manager

Download Accelerator Plus  Disable IE Integration

Try again with IE

After disabling DAP on my Internet Explorer, I tried running the same web project and now it works.

Fiddler Response  Ajax working in IE

Not A Guardian

Galaxy Guardian

If you can search Google and hopefully see this post the first time you encountered the same problem, congratulations! I might have saved you couple of hours debugging your program 🙂