Chrome can't read style.display value

I have a weird problem. I try to write a GreaseMonkey script to be run in Firefox and Google Chrome. With Chrome I tried 2 extensions : "TamperMonkey" and "Blank Canvas Script Handler", mainly because my script check regulary for a new version on an external site and this is considered as cross site scripting and not authorized in Chrome.

To show you my problem, I write a simple test case :

// ==UserScript==
// @name        test
// @namespace       http://fgs.ericc-dream.fr.nf
// @description     test gm script
// @include         http://gaia.fallengalaxy.eu/
// @author          ericc
// @version         0.0.1
// ==/UserScript==

/* We attach an event listener to the body tag and trigger the function
 * 'message' each time that an element is inserted in the page */
var el = document.body;
el.addEventListener('DOMNodeInserted', message, false);

var extraFlag = false;

function message(event) {
    /* first we capture the id of the new inserted element
     * (the one who created the event) */
    var objId = event.target.id;

    /* add an event listener on the map container */
    if (objId == "extra") {
        el = document.getElementById('extra');
        el.addEventListener('DOMSubtreeModified',readTest,false);
        GM_log(el.style.display);
    }
}

function readTest() {
    el = document.getElementById('extra');
    GM_log(extraFlag);
    GM_log(el.style.display);
    if ((el.style.display != 'none') && (!extraFlag)) {
        alert('extra');
        extraFlag = true;
    } else if ((el.style.display == 'none')) {
        extraFlag = false;
    }
}

the div element 'extra' is modified by the page. The problem is that Chrome is unable to read the value of el.style.display and thus extraFlag never become 'false' again. I use this flag to avoid to run the code seve开发者_开发知识库ral time, the site is heavily JavaScript driven This code work nicely in Firefox !

I tried to search with Google but can't find a correct answers. Seems easy to change the value of display, but it seems that I'm the only one who try to read it !!!

I write this code because "DOMAttrModified" isn't supported in Chrome :-(

Thanks in advance for your help

ericc

---

I'm having a hard time understanding exactly what your question is, but it looks like Chrome can read .style.display properties just fine. I just threw the following code into an HTML template and loaded it in Chrome 10:

<div id="div1">
</div>

<div id="div2" style="display: block;">
</div>

<div id="div3" style="display: inline;">
</div>

<div id="div4" style="display: none;">
</div>

<script type="text/javascript">
    alert(document.getElementById("div1").style.display);
    alert(document.getElementById("div2").style.display);
    alert(document.getElementById("div3").style.display);
    alert(document.getElementById("div4").style.display);

    document.getElementById("div1").style.display = "none";

    alert(document.getElementById("div1").style.display);
</script>

The code produced 5 'alert' boxes with the following output:

• block
• inline
• none
• none

So it seems Chome reads this property just fine.

Maybe the issue is that the webpage on which you're running your greasemonkey script is behaving differently in Chrome than in Firefox? Could it be that the ID of the element is different, or the element is being removed from the DOM instead of just being hidden? What would happen if you modified your function with some more checks, kinda like this?

function readTest() {
    el = document.getElementById('extra');
    if(el)
    {
        GM_log(extraFlag);
        GM_log(el.style.display);
        if (el.style.display && (el.style.display != 'none') && (!extraFlag)) {
            alert('extra');
            extraFlag = true;
        } else if ((el.style.display == 'none') || !el.style.display) {
            extraFlag = false;
        }
    }
    else
    {
        GM_log(extraFlag);
        GM_log("element not present");
        extraFlag = false;
    }
}

Does that help? If not, is there any other reason you could think of why el.style.display wouldn't evaluate properly in Chrome?

It might help if we knew more about what you're trying to do with your script, and possibly what web page or code you're trying to run this on.

---

After several hours and a ton of test case, I finally find an acceptable explanation (but not yet a solution !)

Let's explain the scenario :
1°) the user click on an icon on the screen
2°) the div#extra, which is already present in the page, is made visible by removing its display property (.style.display="")
3°) the div#extra is filed by an AJAX function with some elements depending on which icon was clicked by the user (more than 200 elements in certain case)
4°) the user click on an other icon to close the div
5°) all elements from the div#extra are removed
6°) the div#extra is hidden by putting is display property to 'none' (.style.display="none")

At first, on Firefox, I used "DOMAttrModified" event on the div#extra to check when the display property was modified and react accordingly. Problem, this event is not supported on Chrome !!

So I replace it by "DOMSubtreeModified" (attached to div#extra) which is supported by both browser .... but not exactly in the same way :-(
On Firefox, an event is fired for every modification in the subtree but also when the element itself is modified.
On Chrome, they are a little bit more strict and fired event only for modification in the subtree .... and this is my issue !

In Firefox,first event is fired at point 2 (in the scenario) and last at point 6 allowing my function to read when the div#extra is made hidden

In Chrome, first event is fired at point 3 and last at point 5 ... so when the the div#extra is hidden my function is not called and I can't modify the flag !!!! CQFD

Now, or I will add an event listener to the body of the page to intercept when the display property is modified, but it will generate a lot of call to my function, or the developer of TamperMonkey said yesterday that his extension now support "DOMAttrModified" (on Chrome) ....

Thanks anyway to take the time to understand my question and your proposed solution

ericc