[Alpha] Razer Chroma Chrome Extension | Razer Insider

[Alpha] Razer Chroma Chrome Extension

  • 7 February 2018
  • 55 replies
  • 613 views

Userlevel 5
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 🙂

This topic has been closed for comments

55 Replies

Thanks! Finally, a Chroma for Chrome! I'll surely give this a try and will tell you of any bugs I encounter.
Looks neat but sadly I'm not a Chrome user

OP, any interest in an extension for Firefox?
This is awesome!
Userlevel 4
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.
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.
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.
the keyboard is just black on imdb, and i can't do any coding to make it some other color. something u can fix?
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.
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
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();
Userlevel 7
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?
Userlevel 7
Always amazing work @WolfspiritM gonna pin this thread so everyone can get in on this (:
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
Userlevel 7
Now why isn't this working after i reopened my pc?
Userlevel 5
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
Userlevel 7
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.
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
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);
Thanks! Great work.
Already in use here and so far so good.
If I encounter bugs I'll tell you.
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
Userlevel 3
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.)
Userlevel 7
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.
Userlevel 3
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_:

Userlevel 4
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.
wow this is amazingg!!!!