title: Copy hyperlink to clipboard - generated string won't copy but new one will
body: <p>I often want to save a whole group of links at a time with the url and title formatted into a single hyperlink
  I'm working on a chrome extension that will copy the formatted url and title</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "name": "Copy Tabs",
    "version": "0.1",
    "description": "Creates a keyboard shortcut (Ctrl + Shift + C) which copies links for selected tabs",
    "permissions": [
      "tabs",
      "clipboardWrite",
      "clipboardRead"
    ],
    "background": {
      "persistent": false,
      "scripts": ["jquery.js","background.js"]
    },
    "commands": {
      "copy-tabs": {
        "suggested_key": { "default": "Ctrl+Shift+C" },
        "description": "Copy Selected Tab Links"
      }
    },
    "manifest_version": 2
  }
  </code></pre>
  
  <p><strong>background.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>chrome.commands.onCommand.addListener(function(command) {
    if (command == "copy-tabs") {
      // declare text element
      var text = "";
  
      // only look for highlighted tabs in the current window
      queryInfo = new Object();
      queryInfo.highlighted  = true;
      queryInfo.currentWindow  = true;
  
      // get tabs
      chrome.tabs.query(queryInfo, function(tabs) {
          // loop through tab results
          for (var i = 0; i &lt; tabs.length; i++) {
              //add hyperlink to text
              text += "&lt;a href='" + tabs[i].url + "'&gt;" + tabs[i].title + "&lt;/a&gt;";
          }
      });
  
      //copy text to clipboard
      copyTextToClipboard(text);
    }
  });
  </code></pre>
  
  <p><strong>copyTextToClipboard</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>// Copy provided text to the clipboard.
  function copyTextToClipboard(text) {
      var copyFrom = $('&lt;textarea/&gt;');
      copyFrom.text(text);
      $('body').append(copyFrom);
      copyFrom.select();
      document.execCommand('copy');
      copyFrom.remove();
  }
  </code></pre>
  
  <p><strong>Issues:</strong></p>
  
  <p>I have two problems:
  When I construct the link from the tab properties, the copy won't actually work, but if I manually specify that <code>text = "&lt;a href='www.google.com'&gt;Google&lt;/a&gt;";</code> everything works fine.  In the developer tools, the inline tool tip looks like the text is properly formed, but the local variable window looks like the text variable is still set as <code>""</code>.</p>
  
  <p><img src="https://i.stack.imgur.com/97KUb.png" alt="Inline Watch">
  <img src="https://i.stack.imgur.com/QXch0.png" alt="Scope Variables"></p>
  
  <p>Secondly, when it does paste, i don't get nice formatting.  </p>
  
  <p>It just looks like this:</p>
  
  <ul>
  <li><code>&lt;a href='www.google.com'&gt;Google&lt;/a&gt;</code></li>
  </ul>
  
  <p>But what I want is this:</p>
  
  <ul>
  <li><a href="http://www.google.com" rel="nofollow noreferrer">Google</a></li>
  </ul>