Fetch current URL and save it with a chrome extension

Question

I am trying to make a chrome button that allows a user to save their current URL. Later I will want to send that url to a website's database when they log back in, but that is beyond my current task.

The functionality that I want can be summed up in this image:

I found this question asked at the URL below, but the rules for chrome extensions have changed and that code no longer works. Get URL and save it | Chrome Extension

One comment says: "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. "

I couldn't figure out how to implement what this person suggested.

What I have so far:

popup.hmtl

<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.query({'active': true}, function (tabs) {
    var url = tabs[0].url;
});

manifest:

{
  "name": "URL Saver",
  "version": "1.1",
  "description": "A browser action that saves the url of the current open tab",
  "permissions": [
    "tabs"
  ],
  "browser_action": {
      "default_title": "URL CATCHER",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

Now, if I click the button, I just get a "Loading ... _______" message

That answer has been updated since that comment. It no longer has the problem with manifest_version 2. — Teepeemm, Sep 29 '15 at 17:26
I don't quite understand what you _expect_ the code to do. Why assigning something to a (local!) variable would anyhow change the page. — Xan, Sep 30 '15 at 00:18
The functionality can't be summed up in that image. Please explain what you want to happen and when. — Teepeemm, Sep 30 '15 at 13:52
I used the answer below and it helped me get far enough. I was not asking for a finished product, I just wanted to save it as a local variable, then I would find another method for pushing it to either local storage or directly to my site's API — Rorschach, Sep 30 '15 at 17:24

MeHaslam · Accepted Answer · 2015-09-30T09:52:43.847

1

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

edited Sep 30 '15 at 09:52

answered Sep 29 '15 at 17:18

MeHaslam

36
4

I have edited the post and included what I have so far. It includes your suggestion, but still does not function properly. – Rorschach Sep 29 '15 at 17:36
1

Try the edited code. Have a look at this great [post](http://stackoverflow.com/questions/11688171/after-calling-chrome-tabs-query-the-results-are-not-available/11689804#11689804) explaining why your code wasn't working. – MeHaslam Sep 29 '15 at 21:42
This could be done with the activeTab permission instead, but that is unrelated to OP not explaining what they want to do with the url. – Teepeemm Sep 30 '15 at 13:51

Fetch current URL and save it with a chrome extension

1 Answers1