Chrome拡張機能はリセットを維持します

Question

Chrome拡張機能の開発は初めてですが、デバッグや拡張機能自体に問題があります。私は現在、送信ボタン付きのフォームを持っており、ユーザーが送信した後に、送信したばかりのデータを表示するようにhtmlを変更します。この中

document.addEventListener('DOMContentLoaded', function() { 
 

 
    console.log("1"); 
 
    document.getElementById("submitButton").addEventListener('click', myFunction); 
 
    console.log("2"); 
 
    //getCurrentTabUrl(function(url) { 
 
    // \t renderStatus(url); 
 
    //}); 
 
}); 
 

 
function myFunction() { 
 
    document.getElementById("formOutput").innerHTML = document.getElementById("formInput").value; 
 
    alert("hi"); 
 
    console.log("test"); 
 

 
); 
 
}

、1と2は、拡張デバッグコンソールに表示され、ボタンがクリックされたときに、アラートも同様に動作します。テストは非常に短時間で表示され、消えてしまいます。formoutputの値も非常に短時間で変化し、その後私が持っているデフォルト値に戻ります。誰も私のコード/クロムの拡張機能がこれを行う理由を知っていますか？

ありがとうございます！

Answer 1

ボタンがタイプsubmit（属性が指定されていない場合はこれがデフォルトです）をクリックすると、フォームデータがサーバーに送信され、ページが新しいページにリダイレクトされます。その後、あなたのコンテンツスクリプトが再び注入されるので、それがデフォルト値に戻ります。

これを避けるには、other typesのボタンを変更するか、e.preventDefaultを呼び出してデフォルトの動作を防ぐことができます。次に、Ajaxを使用してサーバーにデータを送信すると、ページ全体がリダイレクトされず、一部のUIのみが更新されます。