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).
18 lines
652 B
JavaScript
18 lines
652 B
JavaScript
// Send a message to the current tab's content script.
|
|
function toggleToolbar() {
|
|
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
|
|
chrome.tabs.sendMessage(tabs[0].id, "toggle-in-page-toolbar");
|
|
});
|
|
}
|
|
|
|
// Handle the browser action button.
|
|
chrome.browserAction.onClicked.addListener(toggleToolbar);
|
|
|
|
// Handle connections received from the add-on toolbar ui iframes.
|
|
chrome.runtime.onConnect.addListener(function (port) {
|
|
if (port.sender.url == chrome.runtime.getURL("toolbar/ui.html")) {
|
|
// Handle port messages received from the connected toolbar ui frames.
|
|
port.onMessage.addListener(toggleToolbar);
|
|
}
|
|
});
|