用于显示工具提示的用户脚本不起作用

Question

我开发了以下用户脚本，它将在工具提示中的鼠标悬停时显示鼠标下的 html 元素。

早些时候，我在 Chrome 扩展中使用了相同的脚本作为内容脚本，并且它在那里工作得非常好。

我收到以下错误：

未捕获类型错误：无法读取未定义的属性“计时器”

// ==UserScript==
// @name           Tooltip
// @author         Saurabh Saxena
// @version        1.0
// ==/UserScript==


    var id = 'tt';
    var top = 3;
    var left = 3;
    var maxw = 300;
    var speed = 10;
    var timer = 20;
    var endalpha = 95;
    var alpha = 0;
    var tt, t, c, b, h;
    var ie = document.all ? true : false;

document.onmouseover = function(e,w)
{
    var link = document.location.toString();
    link = link.split('.');
    if(!link[1].match(/facebook/) && !link[1].match(/google/) && !link[1].match(/youtube/) && !link[2].match(/google/))
    {
    if (tt == null) {
            tt = document.createElement('div');
            tt.setAttribute('id', id);
            t = document.createElement('div');
            t.setAttribute('id', id + 'top');
            c = document.createElement('div');
            c.setAttribute('id', id + 'cont');
            b = document.createElement('div');
            b.setAttribute('id', id + 'bot');
            tt.appendChild(t);
            tt.appendChild(c);
            tt.appendChild(b);
            document.body.appendChild(tt);
            tt.style.opacity = 0;
        tt.style.zIndex = 10000000;/*Important Dont Change it or the tooltip will move below the stack*/
            tt.style.filter = 'alpha(opacity=0)';
            document.onmousemove = function(e) {
                var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
                var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
                tt.style.top = (u - h) + 'px';
                tt.style.left = (l + left) + 'px';};
            }
            tt.style.display = 'block';
        var str = "";
            var currenttag = "";
            var parenttag = "";
            var tooltip = "";
            var flag = 0;

            var chk = e.srcElement.parentNode;          
            /*creating contents of parent tag if it exists*/
            if(chk != null)
            {
                var parenttag = "<" + chk.nodeName;
                for (var i = 0; i < chk.attributes.length; i++) {
                    var attrib = chk.attributes[i];
                    if(attrib.value == "")
                        parenttag = parenttag + " " + attrib.name;
                    else
                        parenttag = parenttag + " " + attrib.name + ' ="' + attrib.value + '"';
                    parenttag = parenttag + "  ";
                }
                parenttag = trim(parenttag);
                tooltip = parenttag + ">" + "\n\n";
            }
            /*creating contents of current tag*/
            currenttag = "<" + e.srcElement.nodeName;
            if(e.srcElement.attributes.length == 0)
                flag = 0;
            for (var i = 0; i < e.srcElement.attributes.length; i++) 
            {
                var attrib = e.srcElement.attributes[i];
                if(attrib.value == "")
                    currenttag = currenttag + " " + attrib.name;
                else
                {
                    flag = 1;
                    currenttag = currenttag + " " + attrib.name + ' ="' + attrib.value + '"';
                    currenttag = currenttag + "  ";
                }
            }
            currenttag = trim(currenttag);
            currenttag = currenttag + ">";
            currenttag = currenttag + e.srcElement.innerHTML;
            currenttag = currenttag + "</" ;
            currenttag = currenttag + e.srcElement.nodeName;
            currenttag = currenttag + ">";
            tooltip = tooltip + currenttag;
            tooltip = tooltip.toLowerCase();

            if(currenttag == "" || flag == 0)
                return;
            c.innerText = tooltip;
            tt.style.width = w ? w + 'px' : 'auto';

            tt.style.width = tt.offsetWidth;
                t.style.display = 'block';
            b.style.display = 'block';

            if (tt.offsetWidth > maxw) { tt.style.width = maxw + 'px' }
            h = parseInt(tt.offsetHeight);
        clearInterval(tt.timer);
            tt.timer = setInterval(function () 
        {
            var a = alpha;
            var d = 1;
                    if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
                        var i = speed;
                    if (endalpha - a < speed && d == 1) {
                        i = endalpha - a;
                    } else if (alpha < speed && d == -1) {
                        i = a;
                    }
                alpha = a + (i * d);
                tt.style.opacity = alpha * .01;
                tt.style.filter = 'alpha(opacity=' + alpha + ')';
            } else {
                clearInterval(tt.timer);
                if (d == -1) { tt.style.display = 'none' }
            } }, timer);
    }
}//end onmousedown


document.onmouseout = function()
{
    clearInterval(tt.timer);
    tt.timer = setInterval(function () { 
    var a = alpha;
    var d = -1;
            if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
                var i = speed;
                if (endalpha - a < speed && d == 1) {
                    i = endalpha - a;
                } else if (alpha < speed && d == -1) {
                    i = a;
                }
                alpha = a + (i * d);
                tt.style.opacity = alpha * .01;
                tt.style.filter = 'alpha(opacity=' + alpha + ')';
            } else {
                clearInterval(tt.timer);
                if (d == -1) { tt.style.display = 'none'; }
            } }, timer);
}

function trim(s) {
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");
    return s;
}

Answer 1

// ==UserScript==
// name           Tooltip
// author         Saurabh Saxena
// version        1.0.0
// description    Show Google Rich Snippet Markup Tooltip
// ==/UserScript==

