https://github.com/martindzejky/modify-element

Allows you to easily modify elements on websites using MutationObserver.
https://github.com/martindzejky/modify-element

mutation-observer typescript

Last synced: 2 months ago
JSON representation

Allows you to easily modify elements on websites using MutationObserver.

• Host: GitHub
• URL: https://github.com/martindzejky/modify-element
• Owner: martindzejky
• License: other
• Created: 2019-02-28T09:07:11.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-10-03T14:28:16.000Z (3 months ago)
• Last Synced: 2024-10-10T22:45:55.050Z (3 months ago)
• Topics: mutation-observer, typescript
• Language: TypeScript
• Homepage:
• Size: 457 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# modify-element

![prettier](https://img.shields.io/badge/format-prettier-blueviolet.svg)

![version](https://img.shields.io/github/package-json/v/martindzejky/modify-element.svg)

Allows you to easily modify HTML elements on websites.

A small utility library to simplify working with the `MutationObserver` browser API.

## Usage

You register a CSS selector and a callback function. When started, the callback function

will be called when any element matching the selector appears in the DOM. Suitable for

static websites as well as dynamic web apps.

1. Import or copy-paste the script to your code

1. Register your selector and callback using `ModifyElement.registerSelector`

1. Start the observer using `ModifyElement.start`

## API

The library exports a single global variable called `ModifyElement` which provides the public API.

### `ModifyElement.registerSelector`

Register a new selector and a callback function. The callback will

be called whenever a new element matching the selector appears in the DOM.

- `selector` Selector matching the target element

- `callback` Callback function to call with the element

### `ModifyElement.unregisterSelector`

Remove the registered callback.

- `selector` Selector assigned with the callback 

- `callback` Callback function to remove

### `ModifyElement.start`

Start observing the root element. This applies all registered

selectors and starts the MutationObserver.

- `rootElement` Root element to observe, usually this can be `document.documentElement`

### `ModifyElement.stop`

Stop observing the root element.

## Development

Clone the repository locally first. This project uses `npm` so call `npm install` to install

the dependencies. Then there are these important scripts:

- `npm build` - Build a development version

- `npm build:min` - Build a production version (minified)

- `npm build:watch` - Watch source files and rebuild

## Tests

See [#1](https://github.com/martindzejky/modify-element/issues/1).