0

ive got a small script im using at Firefox and Chrome, it just changes the color of this page. in Firefox it just works fine, but in Chrome i can see the original color of the page first and seconds after that it changes.

Is that normal? (How) can i change that?

Community
  • 1
  • 1
Vloxxity
  • 980
  • 1
  • 9
  • 30

1 Answers1

3

Ive got no idea how to do it with a GM script, but here's how to do it as a chrome extension....

manifest.json 

{
    "name": "SO css",
    "content_scripts": [
        {
         "matches": [
            "http://*.stackoverflow.com/*"
         ],
         "css": ["new.css"],
         "run_at" : "document_start"
        }
    ],
    "version":"1.0",
    "manifest_version" : 2
}

new.css 

#custom-header       {background-color: rgb(251,122,35) !important}

#nav-questions       {background-color: rgb(251,122,35) !important}
#nav-tags            {background-color: rgb(251,122,35) !important}
#nav-users           {background-color: rgb(251,122,35) !important}
#nav-badges          {background-color: rgb(251,122,35) !important}
#nav-unanswered      {background-color: rgb(251,122,35) !important}
#nav-askquestion     {background-color: rgb(251,122,35) !important}

Info on content scripts....
http://developer.chrome.com/extensions/content_scripts.html
Info on Chrome extensions....
http://developer.chrome.com/extensions/getstarted.html

If GM scripts have a run_at equivalent then it needs to be document_start as its sounds like the css is getting injected at document_idle which will be after the dom/page is loaded. You want it before that so you dont see it change. Thats why I added !important to every css rule in my answer, to make sure their not changed by any css that might come after yours.

EDIT
Looked it up and there is a run_at variable, here's the same as above but as a GM script.... 

// ==UserScript==
// @name        SO
// @namespace   stackoverflow.com
// @include     *stackoverflow.com/*
// @version     1
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

changeHeaderColor ();

function changeHeaderColor () {
    GM_addStyle ( "                                                 \
        /*body { color: white; background-color: black !important}            \
        */                                                          \
        #custom-header       {background-color: rgb(251,122,35) !important}    \
                                                                    \
        #nav-questions       {background-color: rgb(251,122,35) !important}    \
        #nav-tags            {background-color: rgb(251,122,35) !important}    \
        #nav-users           {background-color: rgb(251,122,35) !important}    \
        #nav-badges          {background-color: rgb(251,122,35) !important}    \
        #nav-unanswered      {background-color: rgb(251,122,35) !important}    \
        #nav-askquestion     {background-color: rgb(251,122,35) !important}    \
        /*Blau: rgb(0,160,160) rgb(0,200,200)                       \
        */                                                          \
    " );
}
PAEz
  • 8,366
  • 2
  • 34
  • 27
  • You can look in the Greasemonkey repository on Github, to see how `GM_addStyle` is implemented. It's plain JavaScript, see the definition of [`function GM_addStyle`](https://github.com/greasemonkey/greasemonkey/blob/b03ac3ba06cd3be88c5654b3d938c05f4c8d7fd0/content/miscapis.js#L101-L111). – Rob W Nov 30 '12 at 18:58
  • @Rob W Good to know, had no idea it was on Github. – PAEz Dec 01 '12 at 08:40
  • the run-at doesn work ..but as a chrome extension it workes fine thanks :D – Vloxxity Dec 02 '12 at 22:34
  • @Vloxxity Glad to hear the extension worked, but supprised to hear the GM didn't. I tested it and it worked here and heres a link to document-start in the GM docs... http://wiki.greasespot.net/Metadata_Block#.40run-at – PAEz Dec 03 '12 at 07:20