Hacer que jQuery y GM_addStyle funcionen en un script de usuario de Chrome basado en un script de Greasemonkey en funcionamiento

Escribí un sencillo script de Greasemonkey que amplía las imágenes en miniatura en una ventana emergente de sobrevuelo. Utiliza una gran cantidad de jQuery en ella. Funciona bien en Firefox. Pero no en Chrome ya que no es compatible con @require.

Me encontré con esta solución para este asunto. Pero la secuencia de comandos no funcionó en Chrome, incluso después de que lo integré con el código de desplazamiento. Acabo de poner todo mi código de script dentro de la función principal del código de solución.

¿Esta mal? Si alguien puede señalar dónde está el problema y qué puedo hacer para solucionarlo, será muy apreciado.

function addJQuery(callback) { var script = document.createElement("script"); script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"); script.addEventListener('load', function() { var script = document.createElement("script"); script.textContent = "(" + callback.toString() + ")();"; document.body.appendChild(script); }, false); document.body.appendChild(script); } function main() { $("body").append ('
'); $('#idLargePicturePopupWindow').bind ( "mouseenter mouseleave", {bInPopup: true}, myImageHover ); $('#profPhotos .profPhotoLink > img').bind ( "mouseenter mouseleave", {bInPopup: false}, myImageHover ); function myImageHover (zEvent) { if (zEvent.type == 'mouseenter') { if ( ! zEvent.data.bInPopup) { var imgurl = this.src.toString(); var bigimg = imgurl.replace(/\/thumbs\/[0-9x]+\//i, "/photos/"); $("#idLargePicturePopupWindow img").attr ('src', bigimg); } $("#idLargePicturePopupWindow").show(); } else { $("#idLargePicturePopupWindow").hide(); } } GM_addStyle ( ().toString () ); } addJQuery(main);

Dos problemas principales y 1 problema posible :

1) No envuelva GM_addStyle() dentro de la función main() . GM_addStyle() solo funciona en el scope del script, no funcionará inyectado en la página de destino (que es lo que addJQuery() negocios main() y addJQuery() ).

2) El código actual utiliza E4X para hacer que una cadena multilínea se envíe a GM_addStyle() , pero Chrome no es compatible con E4X.

Por desgracia, el hackeo de cadenas multilínea que Chrome soporta (por ahora) no funciona en Firefox.

Eso significa que es un poco más difícil codificar estilos realistas con GM_addStyle() si desea admitir ambos navegadores. Utilice el carácter de escape multilínea ( \ ) así:

 GM_addStyle ( " \ #idLargePicturePopupWindow { \ position: absolute; \ background: white; \ border: none; \ margin: 1ex; \ opacity: 1.0; \ z-index: 1222; \ min-height: 100px; \ min-width: 200px; \ padding: 0; \ display: none; \ top: 2em; \ left: 50em; \ } \ #idLargePicturePopupWindow img { \ margin: 0; \ margin-bottom: -4px; \ padding: 0; \ } \ " ); 

¿3?) Esa versión particular de addJQuery() puede no funcionar siempre (condición de carrera). Déjame saber si no lo hace.