jmuheim / semantify

Semantify Bookmarklet

A bookmarklet that adds annotations about semantics to your HTML.

• Drag this to your web browser's bookmarks bar: Semantify
  • If it's not a link, go to jmuheim.github.io/semantify (instead of github.com/jmuheim/semantify).
• Go to any website you like, then click the created bookmark.

Development

Use https://www.yourjs.com/bookmarklet/ to create a bookmarklet from the following code, then update the above Semantify link with the result.

javascript: (function () {
  // Remove existing CSS, see https://dorward.uk/software/disablecss/#enhanced
  // for(i=0;i<document.styleSheets.length;i++) {
  // 	void(document.styleSheets.item(i).disabled=true);
  // }
  // el = document.getElementsByTagName('*');
  // for ( i=0; i<el.length; i++) {
  // 	void(el[i].style.cssText = '');
  // }

  // Inject semantics CSS, see https://gist.github.com/roura356a/65474d2fbf80d24911c9e817771ccaf8
  let cssLink = document.getElementById('injected-css');
  if (cssLink === null) {
    cssLink = document.createElement('link');
    cssLink.id = 'injected-css';
    cssLink.rel = 'stylesheet';
    document.getElementsByTagName('head')[0].appendChild(cssLink);
  }
  // Use githack.com to serve CSS with the correct Content-Type
  cssLink.href = 'https://raw.githack.com/NothingAG/a11y-semantics-css/master/a11y-semantics-visible.css?v=' + Date.now();
})();