Get Url and Save It | Chrome Extension

Get URL and save it | Chrome Extension

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!

Fetch current URL and save it with a chrome extension

Your Javascript isn't actually doing anything apart from storing the value of tabs[0].url in the variable url. I suspect you are trying to use the variable "url" outside the scope of the anonymous function. This will not work as you have declared the var inside the callback.

Your next port of call might have been declaring url outside of the callback and assigning the variable inside, this also will not work as the function is asynchronous. Meaning by the time you have tried to access the variable, it is not set. See the comment I replied to yours with for a good post detailing this.

Inside your manifest.json, make sure you include a permission for 'tabs' as follows

"permissions": [
    "tabs"
],

and you can access it with

var getTab = function(tab){
    console.log(tab);
};

chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    getTab(tabs[0]);
});

Chrome Tabs API

How do I automatically save URLs in a Google Chrome extension when a user visits a specific site?

Content scripts cannot access all extension APIs, they don't have access to chrome.tabs.onUpdated (more details).

In this case, you don't need a content script, you can add that listener in the background script, this script is running the entire time the browser is open if it is not set to persistent: false.

About communication between contexts:
In this case, if you will only have a background script and a popup, you can access the background script from the popup using chrome.extension.getBackgroundPage() or, you can simply save data in the store in the background script and load it from the store when the popup is opened.
If you're looking for realtime updates, you can use a communication port or a request/response scheme (more details).

I don't know if you've already done this because you haven't shared the contents of the background script (eventPage.js) but in order to show the page action on specific pages you'll have to register it, you can find out more details about that here

How can I get the URL of the current tab from a Google Chrome extension?

Use chrome.tabs.query() like this:

chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
    let url = tabs[0].url;
    // use `url` here inside the callback because it's asynchronous!
});

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

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

It's important to note that the definition of your "current tab" may differ depending on your extension's needs.

Setting lastFocusedWindow: true in the query is appropriate when you want to access the current tab in the user's focused window (typically the topmost window).

Setting currentWindow: true allows you to get the current tab in the window where your extension's code is currently executing. For example, this might be useful if your extension creates a new window / popup (changing focus), but still wants to access tab information from the window where the extension was run.

I chose to use lastFocusedWindow: true in this example, because Google calls out cases in which currentWindow may not always be present.

You are free to further refine your tab query using any of the properties defined here: chrome.tabs.query

google chrome extension : how to get data from webpage and save it on user harddrive permanently?

If you just need to store data between browser restarts then take a look at LocalStorage API. If you actually need to create a file there is a FileSystem API, but it has its limitations and not very easy to use.

Chrome extensions are much easier to learn and create than Firefox.

Grab part of url with chrome extension

How to get the URL of the active tab

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  let url = tabs[0].url;
});

You can use localStorage or chrome.storage to store data.

Chrome APP/Extension download file from URL

See Chrome App documentation on Handling external content. It provides a good overview.

A short version:

Declare the origins you're going to access in the manifest.
Fetch the resource via XHR (or, indeed, Fetch API).
Use the response as a blob: (you can plug it into a <video src="...">, for instance).
Optionally, save the resource locally.

Download url chrome extension

The documentation for chrome.downloads clearly states that the "API is still under development. It is only available for Chrome users on the dev early release channel." (emphasis mine, currently at Chrome 23).

To use the API, you need to get a dev or canary build of Chrome (see this page for download links).

Another way to solve the problem is by not using the chrome.downloads API. I've been using the following method to create downloads, and it works like a charm (it works anywhere: Content script / background page / popup / whatever):

var a = document.createElement('a');
a.href = 'http://www.iana.org/_img/iana-logo-pageheader.png';
a.download = 'iana-logo-pageheader.png'; // Filename
a.click();                               // Trigger download

a.click() causes Chrome to follow the link.

The download attribute causes Chrome to download the target, and suggest the attribute's value as a file name in the Save As dialog.

This feature is not limited to Chrome extensions, you can also use it in an ordinary web page. Have a look at this demo: http://jsfiddle.net/dEeHF/.

How do I locally save the urls visited by an user, through a chrome extension, using JS?

To save the current tab URL to a list when opening the popup

popup.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  var tabUrl = tabs[0].url;
  chrome.storage.local.get('urlList', function(item){
    var newUrlList = item.urlList;
    newUrlList.push(tabUrl);
    console.log(newUrlList);
    chrome.storage.local.set({urlList: newUrlList});
  });
});

Explanation:
Basically, tabs.query gets a list of tabs, and it takes search terms including active:true and currentWindow:true. With those parameters it only ever returns one tab but the result is still treated as a list, so we use tabs[0]. Then you get the current tab list that you saved in storage and set the variable newUrlList to the tab list. To add a new item to the list, a better way than tablink[0] = newvalue is 'pushing' the variable to the list, with newUrlList.push(tabUrl). Then we replace the stored list with the newUrlList.

EDIT:
The code above works if urlList is already set to a list in chrome.storage, the code below makes sure urlList is initialised if it doesn't exist already

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  var tabUrl = tabs[0].url;
  chrome.storage.local.get({'urlList':[]}, function(item){
    var newUrlList = item.urlList;
    if (newUrlList.indexOf(tabUrl) === -1) {
      newUrlList.push(tabUrl);
    }
    console.log(newUrlList);
    chrome.storage.local.set({urlList: newUrlList});
  });
});

Explanation:
chrome.storage.local.get({'urlList':[]}) gets the value of urlList if it exists, but if it doesn't exist yet it initialises it to []. Also, I think you're going to add this code to a function so it only runs when you click a button in popup.html, but I added an if statement to check if the URL wasn't there so that only new URLs are added.

Also, when working with chrome.storage it's helpful for me at least to clear the storage to check it's working right: chrome.storage.local.clear();

Get Url and Save It | Chrome Extension