mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-18 15:28:37 +02:00
This example shows how an add-on can integrate an UI into a webpage. The UI resources will be packaged in the add-on itself and exposed to the webpage by injecting an iframe which points to an "web accessible resource" add-on URL. This pattern is useful to any add-on which needs to integrate an UI into the webpage (e.g. browsing enhancement toolbars, in page devtools panels, adblockers/anti-tracking in-page alerts) and it works on Chromium-based browsers and Firefox Desktop >= 46.0 (enabled by Bug 1214658).
41 lines
958 B
JSON
41 lines
958 B
JSON
{
|
|
"description": "Adds a browser action icon to the toolbar. Click the button to inject an in-page toolbar UI into the current webpage. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#inpage-toolbar-ui",
|
|
"manifest_version": 2,
|
|
"name": "In Page Toolbar UI",
|
|
"version": "1.0",
|
|
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/inpage-toolbar-ui",
|
|
"icons": {
|
|
"48": "icons/48.png"
|
|
},
|
|
|
|
"permissions": [],
|
|
|
|
"background": {
|
|
"scripts": ["background.js"]
|
|
},
|
|
|
|
"browser_action": {
|
|
"default_icon": "icons/32.png",
|
|
"default_title": "In Page Toolbar"
|
|
},
|
|
|
|
"content_scripts": [
|
|
{
|
|
"js": ["contentscript.js"],
|
|
"run_at": "document_idle",
|
|
"matches": ["<all_urls>"]
|
|
}
|
|
],
|
|
|
|
"web_accessible_resources": [
|
|
"toolbar/ui.html"
|
|
],
|
|
|
|
"applications": {
|
|
"gecko": {
|
|
"id": "inpage-toolbar-ui@mozilla.org",
|
|
"strict_min_version": "46.0.0"
|
|
}
|
|
}
|
|
}
|