Chrome拡張を使ったDOM構造の取得

Transcript

1. Chrome拡張を使った DOM構造の取得
2. 自己紹介 • 受託系の企業→SESで金融系システムの開発したりアプリ開 発したり→いまここ • ほぼほぼPHP、Javascriptは入社前はjQueryメイン • 入社後CloudCircus社「Fullstar」のSM、リードエンジニア 寺田　真理
3. お話しする概要 • Fullstarの概要・同時に開発したChrome拡張[Fullstar guide editor] のご紹介 • Chrome拡張の「よく見るサンプル以上」に挑戦したい方へ Chrome拡張のざっくり入門編 • 初めて拡張機能開発＋プロダクトとして活用して
4. Fullstarとは？
5. Saasをターゲットとした 　　　カスタマーサポート支援システム 例えば　 契約直後のある程度固定した問い合わせ対応に人手が取られ る 例えば　 登録までは終わってるけどログイン後ちゃんと使ってくれて ない
6. チュートリアル機能（プロダクトツアー）で解消
7. お客様のサイト <div>動画</div> <div>画像</div> <div>吹き出し</div> <iframe></iframe>
8. new Promise(...) DBからCSSセレクターの取得 CSSセレクターからの相対位置でガイド要素を表示 設定されているURLか？　⇨　NO　⇨中断 「次」のガイドへ進む Iframe
9. どこでChrome拡張を使うの？
10. • チュートリアルを表示したい要素をお客様のサイトから取得す る必要がある • エンジニア不要で作成できるサービスであるため、 HTMLやJavascriptの知識がなくても設定が簡単に可能にした い！
11. Chrome拡張によってお客様サイト上のコードを取得
12. Chrome拡張によってお客様サイト上のコードを取得 お客様のサイト スクリプト（content_scriptなど） Chrome拡張 [ Fullstar guide editor ] 拡張機能側の画面⇨スクリプト⇨お客様のサイト（アクティブタブ）へのアク セスは下記に上げるようなインターフェースを利用します。 • MessageChannel • chrome.tab.sendMessage • chrome.scripting.executeScript
13. Chrome拡張によってお客様サイト上のコードを取得 お客様のサイト スクリプト（content_scriptなど） Chrome拡張 [ Fullstar guide editor ] ①マウスポインタの X軸・Y軸を取得 ②取得した座標から一致する 要素の取得 ※document.elementFromPoint(X, Y) ③一致した要素から セレクターの文字を 生成
14. Fullstarの拡張機能の構成（一部抜粋） { "manifest_version": 3, "permissions": ["activeTab", "cookies", "tabs","scripting"], "background": {“service_worker”: “xxxxxxxx”}, "web_accessible_resources": [{ "resources": ["拡張機能のIframe", "拡張機能内の操作.js",...] }], "action": { "default_popup": "popup.html", }, "author": "Cloud CIRCUS inc.", }
15. Fullstarの拡張機能の構成（一部抜粋） { "manifest_version": 3, "permissions": ["activeTab", "cookies", "tabs","scripting"], "background": {“service_worker”: “xxxxxxxx”}, "web_accessible_resources": [{ "resources": ["拡張機能のIframe", "拡張機能内の操作.js",...] }], "action": { "default_popup": "popup.html", }, "author": "Cloud CIRCUS inc.", } バックグラウンドで動く スクリプト Chrome拡張機能で 利用する権限をリストアップ 拡張機能内で利用する ライブラリやJS、Iframeなどを列挙する ※　ここではワイルドカード指定もOK いまから作る拡張機能はmanifest_versionは３ じゃないと審査は通りません
16. • activeTab/tabs アクティブタブの情報や、タブに対してスクリプトを実行するた めに必要な権限 • cookies cookieを利用する場合に必要 例：chrome.cookies.getAll… • scripting v3以降のみ利用可能。Webページに対してスクリプトを送信でき る。例：chrome.scripting.executeScript … Fullstarの拡張機能の構成（一部抜粋）
17. Popup.html contents_script ブラウザ Cookie tab Storage Alerms 適切な権限を設定した上で、 スクリプトを実行したい時は　chrome.scripting.executeScript　また、 ブラウザに対してデータを送信したい時などは　chrome.tabs.sendMessageを利用します。
18. 良い点 • 開発の導入まで早い！公開も安い！ Chromeさえあればよい • 日々の業務効率化など「自分だけの ツール」が簡単につくれる • JSなので勉強しやすい • iOSのアプリ審査と比べると審査は早 め。V3だと即審査OKでした 初めて拡張機能開発＋プロダクトとして活用して 引っかかりやすい部分 • 書籍が少なすぎる • ちょっと踏み込もうと思うと情報が 少ない分止まりがち • 前回まで何の問題もなかったところ で審査が落ちたりすることが極稀に ある • Chrome拡張の管理画面だけではDL 数などの評価が足りないかも？
19. まとめ
20. 　DOM操作ができることでWebプログラマの　 　ちょっとした効率化にも！ 　拡張機能のDL制限やセキュリティ上の不安など 　ある方にはローカル開発さらにおすすめです 「空き時間で」開発できるChrome拡張 　「思ったよりいいのできたな」って時はぜひ 　Chromeウェブストアへ🎈
21. ありがとうございました