CSS
JavaScript
Chrome
chrome-extension
WebComponents

DOMに自動でガイドを引くChrome拡張機能

dom.gif

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


概要

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

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

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

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

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

DOM Guides (Chrome ウェブストア)

github.com/kadowakid/dom-guides

user.gif

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();
}
//...
}


Webpacksass-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"
}

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

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