Last active
December 23, 2015 15:19
-
-
Save dinnouti/6654817 to your computer and use it in GitHub Desktop.
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" } | |
| ] | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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"] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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