Ejemplos WebExtensions

Para ayudar en la ilustración de cómo desarrollar las WebExtension, se mantiene un repositorio de ejemplos simples de WebExtensions en https://github.com/mdn/webextensions-examples. Este artículo describe las extensiones en ese repositorio.

Estos ejemplo funcionan en Firefox Nightly: la mayoría funcionan en versiones más recientes de Firefox, pero revise la clave strict_min_version en el manifest.json del complemento para estar seguro.

Si quiere probar estos ejemplo, tiene tres opciones principales:

  1. Clone el repositorio, entonces, carge el complemento directo desde su directorio, utilizando la función "Cargar complemento temporalmente". El complemento estará cargado hasta que se reinicie Firefox.
  2. Clone el repositorio, luego utilice la herrmienta web-ext en la línea de comando para ejecutar Firefox con el complemento instalado.
  3. Clone el repositorio, luego diríjase al directorio build. Este contiene todos los ejemplos firmados y compilados, así que usted puede abrilos en Firefox (utilizando Archivo/Abrir archivo) e instalarlos permanentemente, justamente como cuando se instala un complemento desde addons.mozilla.org.

Si quiere contribuir al repositorio, ¡envíe una petición de pull!


apply-css

https://github.com/mdn/webextensions-examples/tree/master/apply-css

Adds a page action to the toolbar. Click the button to apply a red border using injected CSS. Click the button again to remove the CSS.

JavaScript APIs


beastify

https://github.com/mdn/webextensions-examples/tree/master/beastify

Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast.

JavaScript APIs


bookmark-it

https://github.com/mdn/webextensions-examples/tree/master/bookmark-it

Adds a bookmark button to the toolbar. Click the button to toggle a bookmark for the current page.

JavaScript APIs


borderify

https://github.com/mdn/webextensions-examples/tree/master/borderify

Adds a solid red border to all webpages matching mozilla.org.


chill-out

https://github.com/mdn/webextensions-examples/tree/master/chill-out

Show a page action after a period of inactivity. Show cat gifs when the page action is clicked.

JavaScript APIs


commands

https://github.com/mdn/webextensions-examples/tree/master/commands

Demonstrates using the commands API to set up a keyboard shortcut. Thr shortcut created is accessed using Ctrl+Shift+Y (Command+Shift+Y on a Mac).

JavaScript APIs


context-menu-demo

https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo

Demonstrates adding and manipulating context menu items using the contextMenus API.

JavaScript APIs


contextual-identities

https://github.com/mdn/webextensions-examples/tree/master/contextual-identities

List, create, and remove contextual identities.

JavaScript APIs


https://github.com/mdn/webextensions-examples/tree/master/cookie-bg-picker

Allows the user to customize the background color and tiled pattern on sites the visit, and also saves their preferences via a cookie, reapplying them whenever they revisit a site they previously customized.

JavaScript APIs


embedded-webextension-bootstrapped

https://github.com/mdn/webextensions-examples/tree/master/embedded-webextension-bootstrapped

Demonstrates how to use an embedded WebExtension to port from a bootstrapped extension.

JavaScript APIs


embedded-webextension-sdk

https://github.com/mdn/webextensions-examples/tree/master/embedded-webextension-sdk

Demonstrates how to use an embedded WebExtension to port from an SDK-based add-on.

JavaScript APIs


emoji-substitution

https://github.com/mdn/webextensions-examples/tree/master/emoji-substitution

Replaces words with emojis.


eslint-example

https://github.com/mdn/webextensions-examples/tree/master/eslint-example

Demonstrates how to configure a WebExtension with eslint.


favourite-colour

https://github.com/mdn/webextensions-examples/tree/master/favourite-colour

An example options page, letting you store your favourite colour.

JavaScript APIs


https://github.com/mdn/webextensions-examples/tree/master/firefox-code-search

Demonstrates how to use the omnibox API.

JavaScript APIs


forget-it

https://github.com/mdn/webextensions-examples/tree/master/forget-it

Demonstrates how to use the browsingData API.

JavaScript APIs


google-userinfo

https://github.com/mdn/webextensions-examples/tree/master/google-userinfo

Demonstrates how to use the identity API.

JavaScript APIs


history-deleter

https://github.com/mdn/webextensions-examples/tree/master/history-deleter

History API demo: deletes history items for a given domain

JavaScript APIs


latest-download

https://github.com/mdn/webextensions-examples/tree/master/latest-download

Shows the last downloaded item, and lets you open or delete it.

JavaScript APIs


list-cookies

https://github.com/mdn/webextensions-examples/tree/master/list-cookies

This extensions list the cookies in the active tab.

JavaScript APIs


mocha-client-tests

https://github.com/mdn/webextensions-examples/tree/master/mocha-client-tests

This example shows two methods of testing a WebExtension: running tests from within the add-on, and running tests from the command line using Karma

JavaScript APIs


native-messaging

https://github.com/mdn/webextensions-examples/tree/master/native-messaging

Example of native messaging, including a Python application and a WebExtension which exchanges messages with it.

JavaScript APIs


https://github.com/mdn/webextensions-examples/tree/master/navigation-stats

Demonstration of the webNavigation API, showing basic stata about which pages you've visited.

JavaScript APIs


https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n

Shows a localized notification when the user clicks on links.

JavaScript APIs


open-my-page-button

https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button

Adds a browser action icon to the toolbar. When the browser action is clicked, the add-on opens a page that was packaged with it.

JavaScript APIs


page-to-extension-messaging

https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging

Demonstrates how a web page and a content script can exchange messages. Visit https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html for the demo.


quicknote

https://github.com/mdn/webextensions-examples/tree/master/quicknote

Allows the user to make quick notes by clicking a button and entering text into the resulting popup. The notes are saved in storage.

JavaScript APIs


react-es6-popup

https://github.com/mdn/webextensions-examples/tree/master/react-es6-popup

This is an example of creating a browser action popup UI in React and ES6 JavaScript.


selection-to-clipboard

https://github.com/mdn/webextensions-examples/tree/master/selection-to-clipboard

Demonstrates how to write to the clipboard from a content script


tabs-tabs-tabs

https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs

Demonstrates tab manipulation: opening, closing, moving, zooming tabs.

JavaScript APIs


top-sites

https://github.com/mdn/webextensions-examples/tree/master/top-sites

Demonstration of the topSites API.

JavaScript APIs


user-agent-rewriter

https://github.com/mdn/webextensions-examples/tree/master/user-agent-rewriter

Demonstrates using the webRequest API to rewrite the User-Agent HTTP header.

JavaScript APIs


webpack-modules

https://github.com/mdn/webextensions-examples/tree/master/webpack-modules

Demonstrates how to use webpack to package npm modules in a WebExtension.

JavaScript APIs


window-manipulator

https://github.com/mdn/webextensions-examples/tree/master/window-manipulator

Demonstrates how to manipulate windows: opening, closing, resizing windows.

JavaScript APIs

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: hecaxmmx
 Última actualización por: hecaxmmx,