Having fun with code
  • Blog
  • Favorites
    • Favorite Books
    • Favorite Libraries
    • Favorite Tools
  • Utilities
    • SP 2010 Colors
  • Contact
  • Home /
  • Miscellaneous /
  • Custom Bookmarker with Chrome Extension

Custom Bookmarker with Chrome Extension

December 16, 2011 / Matt C. / Miscellaneous / No Comments

A couple days ago, I launched a “Good Reads” section on this blog, where I could quickly capture some bookmarks for blogs I read using Google Reader. I wrote a couple PHP pages to capture the URL, Title and Blog RSS Feed source using a simple GET command, and then display them using the nice jquery plugin jquery.dataTables.js on a WordPress page.

It occurred to me, I might also just want to bookmark other pages as well, not just from Google Reader. So that’s when I thought about writing an extension.

Wow, I was very surprised! Chrome makes it super easy to write browser extensions. In 20 minutes I had a little bookmarker extension in place.

Here’s how it works.

The Code

Create 3 files in a folder of your choice:

  • index.html
  • index.js
  • manifest.json
function sendSelection(i, t) {
  var url = i.linkUrl ? i.linkUrl: i.pageUrl;
  var title = i.selectionText;
  sendTo(url,title);
}
 
function sendPage(i, t) {
  var url = i.url;
  var title = i.title;
  sendTo(url,title);
}
 
function sendTo(u, t) {
  var str = 'Would you like to bookmark the selection: \n';
  str += '- URL: ' + u + '\n';
  str += '- Title: ' + t + '\n';
  if(confirm(str)) {
    var sendToUrl = "https://www.mattjcowan.com/wp-admin/good-read.php?u=" + u + "&t=" + t + "&s=chrome&v=2";
    chrome.tabs.create({"url": sendToUrl });
  };
}
 
var contexts = ["page","selection"];
 
for (var i = 0; i < contexts.length; i++) {
  var context = contexts[i];
  var title = "Send '" + context + "' to mattjcowan.com";
  if(context == 'selection') {
    chrome.contextMenus.create({"title": title, "contexts":[context], "onclick": sendSelection});
  };
  if(context == 'page') {
    chrome.contextMenus.create({"title": title, "contexts":[context], "onclick": sendPage});
  };
}
<script src="index.js"></script>
{
  "name": "Send To (mattjcowan.com)",
  "description": "Sends the page information to mattjcowan.com",
  "version": "0.1",
  "permissions": ["contextMenus","tabs"],
  "background_page": "index.html",
  "content_security_policy": "default-src 'self'"
}

And there you go.

The Extension

Navigate in your Chrome browser to “chrome://extensions”, and upload your new extension:

Screenshot-2011-12-16_20.28.07

The Result

Now, using a simple “Right-click”, I can quickly post a link or page to my “Good Reads” section of the blog.

Screenshot-2011-12-16_20.30.09

And it magically appears in my bookmarks:

Screenshot-2011-12-16_20.31.00

Nice!

chrome

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Categories

  • .NET (20)
  • ASP.NET MVC (4)
  • JAMstack (2)
    • Headless CMS (2)
  • Miscellaneous (2)
  • Python (1)
  • REST (3)
  • SharePoint (8)
  • WordPress (1)

Tags

.net ado.net autofac binding C# chrome code generation command line console application csv dapper di entity framework integration ioc job scheduling engine json jsv learning llblgen load balancing micro-orm mycorp odata orm people editor people picker picker controls picker dialog plugins pmp python Quartz.NET rest saf service application servicestack sharepoint smo soap sql sqlalchemy tornado web server validation web api

Archives

  • May 2020 (2)
  • November 2013 (1)
  • June 2013 (1)
  • May 2013 (1)
  • March 2013 (1)
  • December 2012 (1)
  • November 2012 (1)
  • October 2012 (3)
  • September 2012 (2)
  • June 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • February 2012 (2)
  • January 2012 (1)
  • December 2011 (2)
  • September 2011 (2)
(c) 2013 Having fun with code - "FunCoding" theme designed by mattjcowan using the Theme Blvd framework