DEV Community

Cover image for Teleport Across Gather Town Instantly with This Chrome Extension
Atsushi Suzuki
Atsushi Suzuki

Posted on

Teleport Across Gather Town Instantly with This Chrome Extension

#extensions #javascript #productivity #webdev

Although remote work is becoming less common lately, I still work fully remotely.
Like many remote teams, we use Gather as our virtual office. Over the past couple of years, our team has quadrupled in size, and as the office map got bigger, getting to meeting rooms became a hassle—sometimes it takes more than 10 seconds just to walk across the office!

https://www.gather.town/

The retro UI—something between early Dragon Quest and MOTHER—was fun at first. But after a while, scrambling to find the right meeting room right before a call got old.
So, I built a Chrome extension called Gather Teleporter that lets you teleport instantly across the map.

Gather Teleporter

With it, you can teleport to saved locations with a single click!

Screen Recording

You can also save your favorite destinations with one button:

Save Button
Saved Locations

How It Works

The Gather web client exposes some handy APIs globally:

  • Get player info: window.game.getMyPlayer()
  • Teleport: window.game.teleport(mapId, x, y)

The extension injects a script when the page loads, waits until the game object is available, and then adds “Teleport” and “Save Location” buttons to the top left of the screen.

Saved locations are managed via localStorage, so your bookmarks won’t disappear after a restart.

Source:
https://github.com/suzuki0430/gather-teleporter

Quick Code Walkthrough 

// 1. Wait for window.game to be available
// 2. Create UI buttons and management panel
// 3. On teleport button click:
const mapId = window.game.getMyPlayer().map;
window.game.teleport(mapId, x, y);
// 4. Save to localStorage for persistence
Enter fullscreen mode Exit fullscreen mode

All the logic lives in injected.js.
It’s pretty straightforward, but you’ll find all the basics of Chrome extension dev and DOM manipulation in there.

Bonus: Instant Teleport in the Desktop App Too

Want the same instant teleport on the Gather desktop app? Here’s how you can do it manually using DevTools.

How to Set It Up

  1. Open DevTools in the desktop app
  • Mac: ⌘ + Option + I
  • Windows: Ctrl + Option + I
    1. Go to Sources > Snippets, create a new snippet called teleport-buttons.js (any name works), and paste in this script: 
/* Gather Teleport Buttons – Desktop App */
(() => {
  const TARGETS = [
    { label: "My Desk", x: 28, y: 25 },
    { label: "PC Desk", x: 32, y: 13 },
    { label: "Captain's Room", x: 77, y: 26 }
  ];

  const wait = setInterval(() => {
    if (!window.game?.getMyPlayer) return;
    clearInterval(wait);

    const box = document.createElement("div");
    box.style = `
      position:fixed; top:60px; left:30px; z-index:9999;
      display:flex; gap:10px; backdrop-filter:blur(8px);
    `;

    const style = document.createElement("style");
    style.textContent = `
      .tp-btn{
        padding:8px 16px;border-radius:8px;font:14px/1 "Segoe UI",sans-serif;
        background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
        color:#fff;cursor:pointer;transition:.2s background,.1s transform;
      }
      .tp-btn:hover{background:rgba(255,255,255,.25);transform:scale(1.05);}
      .tp-btn:active{transform:scale(.95);}
    `;
    document.head.appendChild(style);

    TARGETS.forEach(({ label, x, y }) => {
      const b = document.createElement("button");
      b.className = "tp-btn"; b.textContent = label;
      b.onclick   = () => {
        const mapId = window.game.getMyPlayer().map;
        window.game.teleport(mapId, x, y); // Core teleportation
      };
      box.appendChild(b);
    });
    document.getElementById("root")?.appendChild(box);
  }, 500);
})();
Enter fullscreen mode Exit fullscreen mode

Snippet Screenshot

If you see a popup like this, just type allow pasting to continue:

Allow Pasting

  1. Run the snippet** each time you launch the desktop app
  • Mac: ⌘ + Enter
  • Windows: Ctrl + Enter
    1. If you see something like this, you’re good to go:

Teleport Buttons Working

How to Add More Destinations

  1. Move your avatar to where you want to save.
  2. Open the Console in DevTools and run: { x: game.getMyPlayer().x, y: game.getMyPlayer().y } to get the current coordinates.

Get Coordinates

  1. Add a new entry to the TARGETS array in your snippet: 
  const TARGETS = [
    ...,
    { label: "Kitchen", x: 28, y: 25 },
  ];
Enter fullscreen mode Exit fullscreen mode
  1. Save and reload the script!

Q&A

Q. Can I teleport between maps/areas?
Nope, since the locations are saved by coordinates, cross-map teleport isn’t supported yet.
If you get stuck, just use the “Return to Lobby” button to get back to safety!

Top comments (0)