Get URL and save it | Chrome Extension

Question

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:

Something like bookmarks :)

Note: All answers here are suggesting to use `chrome.tabs.getSelected`. This API method has been deprecated though, you have to use `chrome.tabs.query` instead - See [How to get the currently opened tab's URL in my page action popup?](http://stackoverflow.com/questions/10413911/how-to-get-the-currently-opened-tabs-url-in-my-page-action-popup/10417327#10417327) — Rob W, Aug 29 '12 at 09:56

score 51 · Accepted Answer · edited Jun 02 '14 at 15:08

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!

Very helpful code to start with, I'll do the storage, thanks :) — Jamie, May 09 '10 at 15:09
Take a look at HTML5 webdatabase (it is better for your scenario) — Mohamed Mansour, May 09 '10 at 23:22
The above script only works if you have the right permission set in the manifest: "permissions": [ "tabs" ] — ina, Jun 22 '12 at 05:17
As of **manifest_version** 2, the above code will not work. All Scripts should be placed in a separate file & then include it on the main html. New version clearly states that **Inline scripts and event handlers disallowed** — nbk, Dec 01 '12 at 09:11
i always get the URL "chrome://extensions/" what is the problem ?? i did put "tabs" in "permissions" in json ... — Tarek, Jul 20 '13 at 08:56

score 14 · Answer 2 · edited Jun 20 '20 at 09:12

I wanted to update this answer, as the API has changed.

The chrome.tabs.getSelected() method is now deprecated. The recommended way of getting the URL of the current tab is to use chrome.tabs.query():

chrome.tabs.query({'active': true}, function (tabs) {
    var url = tabs[0].url;
});

This still requires that you request access to the chrome.tabs API in your extension manifest:

"permissions": [ ...
   "tabs"
]

You can read more about the deprecation here: chrome.tabs.getSelected()

Hope this helps!

score 10 · Answer 3 · edited Nov 14 '11 at 17:04

to get the current url, you need to get the current tab and then extract all the paramenters.

for getting the current tab use, chrome.tabs.getSelected(). Then, to fetch the parameters from the tab object, refer tabs api

your code snippet should look like this,

chrome.tabs.getSelected(null, function(tab) {
  //properties of tab object
  tabId = tab.id;
  tabUrl = tab.url;

  //rest of the save functionality.
});

you'll also need to declare the "tabs" permission in your extension's manifest to use the tabs API. For example

{
  "name": "My extension",
  ...
  "permissions": [
    "tabs"
  ],
  ...
}

Get URL and save it | Chrome Extension

3 Answers3

Linked