Question

我在FF57中使用Greasemonkey 4.1beta4（最新测试版）使用以下脚本^{（供参考，这里是full script）}
确实创建了对话框，但不幸的是它有一个空的灰色方块，其中关闭图标应为：

// ==UserScript==
// @name        jQuery UI dialog
// @include     /^https?:\/\/hg\.mozilla\.org.*pushloghtml.*/
// @require     https://code.jquery.com/jquery-2.1.4.min.js
// @require     https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
// @resource    css http://code.jquery.com/ui/1.12.1/themes/redmond/images/ui-icons_469bdd_256x240.png
// @grant       GM.getResourceUrl
// ==/UserScript==

//  I use an ajax request in the beginning in order to inject the CSS file, otherwise it's blocked by the page's CSP
$.ajax({
    url:'http://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.min.css',
    success:function(data){
        $('<style></style>').appendTo('head').html(data);
    }
});

var div = document.createElement('div');
$('div.page_footer').append(div);
div.id = 'dialog';

$('#dialog').dialog({
});

脚本适用的示例页面：
https://hg.mozilla.org/mozilla-central/pushloghtml?startdate=1+day+ago&enddate=now

我在this question看到了问题是我没有包含精灵图像（我使用它的主题是http://code.jquery.com/ui/1.12.1/themes/redmond/images/ui-icons_469bdd_256x240.png）。

所以，我一直在尝试根据this reply将精灵图片（PNG）用作该元素的background（CSS）。

以下是我迄今为止的4次失败尝试（将上述各部分添加到上述部分）：

GM.getResourceUrl()（由于GM 4.x而在async/await内）

（在这种情况下，关闭框只会将颜色更改为浅蓝色）

(async function() {
    var stylesheet = `
    <style>
    .ui-dialog-titlebar-close {
      background: url('` + await GM.getResourceUrl("css1") + `') repeat scroll -93px -128px rgba(0, 0, 0, 0) !important;
      border: medium none;
    }
    </style>`;
    $('head').append(stylesheet);
})();

将PNG编码为base64并尝试附加它：
（在这种情况下，PNG确实已加载（如FF'S Inspector中所示），但关闭框只是将颜色更改为浅蓝色）
screenshot

var stylesheet = `
<style>
.ui-dialog-titlebar-close {
  background: url('data:image/png;base64,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')
repeat scroll -93px -128px rgba(0, 0, 0, 0) !important;
  border: medium none;
}
</style>`;
$('head').append(stylesheet);

以下是此案例中Web控制台中显示的内容：

内容安全政策：该网页的设置阻止了data:image/png;base64,iVBORw0KGgoAAAANSU...（“img-src https://hg.mozilla.org”）加载资源。

ajax请求，并将响应用作PNG
（关闭框只是将颜色变为浅蓝色）

$.ajax({
    url:'http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png',
    type: 'POST',
    contentType: 'image/png',
    data: {},
    success:function(data){
        $('.ui-dialog-titlebar-close').css('background', 'url(' + data + ')');
    }
});

的XMLHttpRequest（）; （这里是目标PNG - 它是blob-它被页面的CSP阻止）

var oReq = new XMLHttpRequest();
oReq.open("post", 'http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png', true );
oReq.responseType = "blob";
oReq.onload = function ( oEvent )
{
    var blob = oReq.response;
    var imgSrc = URL.createObjectURL( blob );
    $('.ui-dialog-titlebar-close').css('background', 'url(' + imgSrc + ')');
};
oReq.send( null );

以下是此案例中Web控制台中显示的内容：

内容安全政策：该网页的设置阻止了以blob加载资源：https://hg.mozilla.org/b0197e3c-3323-4f43-bdc8-3c2fb663748d（“img-src https://hg.mozilla.org”）。

如何显示X按钮？

缺少jQuery-UI对话框'x'按钮图像（Greasemonkey 4.1beta4中的Userscript）

0 个答案: