はじめに
このプラグインは、webページのhtmlタグをポップ画面に表示するツールです。HTMLタグは、chromeのデバッグコンソールで見ることもできますが、もっと簡便にみれるようにしたものです。たとえば、yahoo!JAPANニュースのページで、リンクにカーソルを当ててctrlキー+clickするとポップ画面にそのリンクのhtmlタグが表示されます。
webページを参照するプラグインプログラムを作成しているときに、簡単にhtmlタグを見てみたいと思ったときに使用します。
その場で、htmlタグを見ることができ、作業が少し楽になります。
以降にサンプルを示します。
サンプル
Yahoo!JapanのリンクをHTML表示したものです。
プラグインのダウンロード
実際にこの動作を確認するためには、プラグインをダウンロードする必要があります。
以下のボタンをクリックするとダウンロードが開始します。ファイルはzipファイルのため、任意のフォルダーへダウンロードできます。
このリンクをクリックすると、任意のフォルダーへダウンロードできます。
解凍先は任意のフォルダーへ解凍します。chromeブラウザーへのインストールは、設定で拡張機能を選択し、さらに、パッケージ化されていない拡張機能をクリックして、先ほどのフォルダーを指定します。すると、プラウザーへelementViewプラグインをインストールできます。
テスト方法
先に、ブラウザーの右上にある、拡張機能ボタンをクリックし、elementViewプラグインのアイコンを選択してアイコンを表示させます。
次に、yahoo!JAPANサイトをリクエストして表示します。
真ん中の列にサムネイルのニュースがありますので、そのサムネイルまたはタイトルにカーソルをあてて、ctrlキー+clickするとポップアップが出ます。そこに選択したhtmlタグが表示されます。
カーソルを当てて表示させるエレメントはページの任意のエレメントで可能です。
ほとんどのエレメントで表示できます。
このhtmlタグの表示は、デバッグコンソールで見ることはできますが、このプラグインはシンプルに見ることができますので、確認する程度で使用するといいと思います。
ソースコード
コードはシンプルです。background.jsは使用していません。
/**********************************************************************
*elementViewプラグイン
*content.js
*機能
*(1) 選択したエレメントのhtmlビュー
* ctrl+clickでpop画面に表示します。
*
*あらかじめ、jquery.jsをロードしています。
***********************************************************************/
function htmlspecialchars(unsafeStr){
let safeStr = unsafeStr.replace(/&/g,'&')
.replace(/"/g,'"')
.replace(/'/g,"'")
.replace(/</g,'<')
.replace(/>/g,'>');
safeStr = safeStr.replace(/(.*)>(.*)<\/span>/mg,"$1><span style='color:red;'>$2</span><\/span>");
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_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で見ることができるといいなと思い作成しました。
しばらくしようしてみて、改良すべきところがあれば、随時改良してゆきたいと思います。