mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
e1253d9ad3
* MDN get started tutorial examples to manifest V3 * Migrate to Scripting API * Updated to readmes and code comments * Apply suggestions to readmes from review Co-authored-by: Simeon Vincent <svincent@gmail.com> * Convert choose_beast.js to async * Apply suggestions from review Co-authored-by: Simeon Vincent <svincent@gmail.com> * Updated illustrated API list for beastify * Apply suggestions from review Co-authored-by: Rob Wu <rob@robwu.nl> --------- Co-authored-by: Simeon Vincent <svincent@gmail.com> Co-authored-by: Rob Wu <rob@robwu.nl>
42 lines
2.3 KiB
Markdown
42 lines
2.3 KiB
Markdown
# beastify
|
|
|
|
This extension used a tootlbar button to enable the section of beast that replaces the content of the active web page.
|
|
|
|
## What it does ##
|
|
|
|
The extension includes:
|
|
|
|
* An action with a popup that includes HTML, CSS, and JavaScript.
|
|
* A content script.
|
|
* Three images, each of a beast, packaged as web accessible resources.
|
|
|
|
When the user clicks the action (toolbar button), the extension's popup opens, enabling the user to choose one of three beasts.
|
|
|
|
When opened, the popup injects a content script into the active page.
|
|
|
|
When the user chooses a beast, the extension sends the content script a message containing the name of the chosen beast.
|
|
|
|
When the content script receives this message, it replaces the active page content with an image of the chosen beast.
|
|
|
|
When the user clicks the reset button, the page reloads and reverts to its original form.
|
|
|
|
Note that:
|
|
|
|
* If the user reloads the tab, or switches tabs, while the popup is open, then the popup can't beastify the page (because the content script was injected into the original tab).
|
|
|
|
* By default, [`scripting.executeScript()`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/scripting/executeScript) injects the script only when the web page and its resources have finished loading. This means that clicks in the popup have no effect until the page has finished loading.
|
|
|
|
* Browsers don't allow extensions to inject content scripts into specific pages. In Firefox, this includes privileged browser pages, such as "about:debugging", and the [addons.mozilla.org](https://addons.mozilla.org/) website. In Chrome, this includes internal pages, such as `chrome://extensions`, and the [chromewebstore.google.com](https://chromewebstore.google.com/) website. If the user clicks the beastify icon on one of these pages, the popup displays an error message.
|
|
|
|
## What it shows ##
|
|
|
|
In this example, you see how to:
|
|
|
|
* Write an action (toolbar button) with a popup.
|
|
* Display action (toolbar button) icons based on the browser theme.
|
|
* Give a popup style and behavior using CSS and JavaScript.
|
|
* Inject a content script programmatically using `scripting.executeScript()`.
|
|
* Send a message from the main extension to a content script.
|
|
* Use `web_accessible_resources` to enable web pages to load packaged content.
|
|
* Reload web pages.
|