title: Using Browser Action Chrome Extension
body: <p>I am creating a Chrome Extension which 'cleans' the links from Google Search results and then enables the user to see all the links from the search result and let them copy any URL from the list.</p>
  
  <p>For example.</p>
  
  <p>Manifest File.</p>
  
  <pre><code>{
     "content_scripts":[
        {
           "all_frames":true,
           "js":[
              "js/jquery.min.js",
              "js/clean.js"
           ],
           "matches":[
              "http://www.google.com.au/*",
              "https://www.google.com.au/*"
           ],
           "run_at":"document_start"
        }
     ],
     "description":"Cleans URLs and allows you to copy them to the clipboard.",
     "icons":{
        "16":"img/icon-16.png",
        "32":"img/icon-32.png",
        "64":"img/icon-64.png",
        "128":"img/icon-128.png",
        "256":"img/icon-256.png"
     },
     "browser_action":{
        "default_icon":{
           "16":"img/icon-16.png"
        },
        "default_title":"Clean Google",
        "default_popup":"html/index.html"
     },
     "manifest_version":2,
     "minimum_chrome_version":"40",
     "name":"Clean Google",
     "version":"1.0",
     "version_name":"1.0"
  }
  </code></pre>
  
  <p>HTML file.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;script src="js/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/clipboard.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/urls.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form&gt;
          &lt;table&gt;
              &lt;h3&gt;Current Page&lt;/h3&gt;
              &lt;h4 class="tab"&gt;&lt;/h4&gt;
              &lt;tr&gt;
                  &lt;td class="name"&gt;URL :&lt;/td&gt;
                  &lt;td&gt;
                      &lt;p class="url"&gt;sample url&lt;/p&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="button" value="Copy URL" class="copy" data-clipboard-target=".url"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>urls JS File. (I'm not sure how to dynamically create the elements based on how many links there are)</p>
  
  <pre><code>$(document).ready(function() {
      new Clipboard(".copy");
      var a = $("a").attr("href");
      var c = a.length;
      $("h4").text(window.location.href);
      $(".url").text(c);
  });
  </code></pre>
  
  <p>Image of current Extension.</p>
  
  <p><a href="https://i.stack.imgur.com/1tLcV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1tLcV.png" alt="enter image description here"></a></p>
  
  <p>I hope this helps you understand what I want to achieve. Any help would be greatly appreciated.</p>
  
  <p>Thanks :)</p>