var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt, t, c, b, h;
var ie = document.all ? true : false;

document.onmouseover = function(e,w)
{
    var link = document.location.toString();
    link = link.split('.');
    if(!link[1].match(/facebook/) && !link[0].match(/workflow/) && !link[1].match(/google/) && !link[1].match(/youtube/) && !link[2].match(/google/) && !link[0].match(/eveforeval/) && !link[0].match(/trax/) && !link[0].match(/b/))
    {
    if (tt == null) {
            tt = document.createElement('div');
            tt.setAttribute('id', id);

        tt.style.position = 'absolute';
        tt.style.display = 'block';

            t = document.createElement('div');
            t.setAttribute('id', id + 'top');

        t.style.display = 'block';
        t.style.height = '5px';
        t.style.marginLeft = '5px';
        t.style.overflow = 'hidden';

            c = document.createElement('div');
            c.setAttribute('id', id + 'cont');

        c.style.display = 'block';
        c.style.padding = '2px 12px 3px 7px';
        c.style.marginLeft = '5px';
        c.style.background = '#666';
        c.style.color = '#FFF';

            b = document.createElement('div');
            b.setAttribute('id', id + 'bot');

        b.style.display = 'block';
        b.style.height = '5px';
        b.style.marginLeft = '5px';
        b.style.overflow = 'hidden';

            tt.appendChild(t);
            tt.appendChild(c);
            tt.appendChild(b);
            document.body.appendChild(tt);
            tt.style.opacity = 0;
        tt.style.zIndex = 10000000;/*Important Dont Change it or the tooltip will move below the stack*/
            tt.style.filter = 'alpha(opacity=0)';
            document.onmousemove = function(e) {
                var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
                var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
                tt.style.top = (u - h) + 'px';
                tt.style.left = (l + left) + 'px';};
            }
            tt.style.display = 'block';
            var str = "";
            var currenttag = "";
            var parenttag = "";
            var tooltip = "";
            var flag = 0;
//          var chk = getRootElement(e.srcElement.parentNode);
            var chk = e.srcElement.parentNode;          
            /*creating contents of parent tag if it exists*/
            if(chk != null)
            {
                var parenttag = "<" + chk.nodeName;
                for (var i = 0; i < chk.attributes.length; i++) {
                    var attrib = chk.attributes[i];
                    if(attrib.value == "")
                        parenttag = parenttag + " " + attrib.name;
                    else
                        parenttag = parenttag + " " + attrib.name + ' ="' + attrib.value + '"';
                    parenttag = parenttag + "  ";
                }
                parenttag = trim(parenttag);
                tooltip = parenttag + ">" + "\n\n";
            }
            /*creating contents of current tag*/
            currenttag = "<" + e.srcElement.nodeName;
            if(e.srcElement.attributes.length == 0)
                flag = 0;
            for (var i = 0; i < e.srcElement.attributes.length; i++) 
            {
                var attrib = e.srcElement.attributes[i];
                if(attrib.value == "")
                    currenttag = currenttag + " " + attrib.name;
                else
                {
                    flag = 1;
                    currenttag = currenttag + " " + attrib.name + ' ="' + attrib.value + '"';
                    currenttag = currenttag + "  ";
                }
            }
            currenttag = trim(currenttag);
            currenttag = currenttag + ">";
            currenttag = currenttag + e.srcElement.innerHTML;
            currenttag = currenttag + "</" ;
            currenttag = currenttag + e.srcElement.nodeName;
            currenttag = currenttag + ">";
            tooltip = tooltip + currenttag;
            tooltip = tooltip.toLowerCase();
            if(currenttag == "" || flag == 0)
                return;
            c.innerText = tooltip;
            tt.style.width = w ? w + 'px' : 'auto';

            if (!w && ie) {
                t.style.display = 'none';
                b.style.display = 'none';

                tt.style.width = tt.offsetWidth;
                t.style.display = 'block';
                b.style.display = 'block';
            }
            if (tt.offsetWidth > maxw) { tt.style.width = maxw + 'px' }
            h = parseInt(tt.offsetHeight);
        clearInterval(tt.timer);
            tt.timer = setInterval(function () 
        {   var a = alpha;
            var d = 1;
                    if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
                        var i = speed;
                    if (endalpha - a < speed && d == 1) {
                        i = endalpha - a;
                    } else if (alpha < speed && d == -1) {
                        i = a;
                    }
                alpha = a + (i * d);
                tt.style.opacity = alpha * .01;
                tt.style.filter = 'alpha(opacity=' + alpha + ')';
            } else {
                clearInterval(tt.timer);
                if (d == -1) { tt.style.display = 'none' }
            } }, timer);
    }
}//end onmousedown


document.onmouseout = function()
{
    clearInterval(tt.timer);
    tt.timer = setInterval(function () { 
    var a = alpha;
    var d = -1;
            if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
                var i = speed;
                if (endalpha - a < speed && d == 1) {
                    i = endalpha - a;
                } else if (alpha < speed && d == -1) {
                    i = a;
                }
                alpha = a + (i * d);
                tt.style.opacity = alpha * .01;
                tt.style.filter = 'alpha(opacity=' + alpha + ')';
            } else {
                clearInterval(tt.timer);
                if (d == -1) { tt.style.display = 'none'; }
            } }, timer);
}

function trim(s) {
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");
    return s;
}