webextensions-lib-dom-updater
v1.0.2
Published
Simple DOM Updater for browser extensions
Downloads
3
Readme
webextensions-lib-dom-updater
A simple DOM Updater for browser extensions, aiming to help cross-process request to update DOM contents in a "server" extension. Designed mainly for the real DOM world on web browsers, not for Node.js world.
This includes a diff implementation ported from Python.
Usage
Put src/diff.js
and src/dom-updater.js
together into your extension. For example:
$ npm install webextensions-lib-dom-updater
$ cp node_modules/webextensions-lib-dom-updater/src/diff.js ../your-extension/src/
$ cp node_modules/webextensions-lib-dom-updater/src/dom-updater.js ../your-extension/src/
or
$ git clone https://github.com/piroor/webextensions-lib-dom-updater.git
$ cp webextensions-lib-dom-updater/src/diff.js ../your-extension/src/
$ cp webextensions-lib-dom-updater/src/dom-updater.js ../your-extension/src/
or
$ cd your-extension/src
$ wget https://github.com/piroor/webextensions-lib-dom-updater/raw/master/src/diff.js
$ wget https://github.com/piroor/webextensions-lib-dom-updater/raw/master/src/dom-updater.js
Then you can load the updater like:
import { DOMUpdater } from './dom-updater.js';
DOMUpdater.update(document.getElementById('target'), changes);
Usecase on browser extensions
On the client extension side:
const tab = await browser.tabs.get(tabId);
browser.runtime.sendMessage(
'ID of the server extension',
`
<span id="tab"
class="${tab.active ? 'active' : ''}">
<span id="throbber"
class="${tab.status}">
<span id="throbber-image"
class="${tab.status}"></span>
</span>
<img id="favicon"
class="${tab.status}"
src="${tab.favIconUrl}">
<span id="label">${tab.title}</span>
</span>
`.trim()
);
On the server extension side:
browser.runtime.onMessageExternal(message => {
const before = document.getElementById('tab-renderer');
const range = document.createRange();
range.setStart(document.body, 0);
const after = range.createContextualFragment(message);
range.detach();
DOMUpdater.update(before, after);
});
How to run test
$ npm install
$ npm run test
License
dom-updater.js
and most resources are licensed under the MIT License.diff.js
is licensed under the Python Software Foundation License.