Question

我是chrome扩展开发的新手，但我遇到调试问题和扩展本身。我目前有一个带有提交按钮的表单，在用户点击提交后，我更改了html以显示刚刚提交的数据。

document.addEventListener('DOMContentLoaded', function() {

  console.log("1");
  document.getElementById("submitButton").addEventListener('click', myFunction);
  console.log("2");
  //getCurrentTabUrl(function(url) {
  //	renderStatus(url);
  //});
});

function myFunction() {
  document.getElementById("formOutput").innerHTML = document.getElementById("formInput").value;
  alert("hi");
  console.log("test");

);
}

在此中，1和2显示在扩展调试控制台上，单击按钮时警报也会运行。测试显示非常简短，然后消失.pormoutput值也会非常短暂地变化，然后变回我的默认值。有谁知道为什么我的代码/ chrome扩展会这样做？

谢谢！

Answer 1

如果单击类型为submit的按钮（如果未指定属性，则为默认值），表单数据将被发送到服务器，页面将重定向到新页面。然后，您的内容脚本将再次注入，这就是它变回默认值的原因。

为避免这种情况，您可以使用other types更改按钮，或调用e.preventDefault以防止默认行为。然后，您可能希望使用Ajax将数据发送到服务器，这样可以确保整个页面不会被重定向，并且只能更新部分UI。

Chrome扩展程序会继续重置

1 个答案: