Google Chrome plugin or extension, is a set of JS,CSS and HTML files along with a manifest file to define the permissions it requires. It also requires you to have icon file in the same folder.
Note: In order to publish into the Chrome market:
1. you require at least one promotional image (small tile).
2. You can't specify access to localhost in your manifest.
Eg: My Bookmark Searcher extension.
Manifest:
{
"name": "My Bookmark Searcher",
"version": "1.4",
"manifest_version": 4,
"description": "Searches the content of bookmarked websites using power of Google",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "My Bookmark Searcher"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery.js", "popup.js"]
}
],
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
"permissions": [
"http://localhost:*/*",
"http://*.heroku.com/*",
"bookmarks",
"tabs"
]
}
and the popup window when you click:
<!doctype html>
<html>
<head>
<title>Getting Started Extension\'s Popup</title>
<style>
body {
min-width:357px;
/* overflow-x:hidden;*/
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
<!-- JavaScript and HTML must be in separate files for security. -->
<!-- <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\"></script> -->
<script src=\"jquery.js\"></script>
<script src=\"popup.js\"></script>
</head>
<body>
<div id=\"fb-root\"></div>
<div id=\"urls\"></div>
<div id=\"status\" style=\"font-family:arial;color:#999999;\">Loading....</div>
</body>
</html>
And the actual JS file: (which does everything)
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32860962-1']);
_gaq.push(['_trackPageview']);
window.onload = function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
chrome.bookmarks.getTree(function(bookmarks) {
printBookmarksOne(bookmarks);
send_request();
});
};
var links = "";
function openTab(bookmarks_id){
// chrome.tabs.create({url: "http://localhost:3000/researches/"+bookmarks_id});
chrome.tabs.create({url: "http://googlesupport.heroku.com/researches/"+bookmarks_id});
}
function send_request(){
if (typeof jQuery == 'undefined') {
document.getElementById('status').innerHTML = "jquery not found....";
}
$.ajax({
// url: "http://localhost:3000/researches?callback=openTab",
url: "http://googlesupport.heroku.com/researches?callback=openTab",
type: "POST",
data: {"bookmarks" : links},
dataType: "json",
success: function(obj){openTab(obj);},
error: function(jqXHR, textStatus, errorThrown){document.getElementById('status').innerHTML = textStatus+' '+errorThrown;}
});
}
function printBookmarksOne(bookmarks) {
bookmarks.forEach(function(bookmark) {
if(isUrl(bookmark.url)){
links += bookmark.url + "__";
}
if (bookmark.children){
printBookmarksOne(bookmark.children);
}
});
}
function isUrl(url_string){
var re = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return re.test(url_string);
}
