DOMに自動でガイドを引くChrome拡張機能を公開しました

DOMに自動でガイドを引くChrome拡張機能を公開しました:

↑こんな感じのことができます（https://qiita.com/aboutの場合）

概要

DOMの要素ひとつひとつにガイドを引いて、それぞれの間隔を計測するChrome拡張機能です。

アドレスバーの右のアイコンをクリックすることで、on/offを切り替えることができます。

ガイドを表示した状態でクリックすると、選択状態になります。

その状態で他のガイドにホバーすると、間隔を計測して表示します。

インストール後、ページを再読み込みすると使えるようになります。

DOM Guides (Chrome ウェブストア)
github.com/kadowakid/dom-guides

Shiftキーを押しながら上下左右にドラッグすることで、ユーザーが新規にガイドを追加することができます。

ユーザーで追加したガイドは、チェックした状態でDeleteキーを押して削除できます。

備考

何か仕事に使えるChrome拡張機能を作ろうと思い、このような形になりました。

デバッグがてらマークアップに使ってみたらそこそこ役に立ったので、是非ご利用ください（しかし数値の小数点以下は四捨五入しているので、あくまで参考程度に考えてください）。

これを使えばページのDOM構造がだいたいどんな風になっているのか一目でわかるので、色んなサイトで使ってみるのもオススメです。

＊現在の仕様では、iframe内の要素には対応していません。またbody配下の要素内スクロールの追従や、ガイド読み込み後のスタイル変更には対応できないので、都度on/offの切り替えでガイドを再取得していただければと思います。

使用したもの

• Shadow DOM
• Custom Elements

機能としては単純で、DOMの全ての要素の座標と大きさを取得し、bodyタグ直下に要素を追加するというものです。

追加するCSSをスコープできるようShadowDOM+Custom Elementsで制作しました。

content.js

import '@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce.js'; // WebComponentsを使用するためのポリフィル 
import css from '../sass/_content.scss'; // raw-loaderで読み込む 
//... 
class DomGuides extends HTMLElement { 
    constructor() { 
        super(); 
        const shadow = this.attachShadow({ 
            mode: "open" 
        }); 
 
        this.root = document.createElement('div'); 
        this.root.className = 'root'; 
        shadow.appendChild(this.root); 
        const style = document.createElement('style') 
        style.innerHTML = css; 
        shadow.appendChild(style); 
        const elms = ['lineBox', 'userLineBox', 'lineSize']; 
        elms.forEach(name => { 
            const elm = document.createElement('div'); 
            elm.className = name; 
            this.root.appendChild(elm); 
        }) 
        this.focusGuide = false; 
        this.currentGuide = false; 
 
        this.settings(); 
        this.setUserLines(); 
        this.setEvents(); 
    } 
    //... 
} 

Webpackのsass-loaderでSCSSからCSSに変換したものをraw-loaderで文字列として読み込み、生成した<style>タグにinnerHTMLで書き込んでいます。
manifest.jsonは以下のようになりました。

manifest.json

{ 
  "manifest_version": 2, 
  "name": "DOM Guides", 
  "version": "0.1.0", 
  "description": "DOMに自動でガイドを引いて、長さを計測することができます。", 
  "icons": { 
    "16": "icons/icon16.png", 
    "48": "icons/icon48.png", 
    "128": "icons/icon128.png" 
  }, 
  "page_action": { 
    "default_icon": "icons/icon48_gray.png", 
    "default_title": "DOM Guides" 
  }, 
  "background": { 
    "scripts": ["js/background.js"] 
  }, 
  "content_scripts": [{ 
    "matches": [ 
      "<all_urls>" 
    ], 
    "js": ["js/content.js"] 
  }], 
  "permissions": [ 
    "tabs", 
    "storage", 
    "background" 
  ], 
  "options_page": "option.html" 
} 

追加する要素の数が多くなると相当重くなるので、適宜オプションを変更して調節してください。

挙動不具合などあればご報告お待ちしております。