单击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修改总是恢复到其原始状态。有没有办法让其中一个保持静止?
答案 0 :(得分:1)
点击后您的<form>
会重新提交,如果没有操作网址,则只需重新加载页面。
根本不使用<form>
或使用正确的onsubmit事件监听器或在所有点击监听器中添加event.preventDefault();
或将type="button"
添加到所有人你的按钮。