Chrome Extension - Save URLs of All Open Tabs in a New Bookmark Folder

• Download source - 4.8 KB
• Download demo project - 566.7 KB

Introduction

This tip gives the introduction to Bookmark API of Chrome and using the same to make an extension to save the URLs of all open tabs in a new folder of bookmarks hierarchy with just one click.

Background

Basic knowledge of JavaScript will be an advantage. Please go through the basic structure of manifest.json file for a deeper understanding. Use the documentation given by Google Chrome for the same.

Using the Code

NOTE: The details on how to export the extension in Chrome is discussed in the Article_demo.

We shall discuss the technical details of the extension here. Let us begin with Manifest.json file. Json is a notation to describe data/text in key-value pair form. All Chrome extensions need the information regarding what is to be loaded, that is how should the extension look like on Chrome page, what image it needs to display, should the user be able to see the description of extension when the user hovers over the extension icon. Extensions need information of background scripts running in the background and whether they are required to be persistent or not.

All this basic information regarding the configuration setting of the extension is given in "Manifest.json". Let us discuss important code snippets here.

"browser_action": {
    "default_title" : "Save Bookmarks",
    "default_icon"  : "hello.png"
  }	

Browser Action tells the chrome that icon of this extension is to be shown outside the Omnibox/URL box.

As shown, "default_icon" is the name of file to be displayed. Make sure that it is in the same directory level as that of Manifest file. "default_title" is the extension description which gets displayed when the user hovers over the icon. Extension needs to know the name of background script and whether it is persistent or it should be invoked when some event happens. For example: if you want to create an extension which will get the Facebook feeds after every 10 minutes, then this is the example of persistent background script while the extension which triggers a background process once an event is fired or command is issued are not persistent.

"background": {
    "persistent": false,
    "scripts": ["SaveBookmarks.js"]
  },

Next important topic is the "permissions" required by this extension to access the URLs of all open tabs and then save them in bookmark folder.

"permissions": 
	[
		"tabs", 		//To access all open tabs
		"background",	// To run a non-persistent background process(.js) to listen the events fired from chrome
		"bookmarks"		// To create a folder in bookmark hierarchy and save URLs in it.
	],

Now, let us discuss about the background script which contains the main functionality of this extension.

chrome.browserAction.onClicked.addListener(function(tab) { /*Your stuff lies here*/});

chrome.browserAction.onClicked.addListener signifies that as soon as the user clicks on the icon on chrome's toolbar, an event will be fired. The significance of the function parameter named "tab" is that it gives the information of all tabs active/open in chrome. This information of all tab will be furthered filtered to extract an array of tabs which are associated with the active window to be bookmarked.

chrome.tabs.query(
		{currentWindow: true},
		function(arrayOfTabs)
		{
			TabsCollection = arrayOfTabs;
		}
	);	

chrome.tabs.query takes two arguments, the first one is the queryinfo which contains the parameters on the basis of which tabs are filtered. In this extension, we require all the tabs of the current window and the filtered result returned is saved in global variable "TabCollection".

The Extension is coded so that all the tabs of a particular window (from which icon is clicked) should be saved in newly created folder of Bookmark hierarchy. Since the whole point of creating this extension is to save all open tabs in just one go without much hazzle, therefore folder name will be created using date and timestamp in the format of YYYY+ MM + DD + DATE + HOURS + SECONDS + MILLISECONDS without giving user the option to choose folder name at the time of creation. However, once the bookmark folder is created, the user can rename it via bookmark manager. After creating folder in bookmark hierarchy, all the URLs of the open tabs will be saved in that folder. For this purpose, chrome.bookmarks.create is used to either create a folder and to save URL under the newly created bookmark folder. The relevant code to create a new bookmark folder is discussed below:

chrome.bookmarks.create(
		{
			'title': folderName},  //Name of new folder to be created under Bookmark hierarchy 
			function(newFolder) 
			{
				/* Stuff to save filtered URLs in the newly created bookmark folder goes here	*/
			}
		);

The code to save URL under the newly created folder goes here following the explanation of the same:

for (var i = 0; i < TabsCollection.length; i++ ) {
	chrome.bookmarks.create(
		{
			'parentId'	: 	newFolder.id,
			'url' 		: 	TabsCollection[i].url,
			'title' 	: 	TabsCollection[i].title
		}
	);

"parentId" defines which is the target folder under which 'url' is to be saved.

If "title" is not given, only icon will be visible and title will be visible only when hovered over it.

View of selected Bookmarks if "title" is included:

Points of Interest

This extension can be extended to do the same task via the command issued from keyboard. To know about the same, you may refer to the link Chrome Extension - How to Use Commands and Background Scripts.