I have a simple use case, where I am writing a Chrome extension that adds a panel to the browser devtools which acts as a visualization for data emitted from the host page.
As an analogy, imagine the host page emits a message on an interval
setInterval(() => window.postMessage('Hi'), 1000)
Ideally, I want to have a devtools panel that simply logs the events.
// This is invalid, there is no `addEventListener`
chrome.devtools.inspectedWindow.addEventListener('message', (msg) => {
console.log(msg)
})
According to this: https://developer.chrome.com/docs/extensions/mv3/devtools/#solutions there is no way to have a devtools extension access the attached page directly.
Messages must be forwarded, first from the content_script
to the background service_worker
, then from the service_worker
to the devtools_page
.
This is a bit of a journey but it's fine - my issue is - the background service_worker
and content_script
will always be injected into every page, regardless of whether the devtools panel is open or not.
Having this background process running on all pages all the time on is wasteful and I would like to avoid it.
Is there:
a) A way to talk directly to the page from the devtools panel?
b) A way to only run the service_worker
and content_script
if the devtools panel is open?