Call functions defined in a Chrome Extension from websites.

Google Chrome is the best web browser around right now, and part of Chrome’s appeal is owed to its excellent extensions. It also provides great tools for web developers and I find myself using it more and more. The most useful thing in chrome extensions is you can call chrome extension’s method from your web site. In this tutorial, we are going to create a simple extension, where I will explain how you can call functions defined in a Chrome Extension from websites.

Yesterday, I got a requirement in which I have to call the http API from https. As you know this is not possible because of the CROSS ORIGIN POLICY so used the chrome extension for this purpose. This simple Extension will used for Ajax call from https to http server.

You can download extension code Here

Create manifest.json file with following code:


{
"name": "codingscripts",
"description": "simple extension for call function from webpage. http://codingscripts.com developer by maddan.mohit@gmail.com",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": [ "background.js"]       },
"externally_connectable": { "matches": ["*://*.codingscripts.com/*","*://*.example.com/*"] },
"permissions": ["tabs","http://*/*","https://*/*"]
}

Make sure you add  your domain names in “externally_connectable” because its important and if externally_connectable is not declared in your extension’s manifest, all extensions and apps can connect, but no webpages can connect.

Now create background.js in which we will call ajax function. You can use both jQuery or JavaScript for ajax call.


chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
if(request.message=="yes"){
var Url = "http://localhost:9000/yes";
var client = new HttpClient();
client.get(Url, function(response) { });
}
});

var HttpClient = function() {
this.get = function(aUrl, aCallback) {
var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
aCallback(anHttpRequest.responseText);
}

anHttpRequest.open( "GET", aUrl, true );
anHttpRequest.send( null );
}
}

 

Now everything is set up in your extension so it’s time to install the extension in your browser, You can follow these steps:

  1. Visit chrome://extensions in your browser
  2. Ensure that the Developer mode checkbox in the top right-hand corner is checked.
  3. Click Load unpacked extension… to pop up a file-selection dialog.
  4.  Navigate to the directory in which your extension files live, and select it.

Now copy the ID of extension, It will used to call function of extension from your website.

 

Call functions defined in a Chrome Extension from websites.

Now you can use this code from your website:


// The ID of the extension we want to talk to.
var editorExtensionId = "smallabcdxyzextensionIdhere";

// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {message: "yes"},
function(response) {
if (!response.success){
console.log("Error!!!");
}
});

Please share if you like the information.

Total Views (159)

Add a Comment

Your email address will not be published. Required fields are marked *