Posted 11 months ago. Visible to the public.

JavaScript bookmarklet to click an element and copy its text contents

Here is some JavaScript code that allows you to click the screen and get the clicked element's text contents (or value, in case of inputs).

The approach is simple: we place an overlay so you don't really click the target element. When you click the overlay, we look up the element underneath it and show its text in a browser dialog. You can then copy it from there.

It will also highlight the clicked element.

Here is the one-liner URL that you can store as a bookmark. Place it in your bookmarks bar and click it to activate.

javascript:(function(){var overlay=document.createElement('div');Object.assign(,{position:'fixed',top:0,left:0,width:'100vw',height:'100vw',zIndex:99999999,background:'transparent',cursor:'crosshair'});document.body.append(overlay);overlay.addEventListener('click',function(event){Object.assign(,{width:0,height:0});var element=document.elementFromPoint(event.clientX,event.clientY);var position=element.getBoundingClientRect();Object.assign(,{background:'rgba(0,128,255,0.25)',outline:'1px solid rgba(0,128,255,0.5)',top:'''px',left:''+position.left+'px',width:''+position.width+'px',height:''+position.height+'px'});setTimeout(function(){window.prompt('Press Ctrl+C to copy',element.textContent || element.value);document.body.removeChild(overlay)})})})()

Here is the formatted JavaScript code:

(function() { var overlay = document.createElement('div'); Object.assign(, { position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vw', zIndex: 99999999, background: 'transparent', cursor: 'crosshair' }); document.body.append(overlay); overlay.addEventListener('click', function(event) { Object.assign(, { width: 0, height: 0 }); var element = document.elementFromPoint(event.clientX, event.clientY); var position = element.getBoundingClientRect(); Object.assign(, { background: 'rgba(0, 128, 255, 0.25)', outline: '1px solid rgba(0, 128, 255, 0.5)', top: '' + + 'px', left: '' + position.left + 'px', width: '' + position.width + 'px', height: '' + position.height + 'px' }); setTimeout(function() { window.prompt('Press Ctrl+C to copy', element.textContent || element.value); document.body.removeChild(overlay); }); }); })()

You can also find it on GitHub. If you make any improvements, please let me know.

Things to note:

  • The detected element might contain less content than expected, e.g. a <span> inside a longer paragraph.
  • We don't show the element that will be detected until the user actually clicks. Could be implemented, but is maybe not worth the effort.
  • You could extend this script to use the execCommand API and copy directly into the clipboard. Using a simple prompt allows the user to see the content and decide if they want to copy or not.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Arne Hartherz
Last edit:
11 months ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more