mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-17 06:48:37 +02:00
5d6b7077da
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).
37 lines
1019 B
JavaScript
37 lines
1019 B
JavaScript
var toolbarUI;
|
|
|
|
// Create the toolbar ui iframe and inject it in the current page
|
|
function initToolbar() {
|
|
var iframe = document.createElement("iframe");
|
|
iframe.setAttribute("src", chrome.runtime.getURL("toolbar/ui.html"));
|
|
iframe.setAttribute("style", "position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; height: 36px;");
|
|
document.body.appendChild(iframe);
|
|
|
|
return toolbarUI = {
|
|
iframe: iframe, visible: true
|
|
};
|
|
}
|
|
|
|
function toggleToolbar(toolbarUI) {
|
|
if (toolbarUI.visible) {
|
|
toolbarUI.visible = false;
|
|
toolbarUI.iframe.style["display"] = "none";
|
|
} else {
|
|
toolbarUI.visible = true;
|
|
toolbarUI.iframe.style["display"] = "block";
|
|
}
|
|
}
|
|
|
|
// Handle messages from the add-on background page (only in top level iframes)
|
|
if (window.parent == window) {
|
|
chrome.runtime.onMessage.addListener(function(msg) {
|
|
if (msg == "toggle-in-page-toolbar") {
|
|
if (toolbarUI) {
|
|
toggleToolbar(toolbarUI);
|
|
} else {
|
|
toolbarUI = initToolbar();
|
|
}
|
|
}
|
|
});
|
|
}
|