title: Using Jquery to change field value in webpage using Chrome Extension
body: <p>I am attempting to change the value of a field on a page with a Google Chrome extension using JQuery</p>
  
  <p>My Code are as follows,</p>
  
  <p>manifest.json</p>
  
  <pre><code>{
    "manifest_version": 2,
  
    "name": "One-click Kittens",
    "description": "This extension demonstrates a browser action with kittens.",
    "version": "1.0",
    "background": { "scripts": ["jquery.js"] },
    "permissions": [
    "tabs",
    "http://*/"
    ],
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    }
  }
  </code></pre>
  
  <p>popup.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Getting Started Extension's Popup&lt;/title&gt;
    &lt;style&gt;
    body {
      min-width: 200px;
      overflow-x: hidden;
    }
    &lt;/style&gt;
  
      &lt;!--
        - JavaScript and HTML must be in separate files: see our Content Security
        - Policy documentation[1] for details and explanation.
        -
        - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
      --&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" id="watch_list"&gt;Watch&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="assets"&gt;Assets
        &lt;/li&gt;
        &lt;li id="liab"&gt;Liabilities
        &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>and lastly
  popup.js</p>
  
  <pre><code>$(document).ready($(function(){
    $('#watch_list').click(function(){
      $('#name').val("Hello");
    })
  
  }));
  </code></pre>
  
  <p>My issue is when the link Watch is clicked its suppose to fill in the web page form with ID name with the word "Hello" but nothing seems to work.</p>
  
  <p>Any help would be greatly appreciated! Thank you for reading.</p>