用于修复 CSS 的用户脚本
我正在为一页编写用户脚本。它在镀铬下工作。 该页面上的元素与 Firefox 中具有圆角的元素相同。我想修复它,以便这些元素在谷歌浏览器中具有圆角边缘。
我只想在所有链接的 CSS 样式表中将 Firefox 语法替换为 chrome 语法。 最好的方法是什么?
我正在使用jquery。
Im writing Userscript for one page. It is working under chrome.
On that page are same elements that have rounded corners in firefox. I want to fix it so that those element will have rounded edges in google chrome.
I just want to replace Firefox syntax with chrome syntax in all linked CSS style sheets.
What is the best way to do it?
I'm using jquery.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
对于用户脚本来说,这并不是一件小事。
最明智的做法是安装Stylish之类的东西,并用它来覆盖您真正想要的样式。
尝试使用用户脚本执行此操作的困难是:
您不能使用getCompulatedStyle(),因为这仅返回已解析的适用样式。您不会在 Chrome 中看到“-moz”样式,也不会在 Firefox 中看到“-webkit”样式。
同样,
document.styleSheets
也仅显示已解析的样式规则,并过滤掉了特定于外来浏览器的规则。您必须解析原始的 CSS 源文本。这是每个
的
textContent
以及通过遵循每个"text/ 的
href
获得的 AJAX 文本。 css".
这可能会变得棘手,如果您希望解决方案足够强大,甚至不要考虑使用 RegEx。
文本,但可以通过使用
GM_xmlhttpRequest()
来减少这种情况。解析原始 CSS 后,只有这样您才能覆盖选择的 CSS 规则,如下所示:
This is not a trivial thing to do with a userscript.
The smartest thing to do would be to install something like Stylish and use it to override the styles you really want.
The difficulties with trying to do this with a userscript are:
You can't use getComputedStyle(), because this only returns parsed, applicable styles. You won't see "-moz" styles in Chrome nor "-webkit" styles in Firefox.
Likewise,
document.styleSheets
also only shows parsed style rules with alien-browser-specific rules filtered out.You would have to parse the raw, CSS source-text. That is the
textContent
of every<style>
and the AJAXed-in text obtained by following thehref
of every"text/css"
<link>
.This can get tricky and don't even think about using RegEx if you want the solution to be robust at all.
Cross-domain restrictions will also hamper fetching the
<link>
text, but this can be reduced by usingGM_xmlhttpRequest()
.Once the raw CSS is parsed, then and only then can you go about overriding select CSS rules like so: