Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including webextensions-lib-dom-updater with all npm packages installed. Try it out:

var webextensionsLibDomUpdater = require("webextensions-lib-dom-updater")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

webextensions-lib-dom-updater v1.0.2

Simple DOM Updater for browser extensions


Build Status

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.


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/


$ git clone
$ cp webextensions-lib-dom-updater/src/diff.js ../your-extension/src/
$ cp webextensions-lib-dom-updater/src/dom-updater.js ../your-extension/src/


$ cd your-extension/src
$ wget
$ wget

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);
  'ID of the server extension',
    <span id="tab"
          class="${ ? 'active' : ''}">
      <span id="throbber"
        <span id="throbber-image"
      <img id="favicon"
      <span id="label">${tab.title}</span>

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);

  DOMUpdater.update(before, after);

How to run test

$ npm install
$ npm run test


  • dom-updater.js and most resources are licensed under the MIT License.
  • diff.js is licensed under the Python Software Foundation License.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free