Sunday, November 23, 2025

Building and Customizing a Chrome Extension: My Experience with "Simple Auto Clicker"

Introduction

Recently, I set out to create my own Chrome extension to automate button clicks with controlled delay and repetition. As both a learning exercise and a practical tool, the aim was to build an extension that could repeatedly click any button I choose, based on CSS selectors I provide.

YouTube:



The Inspiration

The idea for building this Chrome extension originally came from my own need for an auto-click tool, but as I started researching, I stumbled upon a Reddit post from another user asking for the exact same functionality. It was encouraging to see that others had the same requirement—it confirmed the utility of this project and motivated me to share my approach and code.

Tools Used

  • Comet AI browser (Perplexity)

  • Portable Chrome (for easy extension testing)


Development Steps

  1. Prompting Perplexity:
    I need a chrome extension which auto clicks a button with delay for the number of times  exactly I ask.The button (css code) will be fed manually. Give me the complete code for it.


  1. Coding:
    I received complete sample code, which included:

    • manifest.json

    • popup.html

    • popup.js


Download it here: https://github.com/svrajadba/BrowserExtension_SimpleAutoClick


  1. Testing:
    Using Portable Chrome, I enabled Developer Mode and loaded the unpacked extension folder. This made it easy to test and refine the auto-click functionality.


  1. Reverse generate the prompt (perplexity again) to summup all your fixup routine, such that the prompt can become a customizable request for future enhancements.


Generate a prompt which does the following:

1. develop the code you gave me in the last response

2. the prompt should provide me with options to tweak and customize the code further.


REsult:


Objective:

Develop and customize a Chrome extension with the following requirements:


PART 1: Initial Development

Implement a Manifest V3 Chrome extension named "Simple Auto Clicker".


Provide the full project structure: manifest.json, popup.html, and popup.js.


The popup must allow the user to input:


Any CSS selector (for target element to click)


A delay (in milliseconds) before each click


The number of times to recursively click the element


On clicking the "Auto Click" button, execute the clicking logic on the active tab according to the user’s inputs.


No need for listing detected buttons on the page—just use the user-supplied selector.


PART 2: Customization Options

Provide code, documentation, and examples for the following customization enhancements:


Trigger Mode:


Option to auto-click when the page loads or on a specific event (e.g., DOMContentLoaded, dynamic element appearance, navigation).


Multiple Selectors:


Allow the user to enter and manage multiple selectors for clicking different elements.


Advanced Timing:


Add support for random delay intervals, custom delay patterns, or more complex scheduling (e.g., click every X seconds for Y minutes).


Condition Checks:


Add advanced conditional logic: only click if element is visible, enabled, or contains specific inner text.


Click Type:


Offer the ability to emulate different click events (e.g., mouse events, double-clicks).


Reporting:


Create status or history logs in the popup UI showing click results, errors, or element information.


Error Handling:


Provide robust error management for missing selectors, failed clicks, or protected DOM elements (e.g., shadow DOM, iframe).


Integration:


Include options to trigger extension actions from a keyboard shortcut, context menu, or with REST API hooks.


Extra:


Document how to package and install the extension.


Comment and explain the code in detail, guiding customization for users with different skill levels.


Include example selectors for real web applications (YouTube Skip Ad, form submit buttons, shopping sites, etc.).


Features Implemented

  • Manifest V3 Chrome extension named "Simple Auto Clicker"

  • Inputs for:

    • Any CSS selector (user supplied)

    • Delay between clicks (in ms)

    • Number of repetitions

The auto-click logic is triggered via the extension popup—no automatic button detection; the user supplies the selector.


Testing and Results

To verify functionality, I opened YouTube and used the extension with:

  • Selector: .ytp-play-button

  • Delay: 5000ms

  • Repeat: 6


Result: The YouTube video paused and played 3 times as expected; which is 6 times click of the desired button.


Conclusion:
Developing and customizing Chrome extensions is accessible and rewarding, especially with AI-powered tools for ideation and coding support. “Simple Auto Clicker” is a great foundation for further automation and browser experimentation.


No comments:

Post a Comment

Building and Customizing a Chrome Extension: My Experience with "Simple Auto Clicker"

Introduction Recently, I set out to create my own Chrome extension to automate button clicks with controlled delay and repetition. As both a...