How can I modify the query from a user submitted search input with a Chrome extension?

Question

So, I'm writing a Chrome extension for a school assignment and I'm stuck on this part where I think I need to parse a string. This is my first time working with HTML, CSS, and JS, so I'm just scouring the web for tips on how to make this happen.

Basically, in our assignment we need to create an extension for Chrome which essentially opens up a new page where we have a search bar. There's this website, https://www.manualslib.com/ , and the terms we input into that search bar need to be used to directly search that site.

The problem is that this website's URL for searches is a bit different than what I'm used to: when you search for something, the website takes the first letter of my search term, puts it in between slashes, and then adds at the end the whole search. For example, if you search genetics there, the URL will look like https://www.manualslib.com/g/genetics.html .

So I guess I need to parse the string somehow to get the search term's first character, right? According to w3schools, using the split() method would be a good idea. The problem is I'm not really sure how the syntax works here. As I said, it's my first time dabbing in web developing, so I'm not familiar at all with the way people do stuff here. Any help is appreciated.

This is the code I have for the search bar (this code merely redirects to the webpage, it doesn't search anything):

 <div id="tfheader"> <form id="tfnewsearch" method="get" action="https://www.manualslib.com/"> <input type="text" class="tftextinput" name="str" ; size="21" maxlength="120"> <input type="submit" value="search" class="tfbutton"> </form> </div> 

What kind of changes do I have to make? Do I need to create a .js file where I write the function that parses the string? Or is the parsing function written inside the HTML file? Any help is appreciated, thanks in advance!

Answer 1

 var query = 'genetics'; var url = 'https://www.manualslib.com/{0}/{1}.html' .replace('{0}', query.substring(0, 1)) .replace('{1}', query); console.log(url); 

Answer 2

The onsubmit event might help you.

To redirect to another site, just set window.location , like this:

search_form.onsubmit = function() // will be called as soon as the form is submitted
{
    var searchText = typehead.value; // the text entered in the search bar
    var redirectTo = "https://www.manualslib.com/"+searchText[0]+"/"+searchText+".html";
    window.location = redirectTo;
}