Question

我需要chrome扩展，如果在某些网页上发生某些DOM更改，它会做出反应。这是一个页面的例子。 https://dl.dropboxusercontent.com/u/18989535/Modal/Demos/index.html

我需要作为监听器的扩展，当模态窗口打开时，我的扩展应该做一些事情。在示例页面中有一个打开模态窗口的简单链接。链接只是创建一个弹出/模态窗口的div。我希望我的扩展能够在启动模态窗口（某个div）时做出反应，然后需要读取模态窗口的内容（模态窗口中某个div的内容），然后注入我自己的代码模态窗口。

这就是我所做的...... 的manifest.json：

{
"name": "DOM test",
"version": "1",
"manifest_version": 2,
"description": "test",
"background": {"page": "background.html"}, 
"browser_action": {
 "name": "DOM test",
 "icons": ["icon.png"],
 "default_icon": "mani.png"
},
 "content_scripts": [ {
  "js": [  "background.js" , "jquery-1.8.1.js" ],
  "matches": [ "http://*/*"]
}]
}

background.js

function nodeInsertedCallback(event) { 

    if (document.getElementById('simple-modal')) {
        console.log('modal created');
    };

    //1. read title to variable
    var input = document.getElementById('simple-modal').innerHTML;
    var div = document.createElement('div');
    div.innerHTML = input;
    var h1 = div.getElementsByTagName('h1')[0];
    //title to variable "text"
    var text = h1.innerText || h1.textContent;
    console.log(text);


    //2. read popup text to variable
    var type = document.getElementsByClassName('contents')[0].innerHTML
    console.log(type);


    //3. make mysql insert out of text and title
    console.log('mysql inject');


    //4. close the modal window - simulate click to link #

    //removes wanted element
    Element.prototype.remove = function() {
        this.parentElement.removeChild(this);
    }
    NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
        for(var i = 0, len = this.length; i < len; i++) {
            if(this[i] && this[i].parentElement) {
                this[i].parentElement.removeChild(this[i]);
            }
        }
    }

    document.getElementById("simple-modal").remove();
    document.getElementById("simple-modal-overlay").remove();

    console.log('modal removed');


};

document.addEventListener('DOMNodeInserted', nodeInsertedCallback);

现在代码开始工作了，但是我遇到了background.js的问题。现在每一步都要执行几次。我知道它的原因是：

function nodeInsertedCallback(event) 
document.addEventListener('DOMNodeInserted', nodeInsertedCallback);

我希望我的步骤（background.js上的1-4）只执行一次，我需要在background.js上更改什么？

谢谢。

Chrome扩展程序。模态窗口 - DOM更改侦听器

0 个答案: