This will help you:
Place jQuery to your
<head>
or in the end of your page, but before your code.<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
Then rewrite your code to use a
keypress
event:$(document).ready(function() { $('#url').keypress(function() { $('.target').attr('href', this.value) }) });
FYI: change
event will happen when you changed a value of your input and set the focus out of it. So if you type an url and place your mouse cursor on the link and press it, change
event will trigger AFTER your click. So be careful with those events.
UPDATE: I just saw that you're doing an extension for GC. The best practices tell us to divide application by layers' aim. HTML and JS should be separated.
In your manifest.json
you have to add
"js": ["jquery.js", "content_script.js"]
and move your JavaScript logic from HTML file to the content_script.js.