ユーザーが入力した検索入力からChrome拡張機能を使用してクエリを変更するにはどうすればよいですか？

Question

私は学校の割り当てのためにChromeの拡張機能を書いています。この部分では文字列を解析する必要があると思います。これは初めてのHTML、CSS、JSで作業しているので、これを実現させる方法のヒントについては、Webを精査しています。

基本的に、Googleの割り当てでは、Chromeの拡張機能を作成する必要があります。この拡張機能は、基本的に検索バーがある新しいページを開きます。このウェブサイトhttps://www.manualslib.com/があり、その検索バーに入力する用語を使用してそのサイトを直接検索する必要があります。

問題は、このウェブサイトの検索のURLが、私が慣れ親しんだものと少し違うということです。何かを検索すると、ウェブサイトは自分の検索語の最初の文字を取り、それをスラッシュの間に置き、最後に検索全体を追加します。たとえば、geneticsを検索すると、URLはhttps://www.manualslib.com/g/genetics.htmlのようになります。

だから私は検索用語の最初の文字を取得するために何とか文字列を解析する必要があると思いますか？ w3schoolsによると、split()メソッドを使用するとよいでしょう。問題は、ここで構文がどのように機能するかわからないということです。私が言ったように、それはWeb開発ではじめてのことだから、ここで人々がやっていることに全く慣れていない。どんな助けもありがとうございます。

これは、検索バーのために私が持っているコード（このコードは、単にWebページにリダイレクトし、それが何かを検索しません）です：

私はどんな変化

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

作る必要がありますか？文字列を解析する関数を記述する.jsファイルを作成する必要がありますか？または、解析関数はHTMLファイルの中に書かれていますか？どんな助けもありがとうございます、事前に感謝します！

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

onsubmit eventはあなたを助けるかもしれません。

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