[Alpha] Razer Chroma Chrome Extension

Discussion in 'Razer Chroma' started by WolfspiritM, Feb 7, 2018.

Thread Status:
Not open for further replies.
  1. WolfspiritM

    WolfspiritM Active Member

    Hi Guys!

    I'm bringing you an alpha version of a Razer Chroma Chrome Extension:

    (Also works in Opera but is not tested there)

    • Audiovisualizer for Youtube, Twitch and Spotify Web (any more wanted?)
    • Colors when visiting:
      - razerzone
      - stackoverflow
      - github
      - twitter
      - amazon
      - reddit
      - facebook
    • Read out the pages "meta theme-color" and use that
    • Very customizable with own scripts written in typescript
    • Integrated script editor similar to VSCode
    • Google Wave Effect
    • Scripts can be turned off and on
    • Rightclick a page and select "Freeze-Tab" to make the colors stuck (for example if you want youtube but on a second screen have another tab open)
    • As a "gimmick" you can enable a visualizer that overlays the youtube video in the options!


    How to add own Color for your favourite website?

    1. Click on the Extension Icon.
    2. Click on the pencil besides "Page Colors"
    3. Copy and paste this into the green header and change the domain to whatever you like:
      // @include *://*.mydomain.com/*
    4. Copy and paste this below all the other if statements and change it to your domain
      if(Data.site.domain.indexOf("mydomain") !== -1) chroma.setAll(new Color("#3b5998"));
    Upcoming changes:
    Replace Google Wave with a more subtile effect per default
    - Make it easier to add custom colors for Domains
    - Maybe Include the Blockly engine to make scripts in general much easier to create.
    - More stable

    Let me know what you think :)
    Last edited: Mar 1, 2018
  2. kakerushin

    kakerushin Well-Known Member

    Thanks! Finally, a Chroma for Chrome! I'll surely give this a try and will tell you of any bugs I encounter.
    pancholr, hugosh8kes, .Surf. and 8 others like this.
  3. okonietoperza

    okonietoperza Active Member

    Looks neat but sadly I'm not a Chrome user

    OP, any interest in an extension for Firefox?
  4. StrikeRaid

    StrikeRaid Member

    This is awesome!
    hugosh8kes, .Surf., iobhuva and 5 others like this.
  5. Arelmunda

    Arelmunda Well-Known Member

    I will certainly give this a try. Anything Chroma is good to me.

    Edit: Tried it, already liking it much. Easy to add a colour for my favourites, working 100% so far as I can tell.
    Especially liking the fact that colour changes of Synapse 2 and Synapse 3 devices are synchronised without having to change them separately.
    Last edited: Feb 12, 2018
  6. deathcurzo

    deathcurzo Active Member

    So do you mean that the keyboard displays the same thing as the YouTube video on the screen? I swear there was something called ambilight a while back that did something similar.

    Anyway, cool project. I hope to see it develop more.
    SylvanasMage, .Surf. and fudGsicle like this.
  7. kakerushin

    kakerushin Well-Known Member

    I noticed that the fallback color's black and that we can pick whatever color we want if the website we're visiting doesn't have customized Chroma color. Is it possible to choose my keyboard's Synapse lighting effect as fallback color?

    Also, my Lancehead TE doesn't get the Google Wave color like my keyboard gets when visiting Google pages.

    EDIT: It appears that websites with no Chroma customization will automatically show my default Synapse lighting. Any missing url regex in Page Colors will show the fallback color instead.
    Last edited: Feb 13, 2018
  8. GugZi

    GugZi Member

    the keyboard is just black on imdb, and i can't do any coding to make it some other color. something u can fix?
    SylvanasMage and fudGsicle like this.
  9. kakerushin

    kakerushin Well-Known Member

    Go to options and change the fallback color from black to something else.
    SylvanasMage and fudGsicle like this.
  10. GugZi

    GugZi Member

    not working, i have it to red, but still stay black
    fudGsicle likes this.
  11. kakerushin

    kakerushin Well-Known Member

    My bad. Edit Page Colors. You need to add the regex for your page at the top of the script as @url. Just take a look at the lines highlighted in blue and add it to your Page Colors script.

    // ==ChromaScript==
    // @name Page Colors
    // @author Wolfspirit
    // @description Sets colors for different pages
    // @version 1
    // @FPS 5
    // @include *://*.stackoverflow.com/*
    // @include *://*.imdb.com/*
    // ==/ChromaScript==

    // Make sure to also add the regex for your page at the top as @url!
    if(Data.site.domain.indexOf("imdb") !== -1) chroma.setAll(new Color("#ff0000"));
  12. .Surf.

    .Surf. Well-Known Member

    This is nice but i think we need more steps into it, i mean i want my fallback color to be the regular chroma effect that was on Synapse and not whatever color this extension gives. Can i do that? Cause i'm always having my chrome in background even when i'm gaming and check it once in a while.

    Reedit: Found the cause, i just need to uncheck the "keep chroma active all the time" and by doing this when i minimize it the windows bar, my chroma wave gets back though. And i very much like this extension, i'm curious if we can have a chroma effect contouring the browser?
    Last edited: Feb 13, 2018
    fudGsicle and SylvanasMage like this.
  13. Razer.WolfPack

    Razer.WolfPack Administrator Staff Member

    Always amazing work @WolfspiritM gonna pin this thread so everyone can get in on this :)
  14. GugZi

    GugZi Member

    thanks working now
    fudGsicle and kakerushin like this.
  15. .Surf.

    .Surf. Well-Known Member

    Now why isn't this working after i reopened my pc?
    Goomba2711 likes this.
  16. WolfspiritM

    WolfspiritM Active Member

    It's possible there is an issue when the computer wents to sleep and wakes up again. I'll investigate :)

    No No. What I mean is that youtube shows an overlaying visualizer as a gimmik. It doesn't have anything to do with Chroma so. You can enable that visualizer in the options. Like this: https://gyazo.com/22f0df1bde729f0b2951e42167a27e47
  17. .Surf.

    .Surf. Well-Known Member

    It's a bit confusing because yesterday it didn't work at all and began working in the evening, and today works perfectly well with no problems. I don't understand and there's nothing different that i do.
    Last edited: Feb 15, 2018
  18. deathcurzo

    deathcurzo Active Member

    oh right thanks for clarifying
    Stroheim likes this.
  19. GugZi

    GugZi Member

    How can i get something like this to work in Media Visualizer

        chroma.Keyboard.setKey([Key.Macro1, Key.Macro2, Key.Macro3, Key.Macro4, Key.Macro5], new Color(1,1,1));
        let volcolor = new Color(0,255,0);
        if(Data.volumePercentage>0) chroma.Keyboard.setKey(Key.Macro5, volcolor);
        if(Data.volumePercentage>25) chroma.Keyboard.setKey(Key.Macro4, volcolor);
        if(Data.volumePercentage>50) chroma.Keyboard.setKey(Key.Macro3, volcolor);
        if(Data.volumePercentage>75) chroma.Keyboard.setKey(Key.Macro2, volcolor);
        if(Data.volumePercentage>100) chroma.Keyboard.setKey(Key.Macro1, volcolor);
    geoDeepGreenvision044 likes this.
  20. Thanks! Great work.
    Already in use here and so far so good.
    If I encounter bugs I'll tell you.
Thread Status:
Not open for further replies.
Sign In with Razer ID >

Don't have a Razer ID yet?
Get Razer ID >