我正在查看一个greasemonkey用户脚本的来源,并在他们的css中注意到以下内容:
.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}
我可以理解,一个greasemonkey脚本想要在源代码中捆绑任何东西而不是在服务器上托管它,这是显而易见的.但由于我以前没有看过这种技术,我考虑过它的使用,看起来很有吸引力有很多原因:
考虑到IE6(例如)有背景图像缓存问题,这似乎不是最糟糕的想法......
那么,这是一个好的或坏的做法,为什么你不使用它,你会使用什么工具base64编码图像？
更新 - 测试结果
用图像测试:http://fragged.org/dev/map-shot.jpg - 133.6Kb
专用的CSS文件: http://fragged.org/dev/base64.css - 178.1Kb
GZIP编码服务器端
结果发送给客户端的大小(YSLOW组件测试):59.3Kb
保存发送到客户端浏览器的数据:74.3Kb
不错,但我认为它对于较小的图像会稍微有用.
更新:谷歌的软件工程师Bryan McQuade正在研究PageSpeed,他在ChromeDevSummit 2013上表达了数据:CSS中的uris被认为是一种渲染阻止反模式,用于在他的演讲中提供关键/最小的CSS
#perfmatters: Instant mobile web apps.请参阅http://developer.chrome.com/devsummit/sessions并记住这一点 - 实际幻灯片
有没有办法使用Chrome开发工具测试不同的图像？我创建了一个新的背景图形,我想在一个已经在<body>标签上有背景图形的实际网站上进行测试.不过,我不想改变现场网站.只需测试它,看看新图像是什么样的.这可能吗？
问题是内容脚本的范围位于您希望使用插件的网页上.
所以css背景:url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png)成为url(' http://webpageforplugin/images/ui-bg_inset-hard_100_fcfdfd_1x100.png '),以便我能够理解这一点需要指向:url('chrome-extension://extensionId/images/ui-bg_inset-hard_100_fcfdfd_1x100.png')
所以我试图haxorz document.styleSheets
var ss = document.styleSheets;
for (var i=0; i<ss.length; i++) {
var found=-1, x,i;
var rules = ss[i].cssRules || ss[i].rules;
for (var j=0; j<rules.length; j++) {
if ('.ui-helper-hidden'==rules[j].selectorText){
found=i;
break;
}
}
if (found>-1){
for (var j=0; j<rules.length; j++) {
if (x=rules[j].style.background){
if ((i=x.indexOf('url'))!=-1)
rules[j].style.background = x.replace('http://page/images/','chrome-extension://extensionId/images/');
}
}
break;
}
};
我觉得我错过了显而易见的事实.必须有一个更简单的方法.
即使我设法改变这个,我将如何获得扩展ID来构建字符串.
顺便说一下这不起作用,图标没有正确获取.(我硬编码了扩展名id)
有任何想法吗？
我正在开发一个 Chrome 扩展程序，它将一些 UI 反应组件注入到页面中。
UI 组件来自react-mdl. 使用它们需要我在项目顶部包含一个css 文件。
不幸的是，一旦css注入页面，整个页面的字体都会改变。
有没有办法来限制的范围内css使用react-mdl，使得它不会影响我注入该页面？
即使在 manifest.json 中正确声明了“image/copy.svg”，我也会收到此错误
拒绝加载 chrome-extension://pofbdjeepddggbelfghnndllidnalpde/images/copy.svg。资源必须在 web_accessible_resources 清单键中列出，以便由扩展程序之外的页面加载。
如果我去 chrome-extension://pofbdjeepddggbelfghnndllidnalpde/images/copy.svg 我可以成功地看到加载的图像。
css/style.css
.copy-icon{
content:url('chrome-extension://__MSG_@@extension_id__/images/copy.svg');
height: 16px;
width: auto;
margin-right: 0px;
}
html
<button alt="Copy to clipboard" class="clipboard" data-clipboard-text="TEXT">
<img class="copy-icon"></img>
</button>
清单文件
"manifest_version": 3,
"content_scripts": [
{
"matches": ["https://*.example.com/*"],
"js": ["contents/results.js"],
"css": ["css/style.css"],
"run_at": "document_end"
}
],
"web_accessible_resources": [{
"resources": ["images/copy.svg"],
"matches": [],
"extension_ids": []
}],
我尝试在Chrome扩展程序中使用jQuery和jQuery-UI.每次创建新选项卡时,我都会尝试在内容脚本对话框窗口中创建但我会继续:
Property '$' of object [object Window] is not a function
我想我在加载脚本时做错了.这就是我所拥有的:
{
"name":"Sample",
"description":"This is a sample",
"manifest_version":2,
"version":"2",
"background":{
"scripts":["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-1.8.3.min.js","jquery-ui.js","client.js","myscript.js"]
"run_at":"document_end",
"all_frames": true
}
],
"web_accessible_resources": [
"client.js","jquery-1.8.3.min.js","jquery-ui.js"
],
"permissions": [
"unlimitedStorage",
"http://*/",
"<all_urls>",
"tabs"
]
}
myscript.js(内容脚本):
var ss = document.createElement('script');
ss.type = "text/javascript";
ss.src = chrome.extension.getURL('jquery-1.8.3.min.js');
ss.onload = function() {
ss.parentNode.removeChild(ss);
console.log("jquery-1.8.3.min.js loaded");
};
var ss_ui = document.createElement('script');
ss_ui.type = "text/javascript";
ss_ui.src = chrome.extension.getURL('jquery-ui.js');
ss_ui.onload = function() { …