Chrome Extension To Make JSFiddle Default To jQuery Library

Google is now forcing users to download and install Chrome extensions that are from the Web Store only. In my previous post How To Make JSFiddle Default To jQuery Library – Update   I was able to create an extension in developer mode of Chrome but this will be disabled once you restart your machine. The solution is to make it an extension that will be downloadable from the Chrome Web Store.

Make a CRX file for the Chrome Extension To Make JSFiddle Default To jQuery Library

Go to chrome://extensions and make sure Developer mode is checked

Chrome Developer mode

Click Pack extension option and then browse to the directory of extension files and click Pack Extension.

Browse to extension files

This will create the .crx file and the .pem file for your extension. The .pem file is the key generated as a signature to the extension. Do not lose this file since it will be the same file required when you modify the extension in the future.

JSFiddle Chrome Extension CRX PEM files

Installing the Chrome extension

Once the crx file is created you can now deploy the extension to your Chrome browser. You can do this using Manual Install or by publishing it through the Chrome Web Store.

Manual Install using chrome://extensions

For manual install, you can just drag and drop the .crx file to chrome://extensions page of your Chrome browser.

JSFiddle Chrome Extension To Chrome Extension Manual

The extension will be installed and is functioning but notice there is a message at the right side under the Enabled checkbox “Not from Chrome Web Store”. This is because I just manually installed the extension. This is one way of Google forcing users to get extensions only from the Chrome Web Store.

Crx file installed on extensions

Chrome Web Store

To upload the extension to the Chrome Web Store, you can go to the Chrome Developer Dashboard site.  . You just need to login with your gmail account and may need to pay a one time fee of $5 if its your first time uploading an extension.

Chrome Developer Dashboard

Click Add new item and then choose the file to upload. Note that you need to zip your extension not the crx file. Google will sign the extension with your account signature and they will be the one to create the crx file.

Chrome extension upload a zip

Chrome extension zip file explorer

Once uploaded, the page will show several options you can set for the extension. One of the important setting or option is the website the chrome extension is associated to. This are the website verified by Google under your Google account.

 

Chrome developer dashboard website option

You can also set the category, language and the pricing for the extension.

Developer dashboard category and pricing option

The extension can also be set as Public, Unlisted or Private for the visibility option. If Public, the extension can be searched from the Chrome Web Store and is available for download for all users. The Unlisted means the extension can be downloaded only by users who has the download link for the extension and its not searchable from the Web Store. Private means only members of the Google Group or specific developer dashboard accounts can only donwload the extension.

Developer dashboard visibility option

After setting up the options for the extension you can click publish and then the extension will be available for download from the Chrome Web store.

Chrome extension after setup

As you can see I have not published my extension yet. There is another option to make the extension available for download to users which is the Inline installation. For inline installation, the extension is still hosted from the Chrome Web Store but the users can download and install the extension from a link directly from your website. I will talk about more about the inline installation on my next blog post. See you around..

 

 

How To Make JSFiddle Default To jQuery Library – Update

In my resolve to not allow my self to go to the same problem of making JSFiddle default to jQuery library , I installed the user script from JohnKPaul to my Chrome browser as an extension. However, after restarting my machine and opening a Chrome window, there is a warning that “the extension is not from Web Store”

Unsupported Extensions Disabled

The warning message when opening again Chrome.

Chrome Allowing Extensions Only From Web store

When you go to chrome://extensions you will see that the extension is now disabled and not working. You cannot enable the extension even if you click “Enable”. No extension means JSFiddle will default back to the “No-Library (pure JS)” library.

Disabled User Script Not From Web Store

User script has been disabled by Chrome. There was no way to enable it.

JSFiddle Default Library No JS

Create Chrome extension for the User Script

When I posted How To Make JSFiddle Default To jQuery Library, it was my plan to convert the user script to a Chrome extension to be able to try and create a Chrome extension myself. I always imagine that someday I can create a Chrome extension and send it to the official Chrome Web Store so everyone can download it. So I think creating a Chrome extension will solve the problem of the user script being disabled since it is not from the Web Store.

Steps on creating the Chrome extension

First, create a manifest.json file. This will contain the information about the extension. The existing extensions you have in your Chrome has their own a manifest.json file. They are located in the Chrome extensions folder C:\Users\[user]\AppData\Local\Google\Chrome\User Data\Default\Extensions.


{
"name": "JSFiddle Default Library to JQuery",
"version": "1",
"manifest_version": 2,
"content_scripts": [{
"js": ["jsfiddle.changedefault.user.js"],
"matches": ["http://jsfiddle.net/*"]
}]
}

Then copy the user script to the same location as the manifest.json.

Extension Folder

How to install the Chrome extension

From the Extensions page, click “Developer Mode”

Chrome extensions Developer mode

Click Load unpacked extension… and then browse to the location of your manifest.json file. Press “Ok” and then you will notice that the extension is now installed and active from the Extensions page.

Testing the new Chrome extension

Now that the extension is installed, go to JSFiddle.Net. The extension made JSFiddle default to jQuery library when you create a new script.

Chrome extension Enabled

JsFiddle Default Library jQuery

Warnings when you restart Chrome

When you restart Chrome you might encounter a warning like the one below.

Disable Developer Mode Extensions Warning

This is a warning to disable developer mode extensions. This is because of the extension added for the user script in developer mode. I will try to make a Chrome extension from the Web Store from this extension in my next post. See you around…

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