Question

单击BrowserAction时，test.html将在新选项卡中打开。这按预期工作。这是background.js：

chrome.browserAction.onClicked.addListener(function () {
  chrome.tabs.create({
    url: "./test.html"
  });
});

以下是test.html：

<!DOCTYPE HTML>
 <head>
 </head>
 <body>
  <form>
   <fieldset id="top">
    <button id="clickme">click me</button>
   </fieldset>
   <fieldset id="bottom">
   </fieldset>
  </form>
  <script src="test.js"></script>
 </body>
</html>

test.html调用test.js：

console.log("checking in");

document.getElementById("clickme").onclick = function () {
 var newButton = document.createElement("button");
 newButton.textContent = "now click me";
 newButton.onclick = function () {
  document.getElementById("bottom").style.backgroundColor = "pink";
 };
 document.getElementById("bottom").appendChild(newButton);
 alert("I'm an alert. If you comment me out, the tab will revert to its unmodified state, probably before you even see the second button.");
};

出现新按钮，但清除警报后消失。我发现一旦脚本完成，对扩展中打开的选项卡或弹出窗口进行的DOM修改总是恢复到其原始状态。有没有办法让其中一个保持静止？

Answer 1

点击后您的<form>会重新提交，如果没有操作网址，则只需重新加载页面。

根本不使用<form>或使用正确的onsubmit事件监听器或在所有点击监听器中添加event.preventDefault();或将type="button"添加到所有人你的按钮。

一旦脚本完成，对chrome扩展中的弹出窗口或制表符的DOM修改即刻撤消

1 个答案: