Question

我使用下面的代码和文件片段构建了我的第一个Chrome扩展程序。

的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);
        });
    });

如你所见，我应该做的是在一个带有用户搜索输入的新窗口中打开谷歌搜索结果页面。但不幸的是它对我不起作用，所以有什么不对的，我该如何纠正？

Answer 1

jQuery id选择器以#：

开头

$('#input1')

检查发生了什么的解决方案是使用debugger;，以便您可以看到集合中的内容以及是否调用了回调：

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

Answer 2

您在输入ID的开头缺少＃符号，并且在点击whatISearch之前填充input2，而不是在您点击它时。试试这个......

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

此外，由于input1是文字输入，请使用val()获取值，而不是innerText。

Answer 3

要在Chrome扩展程序中打开标签，您可以使用chrome.tabs.create功能：

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

Answer 4

JQuery中的Id选择器与＃一起使用，因此请进行纠正并使用

$('#input1').innerText;

此外，您在点击提交按钮时打开一个窗口，因此只读取回调函数内的input1值，如下所示。

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

如何在chrome-extension中使用jQuery打开链接？

4 个答案: