Insert variables into a URL

Question

I'm trying to add a "share" feature to (my own) Google Chrome Extension but I've stumbled across issues with variables and URLs (I'm useless when it comes to JavaScript).

My code is below, if anyone could guide me in where to go I would be heavily grateful.

<script>
    chrome.tabs.getSelected(null, function(tab) {
        document.getElementById('longLink').value = tab.url;
      });
      var shareURL = document.getElementById('longLink')
</script>
<a href="https://twitter.com/?status=" + shareURL + "&choe=UTF-8" target="_blank">Tweet This</a>

I've also tried

<a href="https://twitter.com/?status=" + encodeURIComponent(shareURL); + "&choe=UTF-8" target="_blank">Tweet This</a>

Finally, I tried this method

<script>
  function tweet() {
    var twitter='http://twitter.com/?status='+encodeURIComponent(tab.url);
    chrome.tabs.create({url: twitter});
  }
</script>
<a onClick="tweet()" href="" target="_blank">Tweet</a>

and then? question seems incomplete. what error is given, what is occurred, what is expected? — ahmet alp balkan, May 08 '11 at 18:13
It loads the webpage without the URL, it should open the URL with the link e.g. https://twitter.com?status=example.com however it loads "status?=" (no link) — itsdaniel0, May 08 '11 at 18:15

Mike Samuel · Accepted Answer · 2011-05-09T20:38:47.853

0

// Takes a url, a GET parameter name and value and returns
// the given URL but with the given parameter at the end of
// the query portion.
function urlWithParameter(url, name, value) {
  // Find the fragment since the query ends where the fragment starts.
  var fragmentStart = url.indexOf('#');
  if (fragmentStart < 0) { fragmentStart = url.length; }
  var urlBeforeFragment = url.substring(0, fragmentStart);
  // If there is no query (no '?' in URL) then start the parameter with
  // a '?' to create a query.  Otherwise separate the parameter from
  // the existing query with a '&'.
  // We use encodeURIComponent which assumes UTF-8 to escapes special URL
  // characters like '#', '&', '?', '%', and '='.
  // It assumes UTF-8.  Any replacement that does not assume UTF-8 must escape
  // at least the code-points listed above.
  return urlBeforeFragment + (urlBeforeFragment.indexOf('?') < 0 ? '?' : '&')
      + encodeURIComponent(name) + '=' + encodeURIComponent(value)
      + url.substring(fragmentStart);
}

can be used thus

<script>/* the function above */</script>
<a onclick="this.href = urlWithParameter('http://twitter.com/', 'status', tab.url)" href="#">...</a>

to do what you want while still respecting the link target implied by <base target="..."> and still displaying a useful URL on hover.

Alternatively, if you only have one parameter you need to manipulate, then you can use your earlier solution thus

<a onclick="this.href = 'http://twitter.com/?status=' + encodeURIComponent(tab.url)" href="http://twitter.com/">...</a>

EDIT: To get it working with the async chrome accessors, try the following:

<script>
function redirectWithSelectedTabUrl(link) {
  chrome.tabs.getSelected(null, function (tab) {
    window.location.href = tab.url
        ? link.href + "?status=" + encodeURIComponent(tab.url)
        : link.href;
  };
  return false;
}
</script>

<a href="http://twitter.com/" onclick="return redirectWithSelectedTabUrl(this)">...</a>

This is simple and works across a wide range of browsers, but it will ignore the target and may not send along referrer headers.

edited May 09 '11 at 20:38

answered May 08 '11 at 18:08

Mike Samuel

118,113
30
216
245

@MikeSamuel Okay, telling no lies, this piece of coding has completely lost me. I do not understand any of it, as stated in the question I am useless with JavaScript, but from my understanding it's the only way to achieve what I want to do. – itsdaniel0 May 08 '11 at 18:25
@MikeSamuel Thanks, worked great! Now I've just run into of the status ended up as "null" (or nothing at all). – itsdaniel0 May 08 '11 at 19:58
` – Mike Samuel May 08 '11 at 20:49
I still couldn't get it to work, it just opens the extension popup window in a new tab now, I think it's an issue with tab.url somewhere. I'll check in the morning or something, thanks for all your help though! :-) – itsdaniel0 May 08 '11 at 21:01
After working with Chrome Developer Tools I noticed I'm given this following error - Any idea's from now? It's had me well and truly stumped `Uncaught ReferenceError: tab is not defined (anonymous function)popup.html:44 onclickpopup` – itsdaniel0 May 09 '11 at 06:09
The example text shows a couple different ways of computing `shareUrl`. Is the tab URL supposed to be computed by looking at the result of `chrome.tabs.getSelected()`? – Mike Samuel May 09 '11 at 12:27
I'm using `chrome.tabs.getSelected(null, function(tab) { tab = tab.id; tabUrl = tab.url; var shareURL = tab.url; });` Which as shown in this example http://stackoverflow.com/questions/1979583/how-can-i-get-the-url-for-a-google-chrome-tab gets the URL, so I cannot understand what is the issue. Surely I must be missing something simple? – itsdaniel0 May 09 '11 at 15:02
Ok. The fix isn't super simple because `chrome.tabs.getSelected` is async, but I will edit with a solution. – Mike Samuel May 09 '11 at 19:23
Just to update you, I've minified some scripts together and have formed this script. (There are two vars for testing, only needs to be one) `chrome.tabs.getSelected(null, function(tab) { document.getElementById('longLink').value = tab.url; }); var shareURL = document.getElementById('longLink') var sharer = tab.url` shareURL results in "null", sharer results in "undefined". If needed I can send the extension (files) over :) – itsdaniel0 May 09 '11 at 19:48
Good news is, the updated code works, the bad news is since as it does ignore the target attribute it cannot open the link (since it's in a Chrome extension popup window). I guess I'll have to add a `chrome.windows.create` function in somewhere (I also tried `document.getElementById("myShare").target = "_blank";`) – itsdaniel0 May 09 '11 at 21:03

Insert variables into a URL

1 Answers1