Auto Clicker

Project Overview

Auto Clicker is a Chrome extension built for one specific, personal use case: liking a TikTok livestream rapidly and continuously, without manually tapping a phone screen or clicking a mouse hundreds of times. What started as a solution to finger fatigue turned into a general-purpose browser automation tool that works on any webpage with any interactive element.

The extension runs in the popup. You enter a CSS selector for the element you want to click, a keyboard key code you want to simulate, or both. You set the rate — clicks or key presses per second, or per minute — and hit Start. The extension injects a lightweight interval runner directly into the active tab using the Chrome Scripting API, and the automation runs in the page's own JavaScript context until you stop it.

It's a personal tool. It's not published to the Chrome Web Store. It loads as an unpacked extension in Chrome developer mode.

What It Does

• Element clicking — provide any valid CSS selector (class, data attribute, ID, or any combination) and the extension will click the matching element at the configured rate. If the element is re-rendered by the page's framework, the selector is re-queried on each interval tick so it doesn't break on dynamic DOM updates.
• Keyboard event simulation — provide any KeyboardEvent.code value (e.g. KeyL, Space, Enter) and the extension dispatches keydown, keypress, and keyup events at the configured rate. Quick-fill badges for common keys are built into the UI.
• Simultaneous modes — both element clicking and key simulation can run at the same time, each at their own independent rate. On TikTok, this means clicking the like button via its data attribute while also firing the L key — both signals reaching the page at once.
• Live interval display — as you type the rate, the calculated interval in milliseconds updates in real time so you always know the exact timing before starting.
• Persistent state — the selector, key, and rate settings are saved via the Chrome Storage API and restored when you reopen the popup, so you don't have to re-enter settings every session.
• Status indicators — coloured dots in the header and on each section show at a glance whether automation is running and which modes are active.

The Problem

There's a TikTok streamer I follow regularly. During her livestreams she'll say "Everybody tap your screen" — meaning: like the stream as fast as you can. On TikTok, every tap on the screen registers as a like, and the way the platform surfaces streams to more viewers is partly driven by how much real-time engagement the stream generates. The more people tap, the more visible the stream becomes.

Doing this on a phone means tapping the screen with your thumb or index finger as rapidly as possible for however long she's making the call. Doing it on the TikTok web player means clicking the like button with a mouse, or holding down the L key. Either way, sustained rapid input gets tiring quickly — especially across a long stream where she might do this multiple times.

The actual interaction is simple: click a button or press a key, many times, fast, without stopping. The limiting factor is purely physical.

The Solution

A Chrome extension handles both inputs — element clicks and keyboard events — at rates the human hand can't sustain. Here's how it works under the hood.

Architecture

The extension is Manifest V3 with three files: a manifest, a popup HTML page with all the UI, and a popup JavaScript file with all the logic. There is no background service worker and no content script — everything is initiated from the popup via chrome.scripting.executeScript.

When Start is pressed, the popup serialises the configured tasks into a plain object array and passes it to an injected function that runs inside the active tab's JavaScript context. That function sets up setInterval loops on window.__ac — a namespace on the page's global object. Each interval either queries the selector and calls .click() on the matched element, or dispatches three keyboard events (keydown, keypress, keyup) in sequence.

Stopping clears all intervals on window.__ac and resets the namespace. Because the intervals live in the page context, they continue running if the popup is closed — Stop must be clicked before closing to halt them.

Rate Calculation

The UI accepts a rate as "N per second" or "N per minute". The interval in milliseconds is derived as Math.round(1000 / cps) where cps is clicks per second (converted from per-minute rates by dividing by 60). The calculated interval is displayed live as you type — in milliseconds if under one second, in seconds if over.

TikTok Targeting

TikTok's web player renders the like button with a data-e2e attribute that identifies it. Passing [data-e2e="room-chat-like-btn"] as the selector targets that button precisely without relying on class names that could change with any deployment. Simultaneously, setting the key to KeyL fires TikTok's native keyboard shortcut for liking, sending both signals to the page at the configured rates.

State Persistence

The Chrome Storage API (chrome.storage.local) saves the selector, key value, rates, and unit preferences whenever any field changes. On popup open, stored values are restored and the interval displays are recalculated from them. Settings survive the popup being closed and Chrome being restarted.

Outcomes

• The original problem is fully solved — during a livestream, opening the extension, pasting in the selector and the L key, and pressing Start handles everything. No manual clicking required.
• Both input modes run independently and simultaneously, which means the extension can send more signals per second than either mode could alone.
• The extension is general-purpose. Any page with a clickable element or keyboard shortcut can be automated the same way — it's not tied to TikTok in any way.
• Not published to the Chrome Web Store. It's loaded as an unpacked extension and used as a personal tool.

Key Learnings

• Manifest V3 scripting requires serialisable functions: The function passed to chrome.scripting.executeScript must be self-contained — it runs in the tab's JavaScript context, not the extension's. Any variables it needs must be passed through the args parameter, not captured from the extension's closure.
• Intervals survive the popup closing: Because the runner lives on window.__ac in the page context, it keeps running after the popup is dismissed. This is actually useful — you can close the popup without stopping the automation — but it also means a Stop button that re-opens the popup would be a reasonable future addition.
• Data attributes are more stable selectors than class names: TikTok's UI components are generated with hashed or frequently rotated class names. Targeting data-e2e attributes is intentionally stable — they exist for end-to-end testing and are treated as stable identifiers by the team that maintains the page.