Using Jquery to change field value in webpage using Chrome Extension
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.
No comments:
Post a Comment