Question

我想制作chrome扩展程序，可以打开从用户输入生成的特定网址。用户输入一个或两个单词，然后当用户单击提交按钮时，用户将被重定向到“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});

首先，了解如何调试代码。甚至有a tutorial in the docs。因此，如果异常完全停止执行（如您的情况），您将了解它并获得有关它的一些细节。
接下来，请阅读documentation of the functions you use：


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

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

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

您可能正在尝试更新当前标签;在这种情况下，您根本不需要提供tabId（它标记为可选）：
```
chrome.tabs.update({url: "https://webaddress.com/"+input1+"/"+input2});
```
编码时要小心。有一个名为rubber duck debugging的东西，当你假装向其他人解释你的代码时，一行一行：＆＃34;这一行应该做X＆＃34; 等。你会以这种方式捕获第一个错误。当然，还需要进行测试。
作为程序员，您必须考虑edge cases。如果input1为空，该怎么办？它将成为"https://webaddress.com//something"，这是不好的。您需要添加逻辑来防止这种情况发生。 这是留给读者的练习。
您还应该考虑用户体验。如果您只是覆盖当前标签，用户会喜欢吗？有时候这是重点，但更常见的是不打开新标签更为可取。因此，您需要使用chrome.tabs.create代替（同样，第2步适用 - 阅读文档）。

如何创建chrome扩展来打开由用户输入生成的特定URL？

1 个答案: