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

时间:2015-10-07 06:38:35

标签: javascript dom google-chrome-extension

单击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修改总是恢复到其原始状态。有没有办法让其中一个保持静止?

1 个答案:

答案 0 :(得分:1)

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

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