How to use jQuery in chrome-extension to open a link?

Question

I build my first Chrome Extensions with code and file snippets below.

manifest.json

{
"name": "Test",
"version": "0.1",
"manifest_version": 2,
"description": "First try",
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
    }
}

popup.html

<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="jquery.js"></script>
<script src="popup.js"></script>
</script>
</head>
<body>
    <input id="input1">
    <input id="input2" type="submit">
</body>
</html>

popup.js

    $(document).ready(function() {
        $('#input2').click(function(){
             alert('test');
             var whatISearch = $('#input1').val();
             //chrome.tabs.create({'url': "https://www.google.com/search?s=" + whatISearch});
             window.open("https://www.google.com/search?s=" + whatISearch);
        });
    });

As you see,what I supposed to do is opening the google search result page in a new window with user search inputs.But unfortunately it doesnt work for me,so is there anything wrong and how can I correct this?

You're referencing the element before it's parsed. Wrap the code in a `$().ready` handler, or move `popup.js` right before `
`. — Rob W, May 13 '13 at 16:26
Depends. If you want the button to always show up, use `browser_action`. If it must only be visible on some pages, use `page_action`. — Rob W, May 13 '13 at 16:32
@RobW `$().ready(function){ $('#input2').click(function(){ var whatISearch = $('#input1').val(); chrome.tabs.create({'url': "https://www.google.com/search?s=" + whatISearch}); }); });` Still not working :-( — Sam Su, May 13 '13 at 16:37
`$(function() { .... });` or `$(document).ready(function() { ... });`. See docs for http://api.jquery.com/ready. AND move the declaration of `whatISearch` inside the click handler, and use `.val()` to retrieve the value instead of `.innerText`. — Rob W, May 13 '13 at 16:39
@RobW I do as what you said,see the question which I just edited,still stuck in trouble.AND `window.open` or `chrome.tabs.create` both not working. — Sam Su, May 13 '13 at 16:50
You did not do everything as I said, you missed "move the declaration of `whatISearch` inside the click handler". — Rob W, May 13 '13 at 16:51
@RobW sorry 2 bother u so much,but I think as u said in this [question](http://stackoverflow.com/questions/12035242/loading-jquery-into-chrome-extension),the script is immediately executed as the page loaded,so the code inside the `click` handler wont work at all.I try to `alert('something')` but it didnt... — Sam Su, May 13 '13 at 17:08
I assume that you meant [this comment](http://stackoverflow.com/questions/12035242/loading-jquery-into-chrome-extension#comment16066060_12035425). In that Q&A, the code loaded before `
`, so that doesn't pose any problems. I've copy-pasted the code from your question, and it works fine. Did you reload your extension after changing the code? — Rob W, May 13 '13 at 17:16
Yes,i did.It's difficult to tell what is wrong here.Maybe caused by my labtop?I would gratitude ur time for this question.I will check the code tomorrow and would like to pick ur answer as the correct but u just write it in the comments. — Sam Su, May 13 '13 at 17:21
Probably caused by caching. Close Chrome, and start it again. That should work. And/or press Ctrl+Shift+Del and clear the cache. — Rob W, May 13 '13 at 17:23
There is no question any more, because you've edited it so often that the original issues (missing `#`, not using domready, not using `.val()`, not using `whatISearch` in the click handler) are solved. I suggest to delete the question, since the domready answer has been covered many times, and the rest is probably not of any use to anyone else. — Rob W, May 13 '13 at 17:25

score 0 · Answer 1 · answered May 13 '13 at 16:03

jQuery id selectors start with a # :

$('#input1')

A solution to check what happens is to use debugger; so that you can see what's inside your collection and whether the callback is called :

var whatISearch = $('#input1').innerText;
debugger;
$('#input2').click(function(){
     debugger;
     window.open("https://www.google.com/search?s=" + whatISearch);
});

score 0 · Accepted Answer · answered May 13 '13 at 16:08

You're missing # symbols from the beginning of the input IDs, and you're populating whatISearch before clicking input2, not when you click it. Try this...

$('#input2').click(function(){
    var whatISearch = $('#input1').val();
    window.open("https://www.google.com/search?s=" + whatISearch);
});

Also, as input1 is a text input, use val() to get the value, not innerText.

score 0 · Answer 3 · answered May 13 '13 at 16:08

0

To open a tab in a chrome extension you could use chrome.tabs.create function:

$('#input2').click(function(){
     var whatISearch = $('#input1').val();
     chrome.tabs.create({'url': "https://www.google.com/search?s=" + whatISearch});
});

answered May 13 '13 at 16:08

Kirill Ivlev

12,310
5
27
31

score 0 · Answer 4 · answered May 13 '13 at 16:10

Id selector in JQuery work with #, so make correction and use

$('#input1').innerText;

Also, you are opening a window on click of submit button so read the input1 value inside callback function only like below.

$('#input2').click(function(){
     var whatISearch = $('#input1').innerText;
     window.open("https://www.google.com/search?s=" + whatISearch);
});

How to use jQuery in chrome-extension to open a link?

4 Answers4