[Alpha] Razer Chroma Chrome Extension | Razer Insider
Skip to main content

[Alpha] Razer Chroma Chrome Extension


WolfspiritM
Hi Guys!

I'm bringing you an alpha version of a Razer Chroma Chrome Extension:
https://chrome.google.com/webstore/detail/razer-chroma/kgdhmcjgcblejgpkiebplbbhokablnde

(Also works in Opera but is not tested there)

Features:

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


  • Click on the Extension Icon.
  • Click on the pencil besides "Page Colors"
  • Copy and paste this into the green header and change the domain to whatever you like:
    code:
    // @include *://*.mydomain.com/*

  • Copy and paste this below all the other if statements and change it to your domain
    code:
    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 🙂
Did this topic help you find an answer to your question?
This topic has been closed for comments

55 Replies

kakerushin
  • Insider Mini
  • 18 replies
  • February 7, 2018
Thanks! Finally, a Chroma for Chrome! I'll surely give this a try and will tell you of any bugs I encounter.

okonietoperza
Looks neat but sadly I'm not a Chrome user

OP, any interest in an extension for Firefox?

StrikeRaid
  • 11 replies
  • February 12, 2018
This is awesome!

Arelmunda
  • Insider Mini
  • 17 replies
  • February 12, 2018
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.

  • 0 replies
  • February 12, 2018
WolfspiritM
As a "gimmick" you can enable a visualizer that overlays the youtube video in the options!

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.

kakerushin
  • Insider Mini
  • 18 replies
  • February 13, 2018
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.

GugZi
  • 16 replies
  • February 14, 2018
the keyboard is just black on imdb, and i can't do any coding to make it some other color. something u can fix?

kakerushin
  • Insider Mini
  • 18 replies
  • February 14, 2018
GugZi
the keyboard is just black on imdb, and i can't do any coding to make it some other color. something u can fix?


Go to options and change the fallback color from black to something else.

GugZi
  • 16 replies
  • February 14, 2018
kakerushin
Go to options and change the fallback color from black to something else.

not working, i have it to red, but still stay black

kakerushin
  • Insider Mini
  • 18 replies
  • February 14, 2018
GugZi
not working, i have it to red, but still stay black


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"));
chroma.send();

Surf
Vanguard
  • Vanguard
  • 722 replies
  • February 14, 2018
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?

Razer.WolfPack
Always amazing work @WolfspiritM gonna pin this thread so everyone can get in on this (:

GugZi
  • 16 replies
  • February 14, 2018
kakerushin
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"));
chroma.send();

thanks working now

Surf
Vanguard
  • Vanguard
  • 722 replies
  • February 14, 2018
Now why isn't this working after i reopened my pc?

WolfspiritM
  • Author
  • Insider Mini
  • 216 replies
  • February 15, 2018
BboySurf
Now why isn't this working after i reopened my pc?

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

deathcurzo
So do you mean that the keyboard displays the same thing as the YouTube video on the screen

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

Surf
Vanguard
  • Vanguard
  • 722 replies
  • February 15, 2018
WolfspiritM
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


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.

  • 0 replies
  • February 16, 2018
WolfspiritM
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

oh right thanks for clarifying

GugZi
  • 16 replies
  • February 22, 2018
How can i get something like this to work in Media Visualizer

code:
    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);

TheSenseiTional
Thanks! Great work.
Already in use here and so far so good.
If I encounter bugs I'll tell you.

  • 0 replies
  • March 1, 2018
OMG Yes!, thank you for this amazing thing!

I'm curious though, can you make it possible that it shows of like "Ambilight" or would that be too much? since the other one doesn't work with the HDK "yet" and this one does

ahlin941
  • Insider Mini
  • 20 replies
  • March 5, 2018
This extension is amazing! But I met a weird bug/issue with it.

I have a netflix account. When I watch netflix with using this extension. The page will show up an error message and I can't watch anything.
Once I disable the extension, netflix will back to normal.
So now I have to disable the extension when I want to watch netflix.
I am not sure that is that I am the only one meeting this problem.

I am using Vivaldi browser and I have the same problem with using Google Chrome.
And I have to disable the extension every time when I want to watch netflix.
(sorry for my bad english.)

Surf
Vanguard
  • Vanguard
  • 722 replies
  • March 5, 2018
ahlin941
This extension is amazing! But I met a weird bug/issue with it.

I have a netflix account. When I watch netflix with using this extension. The page will show up an error message and I can't watch anything.
Once I disable the extension, netflix will back to normal.
So now I have to disable the extension when I want to watch netflix.
I am not sure that is that I am the only one meeting this problem.

I am using Vivaldi browser and I have the same problem with using Google Chrome.
And I have to disable the extension every time when I want to watch netflix.
(sorry for my bad english.)


I think you're seeing some red-gray screen over your movie? That is because of the visualizer, you can always go to options and switch the "Show Visualizer" option to off, that way you won't see it or i think you shouldn't, tell us if it works.

ahlin941
  • Insider Mini
  • 20 replies
  • March 5, 2018
BboySurf
I think you're seeing some red-gray screen over your movie? That is because of the visualizer, you can always go to options and switch the "Show Visualizer" option to off, that way you won't see it or i think you shouldn't, tell us if it works.

No. Not the red-gray screen over the movie. I know what that is. I never switch that option on.
The error message comes from netflix.

Btw, thx for the reply.:wink_:


Arelmunda
  • Insider Mini
  • 17 replies
  • March 6, 2018
ahlin941
The error message comes from netflix.

Yes, I can duplicate exactly this. I usually use the Netflix app not the website so I had not noticed it, but I just tried it with the same result.

Bitauren007
  • Insider Mini
  • 26 replies
  • March 6, 2018
wow this is amazingg!!!!

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings