Insérer des variables dans une URL

Question

J'essaie d'ajouter une fonctionnalité "partage" à (mon propre) Google Chrome Extension mais j'ai trébuché sur des problèmes avec des variables et des URL (je suis inutile quand il s'agit de JavaScript).

Mon code est ci-dessous, si quelqu'un pouvait me guider dans où aller, je serais très reconnaissant.

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

J'ai aussi essayé

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

Enfin, j'ai essayé cette méthode

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

peut être utilisé ainsi

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

pour faire ce que vous voulez tout en respectant le lien target implicite par <base target="..."> et affichant toujours une URL utile sur hover.

Sinon, si vous avez seulement un paramètre que vous devez manipuler, vous pouvez utiliser votre solution plus tôt ainsi

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

EDIT: Pour le faire fonctionner avec les accesseurs de chrome async, essayez ce qui suit:

Ceci est simple et fonctionne sur un large éventail de navigateurs, mais il ignore le target et ne peut pas envoyer le long des en-têtes de référent.