how to create chrome extension to open specific url that generated by user input?

Question

i want to make chrome extension which can open specific url that generated from user input. the user is inputted one or two word, then when the user click submit button, the user will be redirected to "hxxps://webaddress.com/input1" or "hxxps://webaddress.com/input2" or "hxxps://webaddress.com/input1/input2".

here my popup.html code,

<!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>

and here is my 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});
});

But its doesn't work. Can someone help me to make it work? Thanks for the help.

Answer 1

You need to be more careful with your code.

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

And:

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

First things first, learn how to debug your code. There's even a tutorial in the docs . So in case of an exception that halts the execution completely (as in your case) you'll know about it and have some details about it.
Next up, read the documentation of the functions you use :

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

Modifies the properties of a tab. Properties that are not specified in updateProperties are not modified.

integer (optional) tabId
Defaults to the selected tab of the current window.

You are, presumably, trying to update the current tab; in this case, you don't need to provide tabId at all (it's marked as optional):
```
 chrome.tabs.update({url: "https://webaddress.com/"+input1+"/"+input2}); 
```
Be careful when coding. There's a thing called rubber duck debugging , when you pretend to explain your code to someone else, line by line: "And this line should do X" etc. You would catch the first error this way. Of course, testing is also required.
As a programmer, you have to think about edge cases . What if input1 is empty? It will become "https://webaddress.com//something" , which is not good. You'll need to add logic to prevent that. This is left as an exercise to the reader.
You should also think about user experience. Would the user like if you just overwrite the current tab? Sometimes that's the point, but more often that not opening a new tab is preferable. So you need to use chrome.tabs.create instead (again, step 2 applies - read the docs).

how to create chrome extension to open specific url that generated by user input?

Question

1 answers

solution1
1 ACCPTED 2015-08-30 14:21:49

how to create chrome extension to open specific url that generated by user input?

Question

1 answers

solution1 1 ACCPTED 2015-08-30 14:21:49

solution1
1 ACCPTED 2015-08-30 14:21:49