Posted 8 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.

Copy
javascript:(function(){var overlay=document.createElement('div');Object.assign(overlay.style,{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(overlay.style,{width:0,height:0});var element=document.elementFromPoint(event.clientX,event.clientY);var position=element.getBoundingClientRect();Object.assign(overlay.style,{background:'rgba(0,128,255,0.25)',outline:'1px solid rgba(0,128,255,0.5)',top:''+position.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:

Copy
(function() { var overlay = document.createElement('div'); Object.assign(overlay.style, { 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(overlay.style, { width: 0, height: 0 }); var element = document.elementFromPoint(event.clientX, event.clientY); var position = element.getBoundingClientRect(); Object.assign(overlay.style, { background: 'rgba(0, 128, 255, 0.25)', outline: '1px solid rgba(0, 128, 255, 0.5)', top: '' + position.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.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Author of this card:

Avatar
Arne Hartherz
Last edit:
8 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