Skip to content

Instantly share code, notes, and snippets.

@dinnouti

dinnouti/bookmark.json

Last active December 23, 2015 15:19
Show Gist options
  • Save dinnouti/6654817 to your computer and use it in GitHub Desktop.
Save dinnouti/6654817 to your computer and use it in GitHub Desktop.
Download ZIP
Chrome Extension to show company bookmarks Notes: - Stores the bookmarks in the local browser database, until the cache expires in the cacheTimeout (in seconds) - Todo: use the json file to create the tabs automatically instead of hard code in the html
Raw
bookmark.json
bookmark({
"cacheTimeout" : "3600",
"tools": [
{ "vpn": false, "title": "ABC1" , "url": "http://example1.com" },
{ "vpn": false, "title": "ABC2" , "url": "http://example2.com" }
],
"sites": [
{ "vpn": false, "title": "ABC3" , "url": "http://example3.com" },
{ "vpn": true, "title": "ABC4" , "url": "http://example4.com" }
]
});
Raw
manifest.json
{
"manifest_version": 2,
"name": "Bookmarks",
"description": "Company bookmarks",
"version": "0.01",
"browser_action":{
"default_popup": "popup.html",
"default_icon": {
"19": "icon19.png",
"38": "icon38.png",
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"content_security_policy": "script-src 'self' https://<json_domain> https://ssl.google-analytics.com; object-src 'self'",
"permissions": ["storage"]
}
Raw
popup.css
body, html {
margin:0px;
font-size: 12px;
color: #333333;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul.tab-header {
list-style: none;
padding: 0;
margin: 0;
padding-top: 5px;
}
li.tab-header{
font-weight: 600;
font-size: 13px;
text-align: center;
float: left;
margin-left: 7px;
margin-bottom: 0px;
padding: 5px 9px;
color: #00A6DB;
border: 1px solid #bbb;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-width: 0;
background: #DDDDDD;
color: #989898;
cursor: pointer;
}
li.tab-header-selected {
position: relative;
top: 1px;
background: white;
color: #00A6DB;
}
#tab-content {
border-top: 1px solid #bbb;
padding-top: 4px;
clear: both;
}
.bookmark-tab { width: 300px }
.bookmark {
margin-top: 4px;
padding: 3px 0px 3px 10px;
cursor: pointer;
}
.bookmark:hover {
background-color:#49a942;
color: white;
}
.vpn_icon {
width: 13px;
height: 13px;
margin-left: 5px;
vertical-align: -1px;
}
#footer {
font-size: 10px;
background-color: #f5f5f5;
padding: 10px;
margin-top: 10px;
border-radius:2px;
}
Raw
popup.html
<!doctype html>
<html>
<head>
<title>Company Bookmarks</title>
<script type="text/javascript" src='jquery-2.0.3.js'></script>
<script type="text/javascript" src='popup.js'></script>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<ul class="tab-header">
<li id='tab-header-tools' class="tab-header">Tools</li>
<li id='tab-header-websites' class="tab-header">Sites</li>
</ul>
<div id="tab-content">
<div id='tab-content-tools' class='bookmark-tab'></div>
<div id='tab-content-websites' class='bookmark-tab'></div>
</div>
<div id='footer'>
<img src="vpn_icon.png">
Only works inside of the company network or VPN.
</div>
</body>
</html>
Raw
popup.js
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXX-XX']);
_gaq.push(['_trackPageview']);
(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);
})();
$(function(){
$('#tab-header-tools').addClass("tab-header-selected");
$('#tab-content-websites').hide();
$('li.tab-header').click(function(){
$('li.tab-header').toggleClass("tab-header-selected");
$('.bookmark-tab').toggle();
})
// check if is cached or cache timeout
checkCacheExpiration();
});
function checkCacheExpiration(){
if ( (!localStorage["cacheExpires"]) || (!localStorage["bookmarks"]) ){
load_Ajax();
} else {
epochNow = new Date().getTime();
cacheExpires = parseInt(localStorage["cacheExpires"]);
console.log('epochNow - cacheExpires = ', (epochNow - cacheExpires));
if (epochNow > cacheExpires){
load_Ajax();
} else {
load_Local();
}
};
};
function load_Local()
{
_gaq.push(['_trackEvent', 'loading locally', 'data_source']);
console.log('loading the bookmarks locally');
bookmarks = JSON.parse(localStorage["bookmarks"]);
load_bookmarks(bookmarks);
}
function load_Ajax () {
console.log('firing ajax');
_gaq.push(['_trackEvent', 'loading via ajax', 'data_source']);
$('#tab-body-tools').html('<center>Loading...</center>');
$.ajax({
url: "https://<json-domain>/bookmark.json",
dataType: "jsonp",
contentType: 'application/javascript',
jsonpCallback: "bookmark",
success: function(data){
console.log('ajax response', data);
console.log('cacheTimeout', data.cacheTimeout)
dt = new Date().getTime();
localStorage["cacheExpires"] = dt + (data.cacheTimeout * 1000);
localStorage["bookmarks"] = JSON.stringify(data);
load_bookmarks(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('jqXHR', jqXHR);
alert('textStatus', textStatus);
console.log('errorThrown', errorThrown);
}
});
};
function load_bookmarks(bookmarks){
load_bookmark_wrapper(bookmarks.tools, '#tab-content-tools');
load_bookmark_wrapper(bookmarks.sites, '#tab-content-websites');
}
function load_bookmark_wrapper(bookmarks, wrapper){
bookmarks.sort(compare);
$(wrapper).empty();
$.each(bookmarks, function(index, bookmark){
div = $('<div class="bookmark"></div>');
div.append(bookmark.title);
if (bookmark.vpn){
div.append('<img class="vpn_icon" src="vpn_icon.png">');
} else {
div.append('<img class="vpn_icon" src="1px.png">');
}
div.click(function(){
trackLink(this);
chrome.tabs.create({ url: bookmark.url });
});
$(wrapper).append(div);
})
};
function trackLink (e) {
_gaq.push(['_trackEvent', $(e).text(), 'clicked']);
}
function compare(a,b) {
aTitle = a.title.toLowerCase();
bTitle = b.title.toLowerCase();
if (aTitle < bTitle) return -1;
if (aTitle > bTitle) return 1;
return 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment