Skip to content

Instantly share code, notes, and snippets.

@Glench
Created October 28, 2021 20:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Glench/a8b971ba7dd4d8bda5e732f608a4abb0 to your computer and use it in GitHub Desktop.
Save Glench/a8b971ba7dd4d8bda5e732f608a4abb0 to your computer and use it in GitHub Desktop.
// ==UserScript==
// @name Show Image Alt Text
// @namespace http://tampermonkey.net/
// @version 0.1
// @description https://www.reddit.com/r/chrome_extensions/comments/qhpcw4/looking_for_an_extension_that_will_always_show/
// @author You
// @match http*://*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Your code here...
Array.from(document.querySelectorAll('img')).forEach(img => {
const text = img.getAttribute('title') || img.getAttribute('alt');
if (!text) return;
const el = document.createElement('div');
const rect = img.getBoundingClientRect();
el.innerText = text;
el.style = `
position: absolute;
top: ${rect.top+rect.height}px;
left: ${rect.left}px;
display: ${window.getComputedStyle(img).display || 'inline-block'};
padding: 3px;
background-color: rgba(255,255,255, .4);
color: black;
max-width: ${rect.width}px;
font-size: 12px;`
img.after(el);
})
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment