3

GitHub - shpingalet007/element-selector: Simple web element selector inspired by...

 1 year ago
source link: https://github.com/shpingalet007/element-selector
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Simple web element selector

Did you ever think about the ability to make your custom ⌘ ⇧ C (inspect element) in your extension or tool? Yeah, we did too. And, of course, browsers doesn't provide any API to use it. Fortunately, we were looking for the same solution and finally wrote a small library.

The benefits

  • 🛠 Compatible with <script> and import() usage
  • feather Zero-dependent library, only native code
  • comet We use HTML5 Canvas to draw the selection, so it's fast
  • doughnut We use modern JavaScript, yummy
  • dizzy It's asynchronous, no callbacks needed

Installation

Use it with NPM

npm i element-selector

Use it with CDN

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/main.js"></script>

How to use

There are only 2 public methods

let elementSelector = new ElementSelector();

/**
 * Toggle element selector interface
 * - use async/await
 * - use then callback
 */
let selectedElement = await elementSelector.togglePrompt();

/**
 * After you don't need it you can
 * destroy canvas and styles objects
 */
elementSelector.destroy();

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK