/TouchStadia

TouchStadia is a Chrome Extension which adds on-screen joystick control to Stadia for touchscreen devices!

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

TouchStadia logo

TouchStadia

TouchStadia in Chrome Web Store

TouchStadia is a Chrome Extension and JavaScript snippet which adds on-screen joystick control to Stadia for touchscreen devices!

Articles: The Verge, Kotaku, Lifehacker, Android Central, 9to5Google, XDA Developers, SlashGear, Android Police, Android Community, Android Headlines, Stadia Source

Demo

Demo video

Usage

Android

Chrome for Android does not support extensions, so we must load TouchStadia into the browser manually! Here's a tutorial video you can use to supplement the instructions below.

  1. Open the snippet URL on your phone in Chrome (this works on regular Chrome). I recommend going to the link every time as updates will only be available there.
  2. Select all the text in the box, and copy it.
  3. Open Stadia and make sure to select the "Desktop site" option in the Chrome options menu so it launches properly.
  4. Once Stadia is open, tap the address bar and type javascript:. Paste the text you copied immediately after the colon, without any spaces between. You must type javascript:, as Chrome will remove it if you try to paste it in.
  5. Hit the ENTER key on your keyboard. Stadia should recognise that a joystick was connected.
  6. Enjoy! You must repeat this procedure if you or your browser closes or refreshes Stadia.

Snippet safety

Yes, running snippets of JavaScript on websites can be dangerous if they come from unreliable sources. That being said, my GitHub profile is linked to my personal website with my real name. My reputation and career as a software developer are on the line. I welcome and encourage all security analyses of the TouchStadia code. Please feel free to contact me if there are any concerns.

Desktop

Simply install the extension and open or refresh Stadia! Click the extension icon to show configuration options.

To move buttons around, press CTRL+; in Stadia and layout mode will be activated (indicated by a magenta background.) Tap/click and drag buttons to change their positions during this time. Press CTRL+; again to disable layout mode. This hotkey will not work when Stadia is in-game. This is a known issue, so to ensure function please only use this shortcut outside of games for now. Layout mode is only supported on desktop currently.

Keep in mind that once you change the position of a button in layout mode, that button will no longer move relative to the window border when resizing your browser, so you must maintain the same browser window size for the layout to look consistent. If you create a layout, then shrink your browser, it's possible to lose buttons outside the visible area! To reset the layout, press the Reset button in the TouchStadia configuration.

Testing

TouchStadia also has manifest permissions to run on html5gamepad.com, where you can test the input of the controller with visual feedback! This is useful if you'd rather not wait for a game to open!

Pull requests

All pull requests are welcome! Please feel free to improve TouchStadia as you see fit, there's many improvements to be made! If you're thinking of making a change to https://touchstadia.ca, please make a pull request in the website repo instead!

Credits

  • Thanks to /u/revnort for creating the amazing vector images used for the on-screen buttons and sticks!
  • Thanks to /u/-sxp- for creating the controller mapping fix code snippet that inspired this extension!

Disclaimer

TouchStadia is not affiliated, associated, authorized, endorsed by, or in any way officially connected with Google Stadia, Google LLC, Alphabet Inc., or any of their subsidiaries or affiliates.