基于工作的Greasemonkey脚本，让jQuery和GM_addStyle在Chrome用户脚本中工作 [英] Getting jQuery and GM_addStyle to work in a Chrome userscript based off of a working Greasemonkey script
问题描述
我编写了一个简单的 Greasemonkey脚本，用于放大悬浮式弹出窗口中的缩略图。它使用了很多jQuery。它在Firefox上运行得很好。但不是在Chrome上，因为它不支持@require。
我碰到过这个解决方案。但是，即使在我将其与解决方案代码集成之后，该脚本仍然无法在Chrome上运行。我只是把我所有的脚本代码放在解决方案代码的主要功能中。
这是错的吗？如果有人能指出问题的出在哪里，我能做些什么才能解决问题，非常感谢。
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（'< div id =idLargePicturePopupWindow>< img> < / DIV>'）;
$ b $（'＃idLargePicturePopupWindow'）。bind
（
mouseenter mouseleave，
{bInPopup：true}，
myImageHover
）;
'（'＃profPhotos .profPhotoLink> img'）。bind
（
mouseenter mouseleave，
{bInPopup：false}，
myImageHover
）;
函数myImageHover（zEvent）
{
if（zEvent.type =='mouseenter'）
{
if（！zEvent .data.bInPopup）
{
var imgurl = this.src.toString（）;
var bigimg = imgurl.replace（/ \ / thumbs\ / [0-9x] + \ // i，/ photos /）;
$ b $（＃idLargePicturePopupWindow img）。attr（'src'，bigimg）;
$（＃idLargePicturePopupWindow）。show（）;
}
else
{
$（＃idLargePicturePopupWindow）。hide（）;
GM_addStyle（（<<！[CDATA [
#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;
}
]]> ;< />）。toString（））;
}
addJQuery（main）;
em>问题：
$ b <1>不要在主目录中包装函数。 GM_addStyle（） ） GM_addStyle（）只能在脚本范围内工作，它不会被注入到目标页面（这就是 main（）和 addJQuery（） business）。
$ b 2）当前的代码使用 E4X 将多行字符串发送至
GM_addStyle（），但Chrome不支持E4X。 唉，多行字符串破解Chrome支持（现在）在Firefox中不起作用。
这意味着使用 GM_addStyle编写逼真的样式会稍微困难一些）如果你想支持这两种浏览器。使用多行转义字符（ \ ），如下所示：
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; \
} \
＃ID LargePicturePopupWindow img {\
margin：0; \
margin-bottom：-4px; \
padding：0; \
} \
）;
3？）特定版本的 addJQuery（）可能并不总是有效（争用条件），让我知道它是不是。
I wrote a simple Greasemonkey script that enlarges thumbnail pictures in a flyover popup. It uses a lot of jQuery in it. It works just fine on Firefox. But not on Chrome since it doesn't support @require.
I came across this solution for this matter. But the script didn't work on Chrome even after I integrated it with the get-around code. I just put all my script code inside the solution code's main function.
Is it wrong? If anyone can point out where is the problem, and what I can do to get it right, it'll be very much appreciated.
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 ('<div id="idLargePicturePopupWindow"><img></div>');
$('#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 ( (<><![CDATA[
#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;
}
]]></>).toString () );
}
addJQuery(main);
Two main problems and 1 possible problem:
1) Do not wrap GM_addStyle() inside the main() function. GM_addStyle() only works in script scope, it will not work injected to the target page (which is what that main() and addJQuery() business does).
2) The current code uses E4X to make a multiline string to send to GM_addStyle(), but Chrome doesn't support E4X.
Alas, the multiline string hack that Chrome does support (for now) does not work in Firefox.
That means it's slightly harder to code realistic styles with GM_addStyle() if you wish to support both browsers. Use the multiline escape character (\) like so:
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?) That particular version of addJQuery() may not always work (race condition). Let me know if it doesn't.
这篇关于基于工作的Greasemonkey脚本，让jQuery和GM_addStyle在Chrome用户脚本中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
