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

In this tutorial will show you how develop a Chrome Extension with a custom html scraper.

manifest.json
{
  "manifest_version": 2,
 
  "name": "Reply News and Events",
  "description": "Chrome Extension for Reply News and Events",
  "version": "1.0",
 
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "http://reply.eu/*"],
   
  "homepage_url": "http://reply.eu/en/newsroom/",
 
  "background": { "scripts": ["js/jquery-1.10.2.js","js/jquery-ui-1.10.4.custom.js",
"background.js", "js/jquery.pajinate.js"] },
  
  "web_accessible_resources": [
    "48.png"
  ],
  "icons": {"16": "16.png", "48": "48.png", "128": "128.png"}
}
 
 
popup.html
 
In this page there classic HTML tags.
The most important part is in the <head></head> tag:
 
<head>
             <title>Web Scraper Reply.eu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta name="AUTHOR" content="Pasturenzi Francesco">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="PRAGMA" content="NO-CACHE">
<meta name="ROBOTS" content="NONE,NOARCHIVE"> 
<meta name="GOOGLEBOT" content="NOARCHIVE"> 
 
<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" />
<link type="text/css" rel="stylesheet" href="css/styles-pajinate.css" />
 
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="js/jquery.pajinate.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
 
And body part:
 
<body style="background:#000000;">
 
<div id="response_parse_html" style="color:#FFFFFF;"></div>
 
</body>
 
popup.js
 
$(document).ready(function() {
 
ajaxLoadContent();
 
});
 

 

function ajaxLoadContent() {
$.ajax({
url: "http://reply.eu/en/newsroom/newsitaly/",
type: "GET",
timeout: 5000,
datattype: "html",
 
success: function(data) {
 
//scanner + parser
$(data).find('div').each(function(){
if($(this).attr("id") == "mostrecent"){
$("#response_parse_html").html($(this));
}
});
 
}
 
});
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.