CloudCircus社【Fullstar】 × Chrome拡張機能でDOM取得

この記事でお話ししたいこと

Chrome拡張は開発ハードルも低く、公開しなければ無料で始められるとても魅力的なサービスです。
CloudCircus社では【Fullstar】という製品の一部としてChrome拡張を利用しています。

　* もっともっとWebエンジニアにとって使いやすい拡張がもっと増えたらいいな
　* 初級編では拡張機能試したけどその後は何もやってないのよねって人への「こんなこともできるよ」入門編

どうしてDOMを取得したいの？

まずは下記の動画をご覧ください。
　サイト上に吹き出しや画像を表示し、システムを利用するための導線や説明をわかりやすく説明しています。

このように「どの要素をハイライトして」「要素からどの程度の距離（座標）に吹き出しを表示するか？」という設定を
Chrome拡張から行います。

Chrome拡張から表示中のサイトのDOMを取得する仕組み

Chrome拡張から、表示中のサイトにアクセスしてDOM情報を取得します。

マウスで直接選択することでHTMLとか知らないですって人もかんたんに要素を選択できます。

ざっくりですが理屈としては下記のような処理を行います。
①マウスポインタから画面の座標位置を取得
②座標の位置からアクティブタブの要素を取得
③一致した要素からCSSセレクター文字列を生成

「CSSセレクター文字列を生成」ですが、独自の優先順位で生成しています。
ID　>　Name属性　> Class（一意なもの） > 疑似クラス※など

※擬似クラス　こちらがとってもわかりやすいです
https://www.asobou.co.jp/blog/web/css2#Anth-childnn

拡張内のJSファイルでの値渡しは

chrome.scripting.executeScript
chrome.tabs.sendMessage

などを利用します。

Manifestバージョン３前提です！まだ２の人は該当しない可能性があります、ご注意ください

Chrome拡張で必要な「パーミッション」とは

Chrome拡張で機能を作り込むほど無視できないのがManifestファイルの「Permission」です。
Fullstarの一部を書き出してみました。

{
  "manifest_version": 3,
   "permissions": ["activeTab", "cookies", "tabs","scripting"],
  　　"host_permissions": [
    "FullstarのURL"
  　　],
   "background": {“service_worker”: “xxxxxxxx”},
   "web_accessible_resources": [{
        "resources": ["拡張機能のIframe", "拡張機能内の操作.js",...]
   }],
  "action": {
    "default_popup": "popup.html",
   },
  "author": "Cloud CIRCUS inc.",
}

今回のように「表示中のタブについて取得したい」ときはactibeTabとtabsが必須です。

一応注意
あったらいいでしょ！ってPermissionを追加して開発すると利用者に警戒されるだけでなく
審査のときすべて理由を記載する必要がある　＋　審査に時間がかかる（特にhost_permissionsは時間がかかります）ので注意です。

まとめ

ざっくりな内容でしたが、Chrome拡張で自分用に作ってみたいなとかこれがあればWebエンジニア的に助かるなみたいなものが
今後作られていくといいなと思います。

では最後に個人的にChrome拡張を導入後に感じているメリット・デメリットで締めさせてもらいます。

Good
Javascriptで開発可能なので特別なツールもいらない、マシンスペックも気にせず開発可能
オリジナルの拡張機能を作ると、既存の拡張機能使う時の「この拡張機能、検索すると「危険」とか出てきて怖い…みたいなのがない
ManifestファイルのPermissionによるが、審査の時間が早い、公開も安い

Warning
前回のリリース時には引っかからなかった部分で審査に落ちることが稀にある。リリース日程には余裕を
V2⇨V3の情報が混じって情報収集に混乱しがち。書籍も少ないのでWebでの情報収集に難航しがち

注意点としてはオリジナルでの開発としてはデメリットでもないと思いますが、もし製品の一部に考えてますって方の参考になればと思います。