Using Jquery to change field value in webpage using Chrome Extension

Question

I am attempting to change the value of a field on a page with a Google Chrome extension using JQuery

My Code are as follows,

manifest.json

{
  "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"
  }
}

popup.html

<!doctype html>
<html>
<head>
  <title>Getting Started Extension's Popup</title>
  <style>
  body {
    min-width: 200px;
    overflow-x: hidden;
  }
  </style>

    <!--
      - 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
    -->
    <script src="jquery.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <ul>
      <li><a href="#" id="watch_list">Watch</a>
      </li>
      <li id="assets">Assets
      </li>
      <li id="liab">Liabilities
      </li>
    </ul>

  </body>
  </html>

and lastly popup.js

$(document).ready($(function(){
  $('#watch_list').click(function(){
    $('#name').val("Hello");
  })

}));

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.

Any help would be greatly appreciated! Thank you for reading.

Answer 1

This is probably because you popup.html does not have element with id "name". Or do you use different html in your extension?

Using Jquery to change field value in webpage using Chrome Extension

Question

1 answers

solution1
0 2013-09-13 13:16:43

Using Jquery to change field value in webpage using Chrome Extension

Question

1 answers

solution1 0 2013-09-13 13:16:43

solution1
0 2013-09-13 13:16:43