javascript - 用于修复 css 的用户脚本

Question

我正在为一页编写用户脚本。它在 chrome 下工作。 该页面上的元素与 Firefox 中的圆 Angular 元素相同。我想修复它，以便这些元素在谷歌浏览器中具有圆 Angular 边缘。

我只想在所有链接的 CSS 样式表中将 Firefox 语法替换为 chrome 语法。 最好的方法是什么？

我正在使用 jquery。

Answer 1

这对用户脚本来说不是一件微不足道的事情。

最明智的做法是安装类似 Stylish 的东西并使用它来覆盖您真正想要的样式。

---

尝试使用用户脚本执行此操作的困难在于:

1. 你不能使用 getComputedStyle() ，因为这只会返回已解析的适用样式。您不会在 Chrome 中看到“-moz”样式，也不会在 Firefox 中看到“-webkit”样式。

2. 同样，document.styleSheets也只显示过滤掉外星浏览器特定规则的已解析样式规则。

3. 您必须解析原始的 CSS 源文本。那就是textContent每个 <style>以及通过遵循 href 获得的 AJAX 嵌入文本每个 "text/css" <link> .

   这可能会变得棘手，如果您希望解决方案非常稳健，甚至不要考虑使用 RegEx。

4. 跨域限制也会妨碍获取 <link>文本，但这可以通过使用 GM_xmlhttpRequest() 来减少.

5. 一旦原始 CSS 被解析，您就可以像这样覆盖选定的 CSS 规则:

   Change Mozilla                      To CSS3                        
   ------------------------------      --------------------------
   -moz-border-radius-topright         border-top-right-radius     
   -moz-border-radius-bottomright      border-bottom-right-radius  
   -moz-border-radius-bottomleft       border-bottom-left-radius   
   -moz-border-radius-topleft          border-top-left-radius      
   -moz-border-radius                  border-radius