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

【问题标题】：How to use jQuery in chrome-extension to open a link?如何在 chrome-extension 中使用 jQuery 打开链接？
【发布时间】：2013-05-13 16:02:56
【问题描述】：

我用下面的代码和文件 sn-ps 构建了我的第一个 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);
        });
    });

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

【问题讨论】：

很抱歉错过了选择器# :-)
您在解析之前引用了该元素。将代码包装在 $().ready 处理程序中，或将 popup.js 移动到 </body> 之前。
@RobW 我应该选择 browser_action 还是 page_action ？
视情况而定。如果您希望按钮始终显示，请使用browser_action。如果它必须只在某些页面上可见，请使用page_action。
没有问题了，因为你编辑的太频繁了，原来的问题（缺少#，没有使用domready，没有使用.val()，没有使用whatISearch单击处理程序）已解决。我建议删除这个问题，因为 domready 的答案已经被覆盖了很多次，其余的可能对其他人没有任何用处。

标签： jquery google-chrome google-chrome-extension manifest

【解决方案1】：

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

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

另外，由于input1 是文本输入，所以使用val() 获取值，而不是innerText。

【讨论】：

【解决方案2】：

jQuery id 选择器以 # 开头：

$('#input1')

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

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

【讨论】：

【解决方案3】：

要在 chrome 扩展程序中打开选项卡，您可以使用 chrome.tabs.create 函数：

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

【讨论】：

【解决方案4】：

JQuery 中的 ID 选择器与 # 一起使用，因此请更正并使用

$('#input1').innerText;

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

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

【讨论】：