Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get URL and save it | Chrome Extension

Basically on my window (when you click the icon) it should open and show the URL of the tab and next to it I want it to say "Save", it will save it to the localStorage, and to be displayed below into the saved links area.

Like this:

alt text

Something like bookmarks :)

like image 490
Jamie Avatar asked May 09 '10 14:05

Jamie


People also ask

How do I copy a URL from all open tabs in my browser?

Press Ctrl+C on Windows and Linux or Command+C on Mac to copy all your bookmarks. You can also right-click the list of selected bookmarks and choose “Copy.” Now, open the program where you want to paste all your open tab URLs (such as Notepad or TextEdit).

How do I copy the URL address of all open tabs in Chrome?

Press Ctrl + a on Windows/Linux or ⌘ + a on Mac to select all bookmarks. Press Ctrl + c on Windows/Linux or ⌘ + c on Mac to copy all urls (and only urls).


1 Answers

If you want to do something like that, you easily do that with the Chrome extensions API. The areas to look for are:

  • Chrome Extension Tab API
  • Chrome Extension Browser Action API
  • HTML5 localStorage or HTML5 webdatabase

Now the first step is to create your popup.html file and remember that it is transient, that is, it only lives when you click on the browser action, then dies if it exits (closes). What I am trying to say, if you have a lot of computation and you want it to happen in the background and happen even if the popup is closed, move everything to the background page. And in your popup, you can easily access the background page by using chrome.extension.getBackgroundPage()

Within your popup.html, you would need to get the URL of the current tab, to do so, the Tab API has a "getSelected" function that allows you to get the Tab object for the selected Tab.

So something like this:

popup.html

<html> <body> <p id="currentLink">Loading ...</p> <hr /> <ul id="savedLinks"></ul> <script type="text/javascript" src="popup.js"></script> </body> </html> 

popup.js

chrome.tabs.getSelected(null, function(tab) {     document.getElementById('currentLink').innerHTML = tab.url; }); 

The reason why you cannot place JavaScript code in the HTML file is of Chrome's limitation to protect its users of JavaScript attacks:

Inline scripts and event handlers disallowed

Now that will allow you to show the Url in the popup for the current page as a browser action. Your next step is to use simple HTML5 features such as localStorage, or Webdatabase (in my opinion that will be better). To store the saved pages into, then you can render them on the savedLinks page same as I have done for the currentLink.

Good Luck!

like image 197
Mohamed Mansour Avatar answered Oct 04 '22 03:10

Mohamed Mansour