Вставьте переменные в URL

Question

Я пытаюсь добавить функцию "поделиться" в (свое) расширение Google Chrome, но я наткнулся на проблемы с переменными и URL-адресами (я бесполезен, когда дело доходит до JavaScript).

Мой код приведен ниже, если кто-нибудь может подсказать мне, куда идти, я был бы очень благодарен.

<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>

Я также пытался

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

Наконец, я попробовал этот метод

<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>

Answer 1

// 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);
}

можно использовать таким образом

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

делать то, что вы хотите, при этом уважая ссылку target, подразумеваемую <base target="...">, и по-прежнему отображая полезный URL при наведении курсора.

В качестве альтернативы, если у вас есть только один параметр, которым вам нужно манипулировать, вы можете использовать свое более раннее решение, таким образом

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

РЕДАКТИРОВАТЬ: Чтобы заставить его работать с асинхронными хромированными аксессорами, попробуйте следующее:

<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>

Это просто и работает во многих браузерах, но оно игнорирует target и может не отправлять заголовки реферера.