Javascript 内容脚本在页面上创建的元素,与Gmail、Facebook、stackoverflow等一起创建问题
我正在开发一个Chrome扩展,我的要求是为每个打开的选项卡在页面上创建元素(按钮),并希望在单击按钮时显示简单的警告消息。它对所有人都正常工作,但它总是与Gmail、Facebook和Stackoverflow产生问题。请帮助我解决此问题 我有在我的内容脚本中向网页添加按钮的代码Javascript 内容脚本在页面上创建的元素,与Gmail、Facebook、stackoverflow等一起创建问题,javascript,google-chrome,google-chrome-extension,gmail,Javascript,Google Chrome,Google Chrome Extension,Gmail,我正在开发一个Chrome扩展,我的要求是为每个打开的选项卡在页面上创建元素(按钮),并希望在单击按钮时显示简单的警告消息。它对所有人都正常工作,但它总是与Gmail、Facebook和Stackoverflow产生问题。请帮助我解决此问题 我有在我的内容脚本中向网页添加按钮的代码 manifest.json .... .... "content_scripts": [ { "matches":["http://*/*", "h
manifest.json
....
....
"content_scripts": [
{
"matches":["http://*/*", "https://*/*"],
"css": [ "style.css" ],
"js":["contentScript.js"],
"all_frames": false,
"run_at": "document_idle"
}
]
....
....
contentScript.js
....
....
function addButton() {
document.body.innerHTML += '<button id="my_button" class="buttonCss">Show Button</button>';
var button = document.getElementById("my_button");
button.addEventListener("click", function () {
alert("hello");
}, false);
。。。。
....
函数addButton(){
document.body.innerHTML+=“显示按钮”;
var button=document.getElementById(“我的按钮”);
按钮。addEventListener(“单击”),函数(){
警惕(“你好”);
},假);
}
.....
.....
我认为Gmail的一些安全特性造成了这个问题
document.body.innerHTML += /* ... */
我想这是你的问题。它迫使Chrome重新创建body
的整个DOM,从而丢失附加的事件/数据
正确的方法是构造并附加DOM节点:
var button = document.createElement("button");
button.id = "my_button";
button.className = "buttonCss";
button.textContent = "Show Button";
document.body.appendChild(button);
能否附上一些你遇到的问题的代码?@gui47:我已经编辑了这个问题。请看一看。