DOMNavigator Extension Chrome

右クリックでウェブページの要素のタグ、属性、値を取得し、IDが設定されている親要素までの情報をJSON形式でクリップボードにコピーするChrome拡張機能。

Latest Version

Version

0.1.3

Update

November 12, 2023

Size

23.74KiB

Developer

DOMNavigator Extension

概要：
`DOMNavigator` は、Chrome DevTools の機能を拡張します。ユーザーがElementsパネルで選択したDOM要素の情報を表示し、コピーできるようになります。

コピーした情報を[Xpath生成アシスタント](https://chat.openai.com/g/g-aIA7TLluS-xpathsheng-cheng-asisutanto)に貼り付けると、選択した要素のXPathの候補が生成されます。

使い方：

1. 任意のウェブページを開き、DevToolsを起動します（F12キーまたはCtrl+Shift+I、MacではCmd+Option+I）。
2. `Elements`パネルにて、調べたいDOM要素を選択します。
3. サイドバーから `DOMNavigator` を選択します。
4. `DOMNavigator` にDOMのリストが作成されます。
5. リストの一番上のオブジェクトを選択して、右クリックメニューから`CopyObject`ボタンをクリックすると、JSON形式の要素情報がクリップボードにコピーされます。
6. [XPath生成アシスタント](https://chat.openai.com/g/g-aIA7TLluS-xpathsheng-cheng-asisutanto)に貼り付けて送信すると、XPathの候補が生成されます。
7. 生成されたXPathを使って、Seleniumなどの自動テストツールでDOM要素を操作できます。

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "DOMNavigator", "version": "0.1.3", "description": "\u53f3\u30af\u30ea\u30c3\u30af\u3067\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306e\u8981\u7d20\u306e\u30bf\u30b0\u3001\u5c5e\u6027\u3001\u5024\u3092\u53d6\u5f97\u3057\u3001ID\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u89aa\u8981\u7d20\u307e\u3067\u306e\u60c5\u5831\u3092JSON\u5f62\u5f0f\u3067\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3059\u308bChrome\u62e1\u5f35\u6a5f\u80fd\u3002", "devtools_page": "devtools.html", "icons": { "16": "images/16.png", "48": "images/32.png", "128": "images/128.png" }}