Creato da pastuweb.com
Share My Page
My Social Accounts
Account FaceBook Account LinkedIn Account Twitter Account Google Plus Account Git Hub

In this tutorila I will show you how to develop a Chrome Extension to call Custom RestFull API from a server AS.

To simplify matters we assume that the server is under the control appuntivari.net that it is a server with a Liferay portal 6.1, then the language of the back-end Java J2EE, Restfull active and CorsFilter enabled in web.xml.
manifest.json
{
  "manifest_version": 2,
 
  "name": "AppuntiVari.net - Agenda events",
  "description": "AppuntiVari.net - Agenda events",
  "version": "1.0",
 
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "http://appuntivari.net/*"],
  "options_page": "options.html",
  "homepage_url": "http://appuntivari.net",
 
  "background": { "scripts": ["js/jquery-1.10.2.js",
"js/jquery-ui-1.10.4.custom.js","background.js","popup.js"] },
  
  "web_accessible_resources": [
    "48.png"
  ],
  "icons": {"16": "16.png", "48": "48.png", "128": "128.png"}
}
 
options.html
<!DOCTYPE html>
<html>
  <head>
    <title>Settings -AppuntiVari.net - Agenda events</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="options.js"></script>
  </head>
  <body>
    <h1>
      <img src="64.png" alt="Toast">
      Settings - <span style="color:#FF0000;">AppuntiVari.net</span> </strong>
    </h1>
    <h2>Account</h2>
    <form id="options">
      <strong style="color:#FF0000;">Basic Auth in RestFull</strong><br>
 Username:<br>
      <input type="text" name="username" id="username"><br>
 Password:<br>
 <input type="password" name="password" id="password"><br>
 Identificativo:<br>
 <input type="text" name="idUser" id="idUser"><br>
 <hr>
 <br>
 <strong style="color:#FF0000;">Some features:</strong><br>
 Eventi agenda: 
 <select name="agendaevents">
        <option value="show">show</option>
        <option value="hide">hide</option>
      </select><br>
    </form>
  </body>
</html>
 
options.js
window.addEventListener('load', function() {
 
  options.username.value = localStorage.username;
  options.password.value = localStorage.password;
  options.idUser.value = localStorage.idUser;
  
  options.agendaevents.value = localStorage.agendaEvents;
 
  options.username.onchange = function() {
    localStorage.username = options.username.value;
  };
  options.password.onchange = function() {
    localStorage.password = options.password.value;
  };
  options.idUser.onchange = function() {
    localStorage.idUser = options.idUser.value;
  };
  
  options.agendaevents.onchange = function() {
         localStorage.agendaEvents= options.agendaevents.value;
  };
 
});
 
popup.html

In popup.html , you have to create you an HTML page to fit your needs including the popup.js.

<ul class="content">
<!-- inserted through popup.js AJAX -->
</ul>
<p id="alert">
<!-- inserted through popup.js -->
</p>
 
popup.js
var user = localStorage.username;
var pass = localStorage.password;
var id_user = localStorage.idUser;
var ageEvents = localStorage.agendaEvents;
 
$(document).ready(function() {
 
if(ageEvents  == "show"){
    ajaxLoadContent();
}else{
     $("#alert").html("You have to set Agenda Events to SHOW in Option page of Chrome Extesion.");
}
 
});
 
function ajaxLoadContent() {
 
$.ajax({
url: "http://appuntivari.net/MyServiceAPI-portlet/
api/secure/jsonws/agenda/get-events-byIdUser/id_user/"+id_user,
type: "GET",
username: user",
password: pass,
contentType: "application/json",
timeout: 5000,
accepts:"application/json",
dataType:"json",
crossDomain : true, //mandatory
success: function (data, status, jqXHR) {
   //alert("Success "+data);
  console.log(JSON.stringify(data));
   $.each(data, function(idx, item){
var dstart = new Date(item.startdate); 
var dend = new Date(item.endate); 
   $(".content")
.append("<li><div><div class='marginTitle'>"
+item.title+"</div><div class='marginStartDate'>"
+getTimestamp(dstart)+"</div><div class='marginTipo'>"
+item.tipo+"</div><div style='clear:left;'></div></div></li>");
   });
 
},
error: function (jqXHR, status) {
// error handler
alert("Error: "+status);
}
});
 
return false;
}
 
All everything about the style structure, layout is at your discretion.
 
Once you have written the various sources. 
1) Open Chrome 
2) Click on the "Menu" 
3) click on Tools 
4) click on Extensions 
5) click on "Load Unpacked Extension not ..." 
It should appear there in the list below.