html要素のXPathをワンクリックでクリップボードにコピーするchrome拡張機能を作成する

概要

表題の通りwebページのhtml要素のXPathをマウスクリック1回でクリップボードにコピーする機能を持つchrome拡張機能を作成しました。

XPathは目的のhtml要素を検索・取得したいときに時々使用することがあるかと思います。

例えばブラウザからXPathを取得するには、ディベロッパーツールを開いてから要素を探してコピーするので取得したい要素が多い場合は面倒になることがあるかもしれません。

また、XPathを取得可能にするような便利なjavascriptの関数はおそらくないと思う(私が知る限りですが)ので自作する必要があります。

XPathを構築し取得するにはターゲットの要素タグ名から親要素へ向かって再帰的に探索しながら構築する必要があります。

実際のコード実装部分は有料になります。

保有機能

・ボタンによる機能のON/OFF切り替え

・要素にマウスカーソルを合わせるとその要素の色が反転(見やすさのため完全な反転色にせず少しずらしています)、マウスカーソルを外すと元の色へ

・右クリックで要素のXPathをクリップボードにコピー(この時右クリックメニューが出ないようにしています。機能をOFFにすると元に戻ります)

例

例として、以下はココナラの「お知らせ」ベルを右クリックしたときの様子です。要素は分かりやすくするため、マウスホバーすれば色が変わるように設定しています。

コピーされたXPathは以下になります。

(ブログの禁止ワードに引っかかったので画像です)

使用方法

・このブログ末尾の項目、コード項目のコードをコピペなどして作成したファイルを同封したフォルダを作って拡張機能を読み込んでください。

・XPathを取得したいページを開くか更新してください。

・popup.htmlを開くとOFFボタンが現れるのでボタンをクリックしてください。ボタン表示がONになり、機能するようになります。(ここで初めて拡張機能を読み込んでアクティベートした直後、ページを更新していない場合「ページを更新してください」アラートが出ます)

・機能を切りたい時は再度ボタンをクリックしてON->OFFにしてください。

　*popup.html側の状態は保存されないのでpopup.htmlが閉じた後にON/OFF切り替えを行いたい時は再度開いてボタンをクリックする必要があります。そこまで不便ではありませんが、面倒に感じるときは下記コードを改修してstorageなどを作ってください。

　*また、機能の範囲を絞るためON/OFFに反応するページは最後に更新したタブだけです。ページ更新・移動した場合は再度機能をONする必要があります。

注意事項

・最低限の機能しか有しておりませんのでほしい機能があれば適宜各自で改修してください。

・作者はソフトウェアに関してなんら責任を負いません。使用前にコードを確認してください。

コード