I'm writing a firefox (v.147) extension and I'm able to open a side bar.
How do I update/dynamically write messages (or add elements) from the extension onto the side bar?
1 Answer
A sidebar is a DOM document with its own JavaScript. The JS can update the DOM, based on anything you want. The example below doesn't pass messages. It just updates text, but it could add/remove/style elements or whatever you want.
manifest
{
"manifest_version": 2,
"name": "Answer",
"description": "Answer a Stack Overflow question",
"version": "0.1",
"content_security_policy": "default-src 'self'; object-src 'self'",
"browser_specific_settings": {
"gecko": {
"id": "[email protected]"
}
},
"sidebar_action": {
"default_panel": "sidebar.htm"
}
}
sidebar.htm
<!DOCTYPE html>
<html lang="en">
<head>
<title>Answer</title>
</head>
<body>
<script src="sidebar.js"></script>
</body>
</html>
sidebar.js
( function () {
'use strict';
const
body = document.body;
// change the sidebar html
function timer() {
const
d = Date.now();
body.textContent = Math.floor( d / 1000 ).toString();
setTimeout( timer, 1000 - d % 1000 );
}
setTimeout( timer );
} () );
You haven't said what the extension does, but you may be looking at the problem backwards if you want the background process to update the sidebar. JS that runs in the sidebar has access to webextension APIs. It may make more sense to think of the sidebar as the "main" process and consider what services it would request of a background page, if it even needs a background.
2 Comments
BoCode
thanks! This is known and doable but is there a way i can update the sidebar's dom from the main extension JS code (either thru tabs/browser/window objects)?
Thomas Mueller
I haven't tried this, but maybe you can get a reference to the sidebar's DOM with developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/…