The code below uses a browser action to toggle a listener for webRequest.onHeadersReceived
, and uses setIcon()
to indicate whether listening is on or off:
function logResponseHeaders(requestDetails) {
console.log(requestDetails);
}
function startListening() {
browser.webRequest.onHeadersReceived.addListener(
logResponseHeaders,
{urls: ["<all_urls>"]},
["responseHeaders"]
);
browser.browserAction.setIcon({path: "icons/listening-on.svg"});
}
function stopListening() {
browser.webRequest.onHeadersReceived.removeListener(logResponseHeaders);
browser.browserAction.setIcon({path: "icons/listening-off.svg"});
}
function toggleListener() {
if (browser.webRequest.onHeadersReceived.hasListener(logResponseHeaders)) {
stopListening();
} else {
startListening();
}
}
browser.browserAction.onClicked.addListener(toggleListener);
The code below sets the icon using an ImageData
object:
function getImageData() {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
return ctx.getImageData(50, 50, 100, 100);
}
browser.browserAction.onClicked.addListener(() => {
browser.browserAction.setIcon({imageData: getImageData()});
});
The following snippet updates the icon when the user clicks it, but only for the active tab:
browser.browserAction.onClicked.addListener((tab) => {
browser.browserAction.setIcon({
tabId: tab.id, path: "icons/updated-48.png"
});
});