Automatically Join Borderlands 3 Twitch/ECHOcast Rare Chest Events

Automatically Join Borderlands 3 Twitch ECHOcast Rare Chest Events.md

Automatically Join Borderlands 3 Twitch/ECHOcast Rare Chest Events

I got sick of having to push the "Join Event" button so I spent some time figuring out how to automatically join the events and wrote up these instructions.

DIRECT LINK TO THIS GUIDE: http://bit.ly/BL3AutoJoinChestEvents

---

These instructions reference the Dev Tools in Chrome, but you can do this in any browser! You just need to do the same process but in your browser's developer tools.

---

Instructions

Refer to the next section for images/visual instructions

You have to follow these instructions EVERY TIME you join a new stream! If your stream ends and you are raid joined to another stream, you'll have to follow the instructions again.

1. Install and set up the Twitch ECHOcast extension

2. Wait for a rare chest event to start

3. Right-click the "JOIN EVENT" button and click "Inspect" to open Chrome Dev Tools

   1. This is VERY important! If you open Chrome Dev Tools any other way there is a good chance it won't work.

4. If Dev Tools opened on the side or bottom of your browser:

   1. Click the three vertical dots on the top-right of the Dev Tools window to open the menu
   2. Click the icon that looks like a square sitting on top of another square
   3. This will detach Dev Tools into a separate/bigger window
   4. Maximize/resize the window as needed

5. In Chrome Dev Tools go to the "Sources" tab

6. Scroll down to where you see index.html a bunch of times

7. Expand each one until you find a child node named video_overlay.html and expand it

8. Look for a child node named <hash>.ext-twitch.tv and expand it

9. Expand the child node that is a big hash string

10. Look for a file named VideoOverlay-<hash>.bundle.js and double-click it

