/TwitchTvChat

A 2d canvas overlay that display chat text

Primary LanguageJavaScript

TwitchTvChat

A 2d canvas overlay that displays chat text scrolling horizontally from right to left. I've heard them being called Bullet text or Marquee text.

You can get packaged version at Chrome Web Store. Check the project's wiki for details!

You can see it in action here on Gfycat (fast loading, less bandwidth) or here on imgur (slow loading, more bandwidth)

how it looks mouseout

Text becomes more visible when the mouse rolls over the stream video player. how it looks mouseover

Some red indicator are drawn as well to signal that the overlay is injected and ready to draw text.

Installation for development

  1. Clone repo to your computer. For example: c:\projects\TwitchTvChat
  2. Open Chrome, go to Settings, click on Extensions (make sure you have developer mode active) and then "Load unpacked extension..."
  3. Locate the folder cloned in your computer. For example: c:\projects\TwitchTvChat
  4. Open a tab onto http://www.twitch.tv/ - Notice the extension is now available there.

Icon in address bar

How to use it

  • Click on the Twitch icon added to the address bar.
  • If there is a video stream on the page AND a chat widget, then the Twitch icon will turn green letting the user know that the chat overlay has been injected to the page.

Icon extension injected

  • If the extension fails to inject, the icon will turn yellow and will enter a pending state where it will wait for the page to udpate itself (probably through ajax). If an update brings in a video stream AND a chat widget, the extension will auto inject itself and turn the icon green again.

Icon extension inject-pending

  • To remove the chat overlay, juts click on the address bar icon. Notice how it turns white again.

Why?

I saw this once in BiliBili and thought to myself: "Oh wow, that is cool. I can make that."

This is how it look there:

BiliBili reference

Testing & Development

Tested on Chrome

  • Version 48.0.2564.116 (64-bit)
  • Version 44.0.2403.125 m
  • Version 38.0.2125.111 m

Some images of past iterations can be found here and here.