{"id":730,"date":"2026-10-29T10:00:00","date_gmt":"2026-10-29T10:00:00","guid":{"rendered":"https:\/\/zydeno.com\/?p=730"},"modified":"2026-10-29T10:00:00","modified_gmt":"2026-10-29T10:00:00","slug":"adaptar-una-aplicacion-movil-a-una-extension-de-navegador","status":"publish","type":"post","link":"https:\/\/zydeno.com\/es\/adaptar-una-aplicacion-movil-a-una-extension-de-navegador\/","title":{"rendered":"Adaptar una aplicaci\u00f3n m\u00f3vil a una extensi\u00f3n de navegador"},"content":{"rendered":"<p>KeyRush comenz\u00f3 en iPhone y Android. Cuando decidimos trasladarlo a Chrome, ten\u00edamos dos opciones: envolver la aplicaci\u00f3n existente en alguna capa multiplataforma o reescribirla para el navegador. La reescribimos, port\u00e1ndola desde la versi\u00f3n Android. JavaScript puro, Manifest V3, sin framework y sin pasos de compilaci\u00f3n. Esto es lo que aprendimos al hacerlo.<\/p>\n<h2>El teclado ya es una realidad<\/h2>\n<p>En un tel\u00e9fono, una aplicaci\u00f3n para aprender a teclear es una soluci\u00f3n aproximada. El teclado en pantalla es a la vez el dispositivo de entrada y el objeto de aprendizaje, lo cual resulta una situaci\u00f3n un poco extra\u00f1a. En el navegador, el usuario tiene un teclado real bajo los dedos, precisamente lo que la aplicaci\u00f3n intenta ense\u00f1arle.<\/p>\n<p>Eso cambi\u00f3 m\u00e1s de lo que esper\u00e1bamos. Las distribuciones var\u00edan seg\u00fan el pa\u00eds y el tipo de teclado. Existen teclas modificadoras. La gente mantiene pulsadas las teclas, pulsa dos a la vez o cambia de distribuci\u00f3n en mitad de una sesi\u00f3n. En un teclado f\u00edsico, cualquier peque\u00f1a imprecisi\u00f3n en el simulador se nota de inmediato, por lo que tuvimos que ser mucho m\u00e1s cuidadosos a la hora de determinar qu\u00e9 se considera una pulsaci\u00f3n correcta.<\/p>\n<p>Hemos mantenido el teclado en pantalla, pero su funci\u00f3n ha cambiado. En un tel\u00e9fono, es lo que pulsas. En la extensi\u00f3n, es una gu\u00eda: resalta la tecla que debes pulsar a continuaci\u00f3n, para que puedas mantener la vista en la pantalla en lugar de en tus manos. Esa es la esencia misma de la mecanograf\u00eda a ciegas, y el navegador nos ha permitido tom\u00e1rnosla en serio.<\/p>\n<h2>Los tama\u00f1os de las ventanas no son fijos<\/h2>\n<p>Las pantallas de los tel\u00e9fonos tienen unas cuantas formas diferentes. Las ventanas del navegador pueden tener cualquier forma. La ventana emergente de una extensi\u00f3n es estrecha y corta; una pesta\u00f1a completa puede ser enorme. La misma aplicaci\u00f3n ten\u00eda que funcionar bien en ambos casos.<\/p>\n<p>Por eso ofrecemos ambas opciones. KeyRush se abre en una ventana emergente para hacer una prueba r\u00e1pida y en una pesta\u00f1a completa cuando necesitas espacio para las lecciones y las competiciones. Con Alt+May\u00fas+K se abre sin tener que usar el rat\u00f3n, lo cual, para una aplicaci\u00f3n de mecanograf\u00eda, nos pareci\u00f3 la configuraci\u00f3n predeterminada m\u00e1s adecuada.<\/p>\n<h2>Las ventanas emergentes lo olvidan todo<\/h2>\n<p>Una ventana emergente se cierra en cuanto haces clic fuera de ella, y todo lo que ten\u00eda almacenado en memoria se pierde con ella. En Android, una aplicaci\u00f3n puede pasar a segundo plano y reanudarse exactamente donde se qued\u00f3. En una ventana emergente, hay que dar por hecho que el usuario puede desaparecer en cualquier momento.<\/p>\n<p>As\u00ed pues, todo lo importante se almacena en la memoria del navegador, en lugar de en la ventana, y tanto la ventana emergente como la pesta\u00f1a completa leen el mismo estado almacenado. Cuando terminas una prueba en la ventana emergente, abres la pesta\u00f1a completa y el resultado ya est\u00e1 ah\u00ed. Es una peque\u00f1a decisi\u00f3n arquitect\u00f3nica que ha hecho que toda la extensi\u00f3n resulte m\u00e1s s\u00f3lida.<\/p>\n<h2>Los permisos son una decisi\u00f3n de dise\u00f1o<\/h2>\n<p>Las aplicaciones Android tambi\u00e9n solicitan permisos, pero los usuarios rara vez los leen. Los usuarios de extensiones suelen hacerlo, y el navegador muestra las advertencias directamente en la ventana de instalaci\u00f3n. KeyRush solo solicita uno: almacenamiento. No necesita ver las p\u00e1ginas que visitas, as\u00ed que no te lo pide. Hemos escrito una entrada aparte sobre por qu\u00e9 eso es importante para nosotros.<\/p>\n<h2>Lo que conservamos<\/h2>\n<p>Casi todo el contenido del producto se ha mantenido sin cambios: pruebas cronometradas de velocidad de 15, 30, 60 y 120 segundos, lecciones de mecanograf\u00eda organizadas por dedo, competiciones contra oponentes del ordenador, estad\u00edsticas, un mapa de calor de las teclas que fallas, el reto diario y los 44 logros. Cualquiera que pase del m\u00f3vil a la extensi\u00f3n deber\u00eda sentirse como en casa en menos de un minuto.<\/p>\n<p>Tambi\u00e9n hemos mantenido los principios. Funciona totalmente sin conexi\u00f3n. El progreso se guarda \u00fanicamente en tu navegador. No hay ninguna cuenta ni es necesario iniciar sesi\u00f3n.<\/p>\n<h2>Por qu\u00e9 no compartimos el c\u00f3digo<\/h2>\n<p>Reescribir el c\u00f3digo parec\u00eda caro y, en cierto modo, lo fue. Pero un entrenador de mecanograf\u00eda no es una aplicaci\u00f3n muy grande, y la l\u00f3gica que importa \u2014puntuaci\u00f3n, lecciones, niveles, logros\u2014 es lo suficientemente sencilla como para adaptarla cuidadosamente a mano a partir del original de Android. A cambio, hemos conseguido una extensi\u00f3n que se carga al instante, no tiene dependencias de terceros que mantener actualizadas y funciona como si estuviera hecha para el navegador, porque as\u00ed es.<\/p>","protected":false},"excerpt":{"rendered":"<p>Qu\u00e9 cambi\u00f3 cuando KeyRush pas\u00f3 de Android a Chrome\u2026 y qu\u00e9 nos negamos a cambiar.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-730","post","type-post","status-publish","format-standard","hentry","category-journal"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.2 (Yoast SEO v22.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Porting a phone app to a browser extension - Zydeno Studio<\/title>\n<meta name=\"description\" content=\"Lessons from porting the KeyRush typing trainer from Android to a Manifest V3 Chrome extension: real keyboards, popups, window sizes and permissions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zydeno.com\/es\/adaptar-una-aplicacion-movil-a-una-extension-de-navegador\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Porting a phone app to a browser extension\" \/>\n<meta property=\"og:description\" content=\"Lessons from porting the KeyRush typing trainer from Android to a Manifest V3 Chrome extension: real keyboards, popups, window sizes and permissions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zydeno.com\/es\/adaptar-una-aplicacion-movil-a-una-extension-de-navegador\/\" \/>\n<meta property=\"og:site_name\" content=\"Zydeno Studio\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-29T10:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/zydeno.com\/wp-content\/uploads\/2026\/10\/zydeno-social.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andrii Matiushev\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrii Matiushev\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/\"},\"author\":{\"name\":\"Andrii Matiushev\",\"@id\":\"https:\/\/zydeno.com\/#\/schema\/person\/1af4d0e254f05b407f306ede28252259\"},\"headline\":\"Porting a phone app to a browser extension\",\"datePublished\":\"2026-10-29T10:00:00+00:00\",\"dateModified\":\"2026-10-29T10:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/\"},\"wordCount\":666,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/zydeno.com\/#organization\"},\"articleSection\":[\"Journal\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/\",\"url\":\"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/\",\"name\":\"Porting a phone app to a browser extension - Zydeno Studio\",\"isPartOf\":{\"@id\":\"https:\/\/zydeno.com\/#website\"},\"datePublished\":\"2026-10-29T10:00:00+00:00\",\"dateModified\":\"2026-10-29T10:00:00+00:00\",\"description\":\"Lessons from porting the KeyRush typing trainer from Android to a Manifest V3 Chrome extension: real keyboards, popups, window sizes and permissions.\",\"breadcrumb\":{\"@id\":\"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/zydeno.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Porting a phone app to a browser extension\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/zydeno.com\/#website\",\"url\":\"https:\/\/zydeno.com\/\",\"name\":\"Zydeno Studio\",\"description\":\"Zydeno is an indie studio designing apps across many categories \u2014 united by a shared obsession with craft and detail. Fast, opinionated, independent apps for iPhone, Android, Windows and Mac, plus extensions for Chrome, Edge and Firefox. Built slowly, shipped carefully.\",\"publisher\":{\"@id\":\"https:\/\/zydeno.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/zydeno.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/zydeno.com\/#organization\",\"name\":\"Zydeno Studio\",\"url\":\"https:\/\/zydeno.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/zydeno.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/zydeno.com\/wp-content\/uploads\/2026\/04\/cropped-icon-512-1.png\",\"contentUrl\":\"https:\/\/zydeno.com\/wp-content\/uploads\/2026\/04\/cropped-icon-512-1.png\",\"width\":512,\"height\":512,\"caption\":\"Zydeno Studio\"},\"image\":{\"@id\":\"https:\/\/zydeno.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/zydeno.com\/#\/schema\/person\/1af4d0e254f05b407f306ede28252259\",\"name\":\"Andrii Matiushev\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/zydeno.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4df57b6b4737601c798e728e7d4d209a9a9513422db2b613ff707286cb1ea58a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4df57b6b4737601c798e728e7d4d209a9a9513422db2b613ff707286cb1ea58a?s=96&d=mm&r=g\",\"caption\":\"Andrii Matiushev\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo adaptar una aplicaci\u00f3n m\u00f3vil a una extensi\u00f3n de navegador - Zydeno Studio","description":"Lecciones aprendidas al portar el entrenador de mecanograf\u00eda KeyRush de Android a una extensi\u00f3n Chrome de Manifest V3: teclados reales, ventanas emergentes, tama\u00f1os de ventana y permisos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/zydeno.com\/es\/adaptar-una-aplicacion-movil-a-una-extension-de-navegador\/","og_locale":"es_ES","og_type":"article","og_title":"Porting a phone app to a browser extension","og_description":"Lessons from porting the KeyRush typing trainer from Android to a Manifest V3 Chrome extension: real keyboards, popups, window sizes and permissions.","og_url":"https:\/\/zydeno.com\/es\/adaptar-una-aplicacion-movil-a-una-extension-de-navegador\/","og_site_name":"Zydeno Studio","article_published_time":"2026-10-29T10:00:00+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/zydeno.com\/wp-content\/uploads\/2026\/10\/zydeno-social.png","type":"image\/png"}],"author":"Andrii Matiushev","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andrii Matiushev","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/#article","isPartOf":{"@id":"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/"},"author":{"name":"Andrii Matiushev","@id":"https:\/\/zydeno.com\/#\/schema\/person\/1af4d0e254f05b407f306ede28252259"},"headline":"Porting a phone app to a browser extension","datePublished":"2026-10-29T10:00:00+00:00","dateModified":"2026-10-29T10:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/"},"wordCount":666,"commentCount":0,"publisher":{"@id":"https:\/\/zydeno.com\/#organization"},"articleSection":["Journal"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/","url":"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/","name":"C\u00f3mo adaptar una aplicaci\u00f3n m\u00f3vil a una extensi\u00f3n de navegador - Zydeno Studio","isPartOf":{"@id":"https:\/\/zydeno.com\/#website"},"datePublished":"2026-10-29T10:00:00+00:00","dateModified":"2026-10-29T10:00:00+00:00","description":"Lecciones aprendidas al portar el entrenador de mecanograf\u00eda KeyRush de Android a una extensi\u00f3n Chrome de Manifest V3: teclados reales, ventanas emergentes, tama\u00f1os de ventana y permisos.","breadcrumb":{"@id":"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/zydeno.com\/porting-a-phone-app-to-a-browser-extension\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/zydeno.com\/"},{"@type":"ListItem","position":2,"name":"Porting a phone app to a browser extension"}]},{"@type":"WebSite","@id":"https:\/\/zydeno.com\/#website","url":"https:\/\/zydeno.com\/","name":"Zydeno Studio","description":"Zydeno es un estudio independiente que dise\u00f1a aplicaciones de diversas categor\u00edas, todas ellas unidas por una obsesi\u00f3n compartida por la calidad y el detalle. Aplicaciones r\u00e1pidas, con car\u00e1cter e independientes para iPhone, Android, Windows y Mac, adem\u00e1s de extensiones para Chrome, Edge y Firefox. Desarrolladas sin prisas, lanzadas con esmero.","publisher":{"@id":"https:\/\/zydeno.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/zydeno.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/zydeno.com\/#organization","name":"Zydeno Studio","url":"https:\/\/zydeno.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/zydeno.com\/#\/schema\/logo\/image\/","url":"https:\/\/zydeno.com\/wp-content\/uploads\/2026\/04\/cropped-icon-512-1.png","contentUrl":"https:\/\/zydeno.com\/wp-content\/uploads\/2026\/04\/cropped-icon-512-1.png","width":512,"height":512,"caption":"Zydeno Studio"},"image":{"@id":"https:\/\/zydeno.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/zydeno.com\/#\/schema\/person\/1af4d0e254f05b407f306ede28252259","name":"Andrii Matiushev","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/zydeno.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4df57b6b4737601c798e728e7d4d209a9a9513422db2b613ff707286cb1ea58a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4df57b6b4737601c798e728e7d4d209a9a9513422db2b613ff707286cb1ea58a?s=96&d=mm&r=g","caption":"Andrii Matiushev"}}]}},"_links":{"self":[{"href":"https:\/\/zydeno.com\/es\/wp-json\/wp\/v2\/posts\/730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zydeno.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zydeno.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zydeno.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zydeno.com\/es\/wp-json\/wp\/v2\/comments?post=730"}],"version-history":[{"count":1,"href":"https:\/\/zydeno.com\/es\/wp-json\/wp\/v2\/posts\/730\/revisions"}],"predecessor-version":[{"id":917,"href":"https:\/\/zydeno.com\/es\/wp-json\/wp\/v2\/posts\/730\/revisions\/917"}],"wp:attachment":[{"href":"https:\/\/zydeno.com\/es\/wp-json\/wp\/v2\/media?parent=730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zydeno.com\/es\/wp-json\/wp\/v2\/categories?post=730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zydeno.com\/es\/wp-json\/wp\/v2\/tags?post=730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}