11. Search for: _createClass(DialogButton, [{ (it should be around line 2166)

12. Look for the line that begins var type = this.props.isDisabled ? ...

13. Insert this code snippet right below that line:

    // BEGIN AUTO-JOIN CODE
    // VideoOverlay-<hash>.bundle.js line ~1100
    // inside "_createClass(DialogButton, [{ ..."
    if (this.props.onClick.name == 'onJoin') {
        // save the onClick handler to window so that we can call it from the console
        window.joinEvent = this.props.onClick;
    }
    // END AUTO-JOIN CODE

14. Save your changes by pressing Cmd+S (macOS) or Ctrl+S (Windows, Linux, etc.)

15. In Chrome Dev Tools go to the "Console" tab

16. Paste the following code in the console and press <enter>:

    var clickButton = function () {
      if (window.eventTimer) {
        clearTimeout(window.eventTimer);
      }
    
      // check for the "JOIN EVENT" button and join the event automatically when it is present
      if (document.querySelector('.button-inner') && window.joinEvent) {
        window.joinEvent();
        window.joinEvent = null;
      }
    
      window.eventTimer = setTimeout(clickButton, 1000);
    };
    clickButton();

17. Wait for another event to occur and you should automatically join it

18. You still have to pick the item that you want to receive when you win (or just let it pick a random one for you)

19. You can close Chrome Dev Tools and it will continue to work

---

Visual Step-by-Step

Refer to the previous section for complete step-by-step instructions

1. Inspect the "JOIN EVENT" button

2. Resize Dev Tools (if needed)

3. Find the VideoOverlay file in the Sources tab

4. Paste the first code block (it's around line 2166 now, not 1100)

5. Paste the second code block into the Console tab

6. You can close Chrome Dev Tools and it will continue to work

---

Join More Than One Event Automatically

For some added fun, open up the same Twitch stream in both regular mode and incognito mode (private browsing mode, etc.) and follow the instructions for both streams. Double rewards!

You can also join different streams in different browser tabs and follow the instructions for each one.

If you join a bunch of streams so that you can auto-join the events but you aren't actively watching them, click the gear in the bottom right of the stream and turn the quality way down (360p, 160p, etc.). No point in wasting your bandwidth!

---

Automatically Claim Bonus Channel Points

1. Right-click somewhere in the main Twitch window (somewhere in chat makes it easy) and click "Inspect"

2. The Dev Tools window will open

3. Go to the "Console" tab

4. Paste the following code in the console and press <enter>:

   // automatically claim bonus points whenever the redeem button shows up below the stream chat
   // javascript context MUST be "top" for this to work!
   var checkForBonusPoints = function () {
     var bonusIcon = document.querySelector('div.chat-input div.chat-input__buttons-container button .claimable-bonus__icon');
     if (bonusIcon && bonusIcon.parentElement.parentElement.click) {
       try { console.log('Automatically redeeming bonus points...'); } catch (e) { }
       bonusIcon.parentElement.parentElement.click();
     }
     setTimeout(checkForBonusPoints, 5000);
   };
   checkForBonusPoints();

5. Whenever a button shows up to redeem bonus channel points it will automatically be clicked for you

6. You can close Chrome Dev Tools and it will continue to work

IT WORKS! Thank you! I wonder if you could make this into a Chrome extension or bookmarklet.

IT WORKS! Thank you! I wonder if you could make this into a Chrome extension or bookmarklet.

My pleasure! I need to actually get some work done today but I want my loot 😂

Unfortunately it wouldn't work in an extension (as far as I know) because it wouldn't have access to the internal code of the ECHOcast extension. That's why you have to get in and add that first block of code by hand. I'll keep figuring out if I can do it some other way though!

Yeah, I thought that might be a limitation. Although maybe there could be a way you override the loading of their file and use yours instead. But then that means you have to keep it maintained or else pull, update, save, relink every time.

I think steps 2 and 3 are unnecessary. I was able to refresh a stream and apply the code before a chest was opened.

I wonder if you could also cause a sound or more prominent popup (for if the tab is in the background) for when the viewer wins the rare chest event.

I think steps 2 and 3 are unnecessary. I was able to refresh a stream and apply the code before a chest was opened.

The reason that I put those steps in there is to ensure that the context of the console is correct:

If you open up your console any other way there's no guarantee that it's in the right context, and if it isn't, the clickButton() call won't ever see window.joinEvent and you won't ever auto-join events.

I wonder if you could also cause a sound or more prominent popup (for if the tab is in the background) for when the viewer wins the rare chest event.

Good idea! I'll have to dig around a little to see how to identify that they've won (should be as easy as looking for the DOM element with the text in it that indicates that you won. As I type this I'm on two streams waiting to actually win so that I can figure it out but I keep losing...it must know I'm watching... 😂

Maybe I'll throw something in there that will speak a sentence (that you can change) every time you win. It would only work in Chrome right now but it would be easy to do.

Put something like "You won some loot!" into the input box and change the voice to "Samantha (en-US)" and try it out here: https://mdn.github.io/web-speech-api/speak-easy-synthesis/

@theDanielJLewis Use this clickButton() instead of the one in the gist and you'll be told when you win. You can mute the stream and you'll still hear it speak to you. Change the value of speakTextWhenWon to whatever you want it to say. It's too bad we can't make it sound like Mr. Torgue 😂

According to caniuse.com this should work on most major browsers.

var clickButton = function () {
  // change this to a sentence that you want to be spoken when you win (works in most major browsers)
  var speakTextWhenWon = 'You won some loot!';

  if (window.eventTimer) {
    clearTimeout(window.eventTimer);
  }

  // check for the "JOIN EVENT" button and join the event automatically when it is present
  if (document.querySelector('.button-inner') && window.joinEvent) {
    window.joinEvent();
    window.inChestEvent = true;
    window.joinEvent = null;
  }
  
  // check for an indication of a win and speak the configured text string
  var wonElem = document.querySelector('.toast-message .text-important');
  if (window.inChestEvent && wonElem && wonElem.textContent.toLowerCase() === 'you won!') {
    window.inChestEvent = false;

    if (typeof speechSynthesis !== 'undefined' && !speechSynthesis.speaking) {
      var utterance = new SpeechSynthesisUtterance();
      utterance.text = speakTextWhenWon;
      speechSynthesis.speak(utterance);
    }
  }

  window.eventTimer = setTimeout(clickButton, 1000);
};
clickButton();

I have no idea what I'm doing. I have found where I need to insert the code but its not working It would be helpful if you could put a screenshot of what it should look like for idiots like me! Great idea tho

I have no idea what I'm doing. I have found where I need to insert the code but its not working It would be helpful if you could put a screenshot of what it should look like for idiots like me! Great idea tho

You bet, coming right up! I'm putting some together right now.

I have no idea what I'm doing. I have found where I need to insert the code but its not working It would be helpful if you could put a screenshot of what it should look like for idiots like me! Great idea tho

You bet, coming right up! I'm putting some together right now.

Thanks man!

Have you run into the message on step 13 saying, "Changes to the file were not saved to the file system"?

@Louismole There you go! I added a Visual Step-by-Step section that has images of each step. Let me know if they are clear enough.

Have you run into the message on step 13 saying, "Changes to the file were not saved to the file system"?

@theDanielJLewis after saving the changes with cmd+s/ctrl+s, right? I believe it's just Chrome letting you know that your changes are temporal and won't persist on the page (or any page that uses that cached asset later). Is it causing any problems for you?

@theDanielJLewis after saving the changes with cmd+s/ctrl+s, right? I believe it's just Chrome letting you know that your changes are temporal and won't persist on the page (or any page that uses that cached asset later). Is it causing any problems for you?

Yes, that step. And yes, I think it's causing problems and I can't get things to work anymore. I'm pretty sure that warning didn't show before.

@theDanielJLewis That's strange that it would stop working. I get the same message on mine and things are still working:

Is the javascript context of your console set to video_overlay.html? If not (it may be top), click it and select video_overlay.html:

I've noticed that the ECHOcast extension stops triggering rare chest events after a while, even though the streamer is hitting them. It seems to be an issue with the extension itself. I just had to reload my two stream windows, re-add the code, and re-run the console code. Everything is working great again.

Let me know if you still can't get it to work and I'll be happy to help!

I think steps 2 and 3 are unnecessary. I was able to refresh a stream and apply the code before a chest was opened.

The reason that I put those steps in there is to ensure that the context of the console is correct:

If you open up your console any other way there's no guarantee that it's in the right context, and if it isn't, the clickButton() call won't ever see window.joinEvent and you won't ever auto-join events.

This is probably why things weren't working for me.

Yes, getting the context right is important. I was trying to short circuit by jumping right in to dev tools, or using a dev tool window I already had open, and it wasn't catching the .joinEvent. But working well. My problem has been the echocast plugin dropping out and not firing the events at all. But this trick is working really well when I do it right. Thank you!

Yes, getting the context right is important. I was trying to short circuit by jumping right in to dev tools, or using a dev tool window I already had open, and it wasn't catching the .joinEvent. But working well. My problem has been the echocast plugin dropping out and not firing the events at all. But this trick is working really well when I do it right. Thank you!

@EvilConsultant it's an easy part to miss, unfortunately! I'm glad it's working for you! The ECHOcast extension is terribly unreliable, isn't it? Even if I don't do anything to try to automatically join the events, it still seems to somehow miss a pretty high number of the events. It's maddening.

this dosn't work anymore sadly for me, i am using chrome and did follow your steps to the letter but it just crashes the extension now

@Dragonscreed007 that's not good! I haven't used the extension for quite a while (or played BL3, sadly), so I haven't had any reason to update the process. If I ever end up watching streamers and playing again, I'll get it updated.

Thanks for the heads up!