My first Google Chrome extension (Get all URLs from Google Chrome tabs)
As a good internet researcher I always have hundreds of tabs opened in my Chrome navigator and sometimes I find a bit of chore to copy and paste all the URL that I have done a research on and that any other day I would be using again. So, that's my extension about, to display in a pop up window all the url's from all tabs to then copy them without problems (the correct name would be [search purposes] -> Get all URLs from Google Chrome tabs).
I have been struggling to write a little tool using Delphi, but it only works with Internet explorer and Mozilla firefox, so I thought it could be great to give chrome extensions a try.
It is quite easy to develop and debug using all the development tools available from the navigator itself. As in the following example, I have opened 3 new tabs with the www.google.es URL, and if we click the extension button, will get a pop up list with the URLs from all tabs:
The source code is as follows:
manifest.json:
{
"name": "Get All URL's Extension by Jordi Corbilla",
"version": "1.0",
"description": "Extension to display all the URL's from all TABs.",
"browser_action": {
"default_icon": "icon.ico",
"popup": "urlList.html"
},
"permissions": [
"tabs"
],
"icons" : {
"48" : "icon.ico",
"128" : "icon.ico"
}
}
urlList.html:
<!DOCTYPE>
<!--
* Copyright (c) 2011 Jordi Corbilla. All rights reserved.
-->
<html>
<head>
<script>
chrome.tabs.getAllInWindow(null, function(tabs) {
tabs.forEach(function(tab){
myFunction(tab.url);
});
});
function myFunction(tablink) {
console.log(tablink);
var oNewNode = document.createElement("LI");
urlList.appendChild(oNewNode);
oNewNode.innerText=tablink;
}
</script>
</head>
<body>
<div>URL List</div>
<ul ID = urlList>
</ul>
</body>
</html>
You can download the extension from here: URLJCExtension.zip. To install, you only need to unzip the file and then go to chrome://extensions/, expand developer mode and load my extension (from the unzipped folder):
As the extension uses the console log method, you can see all the links in the console (just for debug purposes, but it's really good to have a go on it).
Just right click on the extension icon and then "Inspect Pop-up" and you'll see the following window with the current list of urls:
Enjoy the extension!.
Related links:
Just right click on the extension icon and then "Inspect Pop-up" and you'll see the following window with the current list of urls:
Enjoy the extension!.
Related links:
Thanks.. the script was really helpful. Im working on a similar script where I can send youtube urls to my media center at home for downloading.
ReplyDeletethis provided a great starting point.
Hi Arf,
ReplyDeleteI'm glad you liked. I'm using it a lot and it is really helpful.
Jordi
Thanks for taking the time to share your thoughts.This is a very good blog i have got here!! I'm definitely going to bookmark it!
ReplyDeleteThanks!
ReplyDeleteThanks!!!!!!!! you are Problem Solver
ReplyDeleteThanks!
Deleteit is not working for me.please update post
ReplyDeleteHi,
DeleteWhy is not working for you?. I have tested it until the latest version of Chrome and it works like a charm. Did you follow all the steps to install it?
Downloaded the zip, installed into extensions, added manifest_version as requested by chrome, reload, chrome seems happy, your menu option to get all urls is disabled. Any ideas?
ReplyDeleteHi Manny,
DeleteIt seems that google chrome has stopped running non-web store extensions. I spent some time playing with my extension and it no longer works. I fixed the manifest to update it to the latest version, but once is installed it appears as disabled as you mentioned. The only way for this to work is to publish the extension on the web and download it through the store. I might have to do that then.
The new code for the manifest is as follows:
{
"name": "Get All URL's Extension by Jordi Corbilla",
"version": "1.0",
"description": "Extension to display all the URL's from all TABs.",
"browser_action": {
"default_icon": "icon.ico",
"popup": "urlList.html"
},
"permissions": [
"tabs"
],
"icons" : {
"48" : "icon.ico",
"128" : "icon.ico"
},
"manifest_version": 2
}
Jordi
its not working for me either :( inspect popup is disabled for this extension idk why
ReplyDeleteHi Saad,
DeleteYes, now to make it work you need to get a developer license.
Regards,
Jordi