Members-Only
Recent Talks & Demos are for members only
You must be an AI Tinkerers active member to view these talks and demos.
Wapid: extensión para WhatsApp Web
Learn how to build and publish a Chrome extension for WhatsApp Web, using MutationObserver for dynamic SPAs and `document.execCommand` for user simulation.
Wapid es una extensión de Chrome (Manifest V3) que agrega botones de respuesta rápida directamente en la interfaz de WhatsApp Web. Con un clic, escribe y envía mensajes predefinidos automáticamente. Incluye estadísticas de uso, tiempo ahorrado estimado, exportar/importar configuraciones y drag-and-drop para reordenar botones. En la demo mostraré el código en vivo, la arquitectura con MutationObserver para sobrevivir el DOM dinámico de una SPA, y el flujo completo desde chrome.storage hasta el envío simulado del mensaje.
Chrome extension injecting customizable JSON-exportable WhatsApp Web quick-reply buttons.
- Chrome Extension Manifest V3Chrome Extension Manifest V3 is Google's modern, security-focused API framework designed to improve browser performance, privacy, and user safety.Manifest V3 represents the biggest architectural shift in the Chrome extension ecosystem since its inception. By replacing resource-heavy background pages with event-driven service workers, the platform slashes memory consumption and preserves battery life. Security gets a massive upgrade: Google bans remotely hosted code (forcing all execution logic to be packaged locally) and replaces the broad webRequest API with declarativeNetRequest to block tracking without exposing raw user data. For developers, this means writing modern JavaScript with native Promise support, managing state via storage APIs, and adapting to strict execution environments.
- ChromeThe world's dominant cross-platform web browser, powering over 3.45 billion users with speed, security, and the Blink rendering engine.Chrome is the market leader in web browsing, holding approximately 64.86% of the global browser market share as of 2025, and serving over 3.45 billion users worldwide. Built on the open-source Chromium project, it utilizes the high-performance Blink rendering engine and the V8 JavaScript engine for rapid page loading and execution. Key features include robust security protocols, an extensive Chrome Web Store for extensions, cross-device synchronization, and integrated Google services like the Gemini AI assistant. It maintains a commanding lead on both desktop (65.67% share) and mobile (67.67% share), establishing it as the essential platform for web development and daily internet access.
- StorageThe definitive testing ground and authority for enterprise and consumer data storage performance.StorageReview is the industry's premier independent laboratory for rigorous hardware benchmarking and analysis. Operating out of a dedicated facility in Cincinnati, the team puts enterprise arrays, NVMe SSDs, and high-density NAS units through real-world stress tests to provide unbiased telemetry. By covering everything from 30TB HAMR hard drives to petabyte-scale AI storage clusters, they give IT architects and enthusiasts the specific data points needed to optimize infrastructure and hardware selection.
- MutationObserverMutationObserver is a built-in Web API that monitors the DOM tree for real-time changes to elements, attributes, or text content.The MutationObserver API provides a highly efficient, non-blocking way to watch for structural changes in the DOM (Document Object Model). By replacing legacy, performance-heavy mutation events with an asynchronous microtask callback, it batches multiple DOM modifications into a single execution cycle. Developers configure the observer using specific target options (such as childList, attributes, or characterData) to track when nodes are added or removed, when class names change, or when text content is edited. This makes it an essential tool for building dynamic user interfaces, managing third-party widget integrations, and tracking state changes without degrading browser performance.
- HTML5 Drag and Drop APIA native browser API that enables elements to be dragged and dropped across web pages and operating systems using built-in DOM events.The HTML5 Drag and Drop API provides native browser support for making web elements interactive without relying on heavy external libraries. By leveraging the draggable attribute and a suite of event listeners (such as dragstart, dragover, and drop), developers can seamlessly move elements on a page or accept direct file uploads from a user's local operating system. The API uses the DataTransfer object to securely package and pass data between the drag source and the drop target, making it a highly efficient choice for building modern kanban boards, file drop zones, and customizable user interfaces.