ztevenreal
Si desea desarrollar extensiones de navegador para Chrome, Safari, Firefox, Opera y otros navegadores, probablemente haya manido la frase “WebExtension” en los documentos de soporte. Aunque WebExtensions y extensiones de Chrome son términos (en cierto modo) intercambiables para la misma tecnología, es necesario tener en cuenta las diferencias para el expansión de extensiones entre navegadores.
En esta enseñanza, repasaremos la plataforma API genérico que impulsa las extensiones de Chrome y WebExtensions, y algunos de los errores con los que podría encontrarse al crear extensiones para múltiples navegadores web.
¿Qué es una extensión web?
Google Chrome primero soporte añadido para extensiones del navegador en 2009 y rápidamente se convirtieron en una parte fundamental del éxito de Chrome. Las extensiones fueron increíblemente simples de crear, especialmente para cualquiera que ya esté familiarizado con JavaScript y el expansión web, y (generalmente) no fallaron cuando Google lanzó nuevas actualizaciones de Chrome. Manifest V2 fue el primer cambio importante en la extensión API, que Google comenzó a hacer cumplir en 2013.
Cuando otros navegadores web comenzaron a usar Chrome como saco técnica (o más específicamente, Chromium), mantuvieron las mismas API de extensión. Es por eso que las extensiones creadas para Chrome generalmente funcionan sin modificaciones en Opera, Vivaldi, Brave, Microsoft Edge, ChatGPT Atlas y otros navegadores basados en Chromium. La mayoría de ellos pueden incluso instalar extensiones desde la propia Chrome Web Store de Google, aunque navegadores como Ópera y Borde Todavía tienen sus propios repositorios de extensiones.
Mozilla empezó cambiar Firefox a la extensión API de Chrome en 2015, ya que las extensiones anteriores basadas en XUL de Firefox eran complejas y propensas a errar con cada puesta al día del navegador. Sin bloqueo, Firefox no está basado en Chromium, por lo que este movimiento requirió que Mozilla realizara ingeniería inversa en toda la API. Este La nueva implementación recibió el sobrenombre de ‘WebExtensions’.y estaba destinado a ser un estereotipado para varios navegadores.
Apple además realizó ingeniería inversa en la API de extensión de Chromium para su navegador Safari. encapricharse a la misma marca ‘WebExtension’ como Mozilla. Sin bloqueo, la implementación de Apple no es idéntica a la de Mozilla ni a las API que se encuentran en Chromium.
WebExtensions puede parecer un estereotipado universal, pero está mucho más disperso que el expansión web actual. De hecho, está mucho más cerca del expansión web de la término de 2000, donde las API y las capacidades de renderizado variaban drásticamente de un navegador a otro (adiós, Hojas de estilo solo para IE). A cita al capitán barbosa“el código es más lo que llamarías pautas que reglas reales”.
Extensiones web frente a extensiones de Chrome
La principal diferencia entre WebExtensions y la extensión regular de Chrome es tener en cuenta cómo se comporta cada navegador web y asegurar que las API que necesita sean compatibles con todos los navegadores disponibles. MDN es el mejor apelación para esta información.con la página para cada API y característica que incluye una tabla de compatibilidad de navegadores y notas sobre la compatibilidad entre navegadores.
Si crea un sitio web actual para Chrome, lo hará generalmente funcionar sin modificaciones en Firefox y Safari, porque los proveedores de navegadores se unen en esfuerzos como Estándares web del W3C y Interoperabilidad. lo mismo es no cierto para las extensiones del navegador. Google tiene Alguna billete con la comunidad WebExtensions.pero las nuevas API de Chromium suelen tardar un poco en aparecer en Firefox o Safari (si es que lo hacen), y cada navegador tiene su propio subconjunto de funciones exclusivas.
Un ejemplo es el mostrador lateralAPI de energíaque fue creado originalmente por el navegador Opera para que las extensiones pudieran proporcionar páginas de mostrador limítrofe. Luego, Firefox duplicó esa característica, lo que hizo que las funciones de la mostrador limítrofe estuvieran disponibles en las extensiones de Firefox y Opera, pero no en Chrome. Cuando Google finalmente agregó una mostrador limítrofe al navegador Chrome, hizo un cambio completamente nueva API de panel limítrofe. A finales de 2025, Firefox no ha implementado la API sidePanel y Safari no ha complemento ninguna de ellas.
El espacio de nombres es otra diferencia importante entre WebExtensions y las extensiones normales de Chrome. En la API de extensión de Chromium, la mayoría de las funciones comienzan con “chrome”, como almacenamiento.cromo o chrome.windows. En la mayoría de la documentación de WebExtensions, verá el espacio de nombres “navegador”, como navegador.almacenamiento.
// Showing a welcome page in Chrome’s default API namespace
chrome.tabs.create({ 'url': chrome.runtime.getURL('welcome.html') });
// Showing a welcome page in WebExtension ‘browser’ namespace
browswer.tabs.create({ 'url': chrome.runtime.getURL('welcome.html') });Tanto Firefox como Safari admiten “chrome” como apodo de “navegador” para todas las API que se originan en Chrome, pero Chrome no reconoce el espacio de nombres del navegador en total.
Hacer extensiones para varios navegadores
Las mejores prácticas para el expansión web entre navegadores además se aplican a las extensiones. Necesitas probar tu extensión en cada navegador que desea reconocer; es casi seguro que descubrirá que algunas funciones no funcionan de la misma modo en todos los navegadores.
Tú podrías hacer un conjunto de pruebas para ejecutarse en cada navegador e, idealmente, comprobarlo varias veces durante el proceso de expansión. Cuando encuentre una incompatibilidad, utilice detección de características para cambiar el comportamiento, y no para olfatear el navegador.
// Example scenario: Chrome has a chrome.bubble extension API, but it’s not yet in Firefox, and we’re using the chrome namespace
// This could be checked with feature detection:
if ("bubble" in chrome) {
console.log("API is available!");
} else {
console.error("API is not available!");
}
// Do NOT do a browser check like this:
if (navigator.userAgent.includes("Firefox")) {
console.error("API is not available!");
} else {
console.log("API is available!");
}La buena informe es que la mayoría de los navegadores web convencionales están disponibles en los mismos sistemas operativos (Windows, macOS y Linux de escritorio), por lo que instalar varios navegadores para probar extensiones no le cuesta carencia excepto espacio de almacenamiento. La principal excepción es Safari, que requiere una Mac con Xcode para el expansión de extensiones.
Como se mencionó anteriormente, además deberá designar qué espacio de nombres desea usar en su código: cromo (por ejemplo, chrome.storage) o navegador (por ejemplo, navegador.almacenamiento). Personalmente me callado con el espacio de nombres de Chrome, pero además puedes usar Biblioteca polyfill de Mozilla para anexar soporte de espacio de nombres del navegador a Chrome. Algunos proyectos como uBlock Origin cree su propio contenedor más o menos de cualquier espacio de nombres habitable.
Para obtener un apelación actualizado sobre problemas comunes con el expansión de extensiones para varios navegadores, consulte Página de incompatibilidades de Chrome de MDN. A finales de 2025, la mayoría de los problemas son API o títulos de manifiesto introducidos en Manifest V3.
Cuando esté avispado para propagar su extensión, recuerde que no tener para utilizar el repositorio de extensiones individual de cada navegador. El Tienda web de Chrome no es sólo para Chrome: los usuarios de Opera, Vivaldi y Edge además pueden instalar y poner al día extensiones desde ese sitio web. Sin bloqueo, propagar en la tienda de cada navegador le dará más visibilidad a su extensión. Por ejemplo, Microsoft Edge dirige a sus usuarios a la Sitio web de complementos de Edge si quieren descargar extensiones, no Chrome Web Store. Los usuarios de Firefox y Safari no pueden instalar extensiones directamente desde Chrome Web Store.
Desarrollar extensiones para varios navegadores no es tan sencillo como podría parecer en la documentación de WebExtensions, pero siquiera es difícil. Muchas extensiones de navegador solo requerirán pequeños cambios en el manifiesto y el código saco para funcionar en varios navegadores, y no es estrictamente necesario propagar en el repositorio de extensiones de cada navegador. El principal inconveniente es simplemente el tiempo adicional en las pruebas, porque no se pueden hacer las mismas suposiciones sobre la compatibilidad entre navegadores que con los sitios web y (la mayoría) de las aplicaciones web.
