mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
37 lines
2.5 KiB
Markdown
37 lines
2.5 KiB
Markdown
# menu-remove-element
|
|
|
|
## What it does
|
|
|
|
This extension adds a menu item that's shown when the context menu is opened in a document.
|
|
Upon click, a panel is shown, where the clicked element and its ancestor elements are displayed in a list.
|
|
Upon hovering over these elements, the corresponding elements in the document are visually highlighted.
|
|
When one of the list items are clicked, the element is removed from the page.
|
|
|
|
## What it shows
|
|
|
|
This extension demonstrates the following APIs:
|
|
|
|
- [`menus.create`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/create)
|
|
- [`menus.onClicked`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/onClicked) and in particular its [`info.targetElementId`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/OnClickData) property.
|
|
- [`menus.getTargetElement`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement)
|
|
- [`pageAction.openPopup`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/openPopup)
|
|
- [`pageAction.show`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/show) and [`pageAction.hide`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/hide)
|
|
- [`tabs.executeScript`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs.executeScript)
|
|
|
|
The `pageAction.openPopup` method requires user interaction, which is satisfied by calling the method from the `menus.onClicked` event.
|
|
|
|
The `activeTab` permission is used to unlock access to the page upon clicking the menu item,
|
|
so that the `info.targetElementId` becomes available and `tabs.executeScript` can be used to run a content script in a specific frame in the tab.
|
|
|
|
The `menus.getTargetElement` API and `info.targetElementId` were introduced in Firefox 63.
|
|
|
|
## Polyfill
|
|
|
|
In browsers that do not support this API, an extension has to register a content script that listens to the "contextmenu" event, as shown in `menusGetTargetElementPolyfill.js`.
|
|
|
|
This example includes the polyfill to demonstrate how one can create an extension that is compatible with browsers that do not support a new API.
|
|
If you are not interested in supporting browsers that lack the `browser.menus.getTargetElement` API, modify the example as follows:
|
|
|
|
- Remove `menusGetTargetElementPolyfill.js`
|
|
- Modify popup.js and remove the entire if-block that starts with `if (!browser.menus.getTargetElement) {`.
|