Giter VIP home page Giter VIP logo

twitch-userscript-use-chitchat's Introduction

Use Chit Chat

This is a userscript that replaces the chat on Twitch with an embed of Chit Chat by mape.

Bookmarklet

Instead of downloading a UserScript you can create a bookmarklet. To do so you need to:

  1. Copy the code below
javascript:(function()%7B%2F%2F%20Get%20the%20container%20that%20contains%20the%20chat%20messages.%0Aconst%20chatContainer%20%3D%20document.querySelector(%22.chat-list--default%22)%3B%0A%0A%2F%2F%20Delete%20all%20child%20nodes.%0Awhile%20(chatContainer.firstChild)%20%7B%0A%20%20%20%20chatContainer.removeChild(chatContainer.firstChild)%3B%0A%7D%0A%0A%2F%2F%20Create%20an%20iframe%20and%20load%20ChitChat%20into%20it%0Aconst%20chatFrame%20%3D%20document.createElement(%22iframe%22)%3B%0Aconst%20casterURL%20%3D%20window.location.pathname.split('%2F')%3B%0A%2F%2F%20chatFrame.id%20%3D%20%22ChitChatFrame%22%3B%0AchatFrame.setAttribute(%22src%22%2C%20%22https%3A%2F%2Fchitchat.ma.pe%2F%22%20%2B%20casterURL%5B1%5D)%3B%0AchatFrame.style.width%20%3D%20%22100%25%22%3B%0AchatFrame.style.height%20%3D%20%2299%25%22%3B%0A%0A%2F%2F%20Append%20the%20iframe%20to%20the%20container%20that%20contains%20the%20chat%20messages.%0AchatContainer.appendChild(chatFrame)%3B%7D)()%3B
  1. Create a new bookmark.
  2. Paste the code into the URL field of the bookmark.
  3. Name the bookmark whatever you want. (e.g. "Replace Twitch Chat with ChitChat")
  4. Navigate to the stream you want to watch.
  5. Click on the bookmarklet to replace chat with ChitChat. To undo just reload the page.

Installation

  1. Make sure that you have installed the Tampermonkey browser extension. You can get it on tampermonkey.net.
  2. Install the userscript by clicking this link.

Usage

After installing the script make sure that it is enabled. It will then replace the chat automatically.

Chit Chat is still not loading

Make sure that your browser or third party extensions don't block cookies nor local storage data.

License

MIT

twitch-userscript-use-chitchat's People

Contributors

marcgamesons avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

timeflex1 aspiers

twitch-userscript-use-chitchat's Issues

Spam Reason taking up space even when disabled.

There seems to be an invisible barrier at the extreme right of every chat line that is blocking chat from reaching all the way to the end of the line. This happens even though I have "Hide spam reason" enabled. This messes up formatting and copypasta alignment, and just makes the chit side of chitchat unnecessarily skinny:
image

I am on Firefox 64 with Tampermonkey 4.8.5847 with your userscript latest version

Mutation Observer can't find node

The first time the DOM of the website is loading the mutation observer can't find the node. If the page is refreshed however, it will find the node.

@mentions messages are colored red

I think chitchat was designed for streamers, not viewers. So, opening a stream (lets say forsen) with chitchat enabled shows red colored messages for lines that mention @forsen. This would make sense if I was forsen, but I am a viewer and the red colored messages should be for lines that mention @me not the streamer. Perhaps there should be some kind of choice.
Example:
image

Won't work in Firefox

Firefox doesn't allow the unsecure ws:// protocol in secure https:// protocol enabled webpages. The server owners (ChitChat and Twitch) would have to upgrade to the secure wss:// protocol.

A user on stackoverflow suggests to disable a setting in Firefox as a workaround.

"Going to firefox's about:config and toggling network.websocket.allowInsecureFromHTTPS will get rid of the SecurityError." - source: https://stackoverflow.com/questions/11768221/firefox-websocket-security-issue This doesn't work but you can read more about the error on stackoverflow.

I am sorry but for now I am not able to fix this issue.

Why keep multiple versions in the repo?

Is there any benefit to keeping old versions in the repo? The whole point of git is to keep old history, so it seems to me that they could be deleted from the repo to simplify it. Similarly I'm confused by the presence of identical copies of the file in src/latest/ and src/update/.

[BUG] Not Working - No Replacement

Description of the bug
There seems to be no replacement effect for the twitch chat with chit-chat's version of the chat.

To Reproduce
Steps to reproduce the behaviour:

  1. Installed Tampermonkey
  2. Installed script from this repo
  3. Turned cookies blocking to minimal in browser settings, along with whitelisting twitch.tv and chitchat.ma.pe
  4. Went to a twitch channel and confirmed the script is running

Expected behaviour
Twitch chat should be replaced with the chit-chat app spam filtering feature.

Screenshots
N/A: See Log File instead

Desktop:

  • Windows 10 Home 64-bit
  • Chrome Version 88.0.4324.150 (Official Build) (64-bit)
  • Edge Version 88.0.705.68 (Official build) (64-bit)

Additional context
I believe this is the correct error log (pulled from the F12 menu).
www.twitch.tv-1613391340881.log

[BUG] Works fine except in Popout Chat

Describe the bug
The script works perfectly in most normal chats. But when you pop out a chat, the link goes from "twitch.tv/[channel name]" to "twitch.tv/popout/[channel name]/chat?popout="

To Reproduce
Steps to reproduce the behavior:

  1. Go to any channel.
  2. Click on the settings menu
  3. Click popout chat
  4. Script tries to join channel "Popout" through chitchat.

Expected behavior
[channel name] is joined instead of "popout"

Screenshots
https://i.imgur.com/sWPq1zA.png

Desktop (please complete the following information):

  • Browser [Edge Chromium]
  • Version [Version 99.0.1150.46 (Official build) (64-bit)]

Doesn't work

I guess something must have changed with Twitch, because this userscript expects the page to have some element with class chat-list__lines, but there is no such element.

not working anymore?

All i get is a purple/black gradient frame. Turned all script blockers off but nothing.

ps: im on chrome win64

Loading is unreliable

Since the script activates after a 2000ms timeout, sometimes the browser is not ready and so the script doesn't work. A more reliable approach would probably be to activate on the documentReady event or similar.

[REQUEST] Bookmarklet version

Would it be possible to turn your userscript into a bookmarklet that can be added to the bookmark bar allowing you to enable it when you wanted it?
It also makes it one less thing required to be installed (mod for the browser).

[BUG] blank chat pane

Describe the bug

This script seems to have stopped working, I only see a blank pane where the chat should be.

To Reproduce
Simply set up the script and visit a stream.

Expected behavior
The cleaned up chat embed should be visible.

Screenshots
image

Desktop (please complete the following information):

  • Browser: Chrome
  • Version 113.0.5672.92 (Official Build) (64-bit)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.