Search code examples
javascriptjquerycssuserscripts

Userscript for fixing css

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.

Solution

  • 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:

    1. 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.

    2. Likewise, document.styleSheets also only shows parsed style rules with alien-browser-specific rules filtered out.

    3. 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 the href 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.

    4. Cross-domain restrictions will also hamper fetching the <link> text, but this can be reduced by using GM_xmlhttpRequest().

    5. Once the raw CSS is parsed, then and only then can you go about overriding select CSS rules like so:

      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