ZeroClipboard user script adding in mouse over, working in firefox, but not chrome

Question

I am using zeroclipboard to add a "copy" link to each row in a fairly large list, within a user script. To accomplish that, I using a method similar to the one listed on this page, where the ZeroClipboard.Client() element for each row is created when the user mouses over the row. This is working great in FireFox, but not in Chrome.

Also as a note: I copied the contents of the ZeroClipboard.js file into the user script itself instead of including it in an external file.

Here is the markup that creates the copy button for each element
<span style="color:blue; text-decoration:underline; cursor:pointer" id="copy_'+id+'" class="CopyLink" link="'+url+'" onmouseover="clipboard.add(this)">Copy</span>

Here is the code segment that adds the clipboard's client object:

function main(){
    window.clipboard = {
        load: function (){
            if(!clipboard.initialized){
                ZeroClipboard.setMoviePath("http://www.swfcabin.com/swf-files/1343927328.swf");
                clipboard.initialized=true;
                console.log("Clipboard intialized");
            }
        },
        add: function(element){
            clipboard.load();
            var clip = new ZeroClipboard.Client();
            console.log('Clipboard client loaded: ' + element.id);

            clip.glue(element, element.parentNode);
            console.log('Clipboard glued: ' + element.id);

            clip.setText(element.getAttribute('link'));
            console.log('Clipboard text set: ' + element.getAttribute('link'));

            clip.addEventListener('complete',function(client,text) {
                console.log('Clipboard copied: ' + text);//doesn't fire in chrome
            });

            clip.addEventListener('load',function(client) {
                console.log('Clipboard loaded: ' + element.getAttribute('link'));
            });
        }        
    }
    //other code in user script including injecting above markup
    //as well as contents of ZeroClipboard.js
    window.ZeroClipboard = { ... }
}

var script = document.createElement("script");
script.appendChild(document.createTextNode('('+main+')()'));
(document.head || document.body || document.documentElement).appendChild(script);

In this block, every console.log fires in FireFox when I mouse over and click the copy span, but in chrome, all except the 'complete' listener fire. I was able to verify that ZeroClipboard is working in my Chrome by using the example on this page. I am also able to verify that the flash object is being added to the page in the correct location, but it is simply not responding to a click.

Since the zeroclipboard code is no longer being maintained according to the site, I'm hoping someone out there can help me out. I'm thinking there is possibly some issue with dynamically adding the embedded flash objects in chrome on mouseover, or perhaps some difference between user scripts in chrome vs firefox with greasemonkey? Any help would be greatly appreciated, thanks

Answer 1

I'm not sure the reason behind it but I have been running into this on Chrome as well. I had two zeroclipboard implementations, one that was visible on page load, and one that was only visible when the user opened a dialog. The one that was visible on page load worked as expected, but the other one didn't. In order to "solve" the issue, I had to render the zeroclipboard link, set its absolute position to be off the screen (-500 px), then add some javascript to move the link into place when the dialog opens. This is an ugly solution but I think is the only way to get it to work in Chrome. Your case is particularly hairy since you have lots of dynamic zeroclipboards on your page whereas I only had one, but it seems to me that there's no reason this won't work for you.