elementViewというプラグインを作成しました。

# はじめに
このプラグインは、webページのhtmlタグをポップ画面に表示するツールです。HTMLタグは、chromeのデバッグコンソールで見ることもできますが、もっと簡便にみれるようにしたものです。たとえば、yahoo!JAPANニュースのページで、リンクにカーソルを当ててctrlキー+clickするとポップ画面にそのリンクのhtmlタグが表示されます。

webページを参照するプラグインプログラムを作成しているときに、簡単にhtmlタグを見てみたいと思ったときに使用します。
その場で、htmlタグを見ることができ、作業が少し楽になります。
以降にサンプルを示します。

# サンプル
Yahoo!JapanのリンクをHTML表示したものです。

![htmlView.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/128bfd2f-96bb-4cd2-70d0-363a38d12e2d.png)

# プラグインのダウンロード
実際にこの動作を確認するためには、プラグインをダウンロードする必要があります。
以下のボタンをクリックするとダウンロードが開始します。ファイルはzipファイルのため、任意のフォルダーへダウンロードできます。
このリンクをクリックすると、任意のフォルダーへダウンロードできます。
解凍先は任意のフォルダーへ解凍します。chromeブラウザーへのインストールは、設定で拡張機能を選択し、さらに、パッケージ化されていない拡張機能をクリックして、先ほどのフォルダーを指定します。すると、プラウザーへelementViewプラグインをインストールできます。

[elementViewプラグインダウンロード](https://favorite.tecoyan.net/slim/zip/elementView.zip)

# テスト方法
先に、ブラウザーの右上にある、拡張機能ボタンをクリックし、elementViewプラグインのアイコンを選択してアイコンを表示させます。
次に、yahoo!JAPANサイトをリクエストして表示します。
真ん中の列にサムネイルのニュースがありますので、そのサムネイルまたはタイトルにカーソルをあてて、ctrlキー+clickするとポップアップが出ます。そこに選択したhtmlタグが表示されます。

カーソルを当てて表示させるエレメントはページの任意のエレメントで可能です。
ほとんどのエレメントで表示できます。

このhtmlタグの表示は、デバッグコンソールで見ることはできますが、このプラグインはシンプルに見ることができますので、確認する程度で使用するといいと思います。

# ソースコード
コードはシンプルです。background.jsは使用していません。

``` content.js
/**********************************************************************
*elementViewプラグイン
*content.js
*機能
*(1) 選択したエレメントのhtmlビュー
*　　ctrl+clickでpop画面に表示します。
*
*あらかじめ、jquery.jsをロードしています。
***********************************************************************/
function htmlspecialchars(unsafeStr){
    
  let safeStr = unsafeStr.replace(/&/g,'&amp;')
                   .replace(/"/g,'&quot;')
                   .replace(/'/g,"&#39;")
                   .replace(/</g,'&lt;')
                   .replace(/>/g,'&gt;');
  safeStr = safeStr.replace(/(.*)&gt;(.*)&lt;\/span&gt;/mg,"$1&gt;<span style='color:red;'>$2</span>&lt;\/span&gt;");      
           
  return safeStr;
}
$("body").on('click',(e)=>{
            //リセットしてから
            if(e.ctrlKey===true){
                    //
                    console.log("clickしました。"+e.target.parentElement);
                    ss = e.target.parentNode;
                    console.log(ss.parentNode);
                    console.log("clickしました。"+ss.parentNode);

                    let html = "<div id='html_div' style='z-index:999999;overflow:scroll;background-color:white;border:solid 5px blue;position:fixed;top:0px;left:25%;width:1000px;height:400px;'><span style='background-color:lightpink;width:1000px;display:block;'>親ページでカーソルを当てたエレメントでctrl+clickするとhtmlタグを表示します。</span><div id='pop_help' style='zoom:1.2;background-color:lightgreen;'><p>ページの説明</p><br></div></div>";
                   //すでにあればスキップ
                   if($("#html_div").length === 0){
                        $("body").append(html);
                    }
                    $("#html_div").draggable();

                    let dd = htmlspecialchars(ss.parentNode.innerHTML);

                    $("#pop_help").html(dd);
                    return false;
            }else{

            }
    
    });

```
# manifest.jason
``` manifest.jason
{
  "manifest_version": 3,
  "name": "elementViewプラグイン",
  "version": "1.0",
  "description": "elementをViewするプラグインです。",
  "background": {
    "service_worker":"background.js",
    "type": "module"
  },
      "externally_connectable": {
    "matches": ["https://*/*"
    ]
  },
  
  "content_security_policy": {
      "extension_pages": "script-src 'self'  'wasm-unsafe-eval'; object-src 'self'; "
  },
  "content_scripts": [{
    "matches": ["https://*/*"],
        "js": ["jquery.js","jquery-ui.js","content.js"],
        "css": ["jquery-ui.css"]     
         
  }],
  "permissions": [
  "webNavigation",
  "scripting",
  "activeTab",      
  "tabs"
  ],      
  "action": {
     "default_title": "elementViewプラグイン",
     "default_icon":{
      "19": "yy19plus.png",
      "96": "jimdo96.png",      
      "128": "128jimdo_repeat.png"      
    }
  },
  "host_permissions": [
  "<all_urls>"
  ]

}
```



# あとがき
プラグインを作成していると、ちょっとページのhtmlタグを見てみたいときに、毎回、検証ボタンでデバッグコンソールを開くのが億劫になることがあります。
そんな時に、簡単にタグにカーソルを当てて、ctrlキー+clickで見ることができるといいなと思い作成しました。
しばらくしようしてみて、改良すべきところがあれば、随時改良してゆきたいと思います。