如何创建chrome扩展名以打开由用户输入生成的特定网址？

Question

我想做一个chrome扩展名，它可以打开从用户输入生成的特定URL。 用户输入一个或两个单词，然后当用户单击“提交”按钮时，该用户将被重定向到“ hxxps：//webaddress.com/input1”或“ hxxps：//webaddress.com/input2”或“ hxxps： //webaddress.com/input1/input2”。

这是我的popup.html代码，

<!DOCTYPE html>

<html>
  <body style="width: 300px">
    <div>input1:<input type="text" id="input1"></input></div>
    <div>input2:<input type="text" id="input2"></input></div>
    <button id="submit">submit</button>
    <script type="text/javascript" src="popup.js"></script>
  </body>
</html>

这是我的popup.js，

document.getElementById('submit').addEventListener('click',function(){
    var input1= document.getElementById('input1').value;
    var input2= document.getElementById('input1').value;
    chrome.tabs.update(tab.id, {url: "https://webaddress.com/"+input1+"/"+input2});
});

但是它不起作用。 有人可以帮助我使它正常工作吗？ 谢谢您的帮助。

Answer 1

您需要对代码更加小心。

var input1= document.getElementById('input1').value;
var input2= document.getElementById('input1').value; // input1 again? Copy-paste error

和：

// tab.id? What's that? Where is it defined? And as such, this produces an exception:
chrome.tabs.update(tab.id, {url: "https://webaddress.com/"+input1+"/"+input2});

首先，学习如何调试代码。 甚至在docs中都有一个教程。 因此，在发生异常情况（使您完全停止执行）的情况下（如您的情况），您将了解它并了解一些细节。
接下来，请阅读所使用功能的文档：

chrome.tabs.update(integer tabId, object updateProperties, function callback)

修改选项卡的属性。 未修改updateProperties中未指定的属性。

整数（可选） tabId
默认为当前窗口的选定选项卡。

据推测，您正在尝试更新当前选项卡。 在这种情况下，您根本不需要提供tabId （它被标记为可选）：
```
 chrome.tabs.update({url: "https://webaddress.com/"+input1+"/"+input2}); 
```
编码时要小心。 当您假装向其他人逐行解释代码时，有一种叫做橡皮鸭调试的事情： “并且该行应该执行X”等。您将以这种方式捕获第一个错误。 当然，还需要测试。
作为程序员，您必须考虑边缘情况。 如果input1为空怎么办？ 它将变成"https://webaddress.com//something" ，这不好。 您需要添加逻辑来防止这种情况。 这留给读者练习。
您还应该考虑用户体验。 如果您只是覆盖当前选项卡，用户是否想要？ 有时候这就是重点，但更可取的是不打开新标签页是可取的。 因此，您需要改用chrome.tabs.create （同样适用第2步-阅读文档）。

如何创建chrome扩展名以打开由用户输入生成的特定网址？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-08-30 14:21:49

如何创建chrome扩展名以打开由用户输入生成的特定网址？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-08-30 14:21:49

解决方案1
1 已采纳 2015-08-30 14:21:49