Yet another bookmarks plugin

**memristor** · 09-12-2010, 02:36 PM

Hello All,

I have just downloaded Chrome and was trying to write an extension that would appear as a button on the toolbar and display all the bookmarks in the popup when clicked.

HTML and Javascript are pretty much alien to me so i was wondering if someone could give me some guidance in writing this extension.

I have got a button displaying on the tool bar and my pop.html is empty. I know i need to use chrome.bookmarks module functions in a seperate Javascript file to be called from popup.html or within the script block( <script></script> ) inside popup.html.

What i really don't know is how would i populate or write the results returned from my script in the html body of popup.html.

1) On click call the script or execute the script block (probably in header of popup.html?)

2) Populate or assign the results from the script into the body of popup.html.

I know for most of you this must be trivial but i really don't have any html/javascript background so my apologies in advance for this dumb post. Any help is appreciated including links that can walk me through html/javascript programming.

Thanks!

**memristor** · 09-16-2010, 03:52 AM

Caused me a lot of heartburn but i have something working now...

Here is my Manifest file
manifest.json:

Code:

{
  "name": "Favorite Links",
  "version": "1.0",
  "description": "Favorite Links button for toolbar",
  "icons": { "16" : "icon16.png",
             "48" : "icon48.png",
             "128": "icon128.png" },
  
  "browser_action": {
    "default_icon": "icon16.png",
    "default_title": "Favorite Links",
    "default_popup": "FavoriteLinksPopup.html"
  },


  "permissions": [     
                   "bookmarks",
                   "tabs" 
                   
                 ]
}

here is the html file
FavoriteLinksPopup.html:

Code:

<html>
<head>
<style>
body {
  
  min-width:250px;
  overflow-x:hidden;
  font-family:"arial";
  font-size:70%;
  line-height:80%;
}
img
{
vertical-align:text-bottom;
}
</style>
<script src="FavoriteLinks.js"></script>
</head>
<body id="links-page">
</body>
</html>

and finally the javascript file
FavoriteLinks.js:

Code:

var Links_String='';
var foldericon="folder.png";
var linkicon="link.png"
chrome.bookmarks.getTree( function(BookmarkTree){
                                               
 traverseTree(BookmarkTree);
// console.log(Links_String);
 printBookmarks(Links_String);
} 

);






function traverseTree(BookmarkTreeNode){

var childTreeNode;
var i;
    for (i = 0; i < BookmarkTreeNode.length; i++) {
     
      childTreeNode = BookmarkTreeNode[i].children;
      appendLinks(BookmarkTreeNode[i]);
  
         
      if (childTreeNode != null && childTreeNode.length > 0)
      
      {traverseTree(childTreeNode);}
      
            
    }



};


function appendLinks(BookmarkLeafNode){
if(!BookmarkLeafNode.title)
{return;}
else{
var title = BookmarkLeafNode.title;
if(title.length > 34)
{title = title.substr(0,35)+'...';}

if(!BookmarkLeafNode.url)
{
//Links_String =Links_String+'<br>'+'<br/>'+'<br>'+'<b>'+title+'</b>'+'<br/>';

 
Links_String =Links_String+'<br>'+'<br/>'+' <img src='+foldericon+' />'+title;
//console.log(Links_String);
}

else
{
//Links_String =Links_String+'<br>'+title+'<br/>'; 


 
Links_String =Links_String+'<br>'+' <img src='+linkicon+' />'+'<a href='+BookmarkLeafNode.url+'  onClick=openBookmark('+'\"'+BookmarkLeafNode.url+'\"'+');>'+title+'</a>'+'<br/>';
}



//console.log(Links_String);
}
};

function printBookmarks(Links_String){
document.getElementById('links-page').innerHTML = Links_String; 
};

function openBookmark(BookmarkUrl){

//alert(BookmarkUrl);

chrome.tabs.getSelected( null, 
                         function (SelectedTab){
                                             
                                             //    alert('selectedTab id '+SelectedTab.id); 

                                                 chrome.tabs.update(SelectedTab.id,{url: BookmarkUrl ,selected: true}); 
                                                  

                           
                                                }
                   
                       );

}

figuring out how to traverse the tree was real pita. console.log() helps a lot with debugging.
Google Chrome's developer documentation and tutorials suck!

**PAEz** · 09-16-2010, 07:38 AM

Well done on what you've done so far, I find doing stuff like that hard myself.
As far as the docs sucking, I all ways thought they where OK, much better than Ive seen for some things. No offense but your problems seemed to be more with a lack on JS as in how to traverse the tree (would stump me a little aswell), but you seem to have overcome this so well done.
One thing the docs dont mention that you may find very usefull is how to get the favicon for the bookmark entries, you can do this using....
var favicon = 'chrome://favicon/' + url;
...this will only work for urls that chrome has the favicon for, but that should be most of them and its nice and quick compared to getting them yourself. Plus if it doesnt have an icon for it it returns an empty page icon.
If you ever have problems with something I think its all ways a good idea to go look what the competition is doing, that piece of code comes from Neat Bookmarks.....
https://chrome.google.com/extensions...pjkfbijifaainp
..... neat.js line 94 . I really like this extension, it works, has nice features and its quick.
Good luck on your endeavours, looks like you'll do fine

**memristor** · 09-16-2010, 04:34 PM

Thanks for your kind and encouraging words PAEz!

I have mainly programmed in .NET technologies and dealt with enterprise database technologies so may be i am expecting a little too much from Chrome documentation.

Surprisingly enough, JS and HTML learning curve has been very smooth thanks to incredible amount of examples on the web. In almost all cases i was able to figure out answers by just visiting www.w3schools.com.
What i found frustrating was the gap between the 'hello world' type tutorials and the samples on Google dev site. They raise more questions than answers. For example, searching for chrome.bookmarks.getTree yeilds very little and whatever you see cannot be corroborated with existing dev documentation. I understand Chrome is a new browser but i thought it is getting some serious attention from developers so thought maybe there will be more help on web than i actually found.

I will try to document this extension development once i have something reasonable and post it here. Posted the code here so at least next time some beginner is searching, they can find some working example on Google

Thats an excellent suggestion about favicons. See thats the kind of stuff that is so hard to get to. I was thinking about how to do that and was petrified at the effort that would require to implement something like this. I will try to go through other extensions in future and thats a good suggestion.

By the way just realized that the links that show in popup from my extension don't really lead you anywhere. I guess that would require implementing onclick for these links.

I will keep updating this thread with any progress that i make!

Thanks again.

**PAEz** · 09-17-2010, 07:18 AM

Please feel free to keep us updated, Im interested.

Have you joined the google group for chrome extensions?......
http://groups.google.com/a/chromium....ensions/topics
.....youll find some great help there and they'll prolly be interested in your notes on the docs, especially if you help write them.

**memristor** · 09-17-2010, 02:08 PM

Making links work took some effort. Had to restart browser few times. I have updated my original post code blocks with latest version of my code.

I have the whole extension(all the files and icons) in zip format but i guess cannot add attachments here. Will try to upload to an external location and copy the link here.

Here is the download link

http://www.megaupload.com/?d=APIVQEQ9

LinkBack

Thread Tools

Display

Yet another bookmarks plugin

Similar Threads

Integrate Chrome Bookmarks with Google Bookmarks

Looking for multirow bookmarks plugin

When opens the bookmarks panel, bookmarks are always expanded?

Google Bookmarks To Browser Bookmarks Converter

Chrome plugin for Google Toolbar Bookmarks

Posting Permissions