WebページHTML構造の一目瞭然な拡張
これをする理由
この文章はWebページのHTML構造が一目瞭然なトリック-oneookに基づいて書かれた.['div', 'span', 'ul', 'li', 'dd', 'dl', 'section', 'h1', 'a', 'img', 'form', 'button', 'header', 'footer', 'input', 'p'].forEach(e => {
document.querySelectorAll(e).forEach(element => {
element.style.outline = "1px solid dodgerblue"
})
})
ビデオを見てトリックを習った.このコードを使うと、すべてのレイアウトが一目瞭然になるそうです.面白いですが、この投稿のコピーにアクセスするたびに面倒なので、どこかに保存すべきだと思います.
でも貯蔵よりクロムで拡張した方がいいんじゃないですか?
じゃ、自分で開発しましょう。
だから自分で作ることにしました.普段からGoogle拡張アプリもやってみたいのですが、あまりサイズが大きくない感じです.イメージはすぐに思いついた.ラベル名、色、線の太さを選択して反映できます.
クロム拡張の追加方法には触れません.<!DOCTYPE html>
<html>
<head>
<script src="scripts.js"></script>
<style type="text/css">
.tagBox {
display: flex;
max-width: 100%;
}
.tagName {
text-align: center;
font-size: 16px;
min-width: 20%;
margin-right: 10px;
letter-spacing: -0.5px;
font-weight: 300;
}
.color {
border: none;
width: 8%;
background-color: transparent;
}
.thickness {
width: auto;
}
</style>
</head>
<body style="width: 300px"></body>
</html>
cssが数少ないと、いい加減にします.次にbodyのみを作成し、widthを300 px程度に適切に指定します.HTML要素になるタグにはいくつかの種類があるので、動的に作成するのが望ましいです.
動的組織ページ
tagに関する情報をオブジェクトとして事前に作成し、配列に入れます.foreachゲートの周りにtagやcolorなどを書きます.colorには、面白そうな色が適当に入っています.筆者はデザイン感がない.// variable
const tags = [
{ tag: "div", color: "#F54E3B" },
{ tag: "span", color: "#D6458A" },
{ tag: "ul", color: "#D04DEB" },
{ tag: "li", color: "#753BD4" },
{ tag: "dd", color: "#3744FA" },
{ tag: "dl", color: "#E36EF5" },
{ tag: "section", color: "#9C72D6" },
{ tag: "h1", color: "#7E82EB" },
{ tag: "a", color: "#689AD4" },
{ tag: "img", color: "#6BECFA" },
{ tag: "form", color: "#58C8F5" },
{ tag: "button", color: "#5ED6C3" },
{ tag: "header", color: "#6AEB9A" },
{ tag: "footer", color: "#65D455" },
{ tag: "input", color: "#C9FA55" },
{ tag: "p", color: "#FAE25B" },
];
// Create chrome extension body.
window.onload = () => {
tags.forEach(({ tag, color }) => {
console.log(color);
const tagBox = document.createElement("div");
tagBox.className = "tagBox";
tagBox.innerHTML = `
<div class="tagName">${tag}</div>
<input id="${tag}Check" class ="tagCheck" type="checkbox" name="tags" />
<input id="${tag}Color" class="color" type="color" value="${color}" />
<input
id="${tag}Thickness"
class="thickness"
type="range"
min="1"
max="10"
step="0.1"
value="1"
/>`;
document.body.appendChild(tagBox);
});
};
ポップアップウィンドウの画像は次のとおりです。
多分こんなイメージになりました.前述したようにラベルの名前が見え、checkboxでは見たい内容しか見えません.色を選択し、線の太さを決定できます.線の太さは1～10で、線の太さは0.1単位で調整できます.
ここまでは形が出ていましたが、今はチェックしたものをページに表示すればいいだけです.
実際の作業を担当するタスク() // work process
const work = () => {
tags.forEach(({ tag }) => {
const tagChecked = document.getElementById(`${tag}Check`).checked;
const tagColor = document.getElementById(`${tag}Color`).value;
const tagThickness = document.getElementById(`${tag}Thickness`).value;
console.log(tagChecked, tagColor, tagThickness);
if (tagChecked) {
// 컨텐츠 페이지를 대상으로 코드 작성
chrome.tabs.executeScript({
code: `document.querySelectorAll("${tag}").forEach((el) => {
el.style.outline = "${tagThickness}px solid ${tagColor}";
});`,
});
} else {
chrome.tabs.executeScript({
code: `document.querySelectorAll("${tag}").forEach((el) => {
el.style.outline = "none";
});`,
});
}
});
};
操作方法にはforeach文も使用されています.ポップアップウィンドウから、ユーザが入力した選択、色、線の太さなどを読み込み、それに応じて実際のページを変更します.chrome.tabs.executeScript({ code : "console.log(123)" });
拡張を使ったことがない人はおかしいと感じますが、Extensionでは基本的にdocumentです.bodyは拡張されたbody、つまり拡張アプリケーションをクリックしたときに現れるポップアップウィンドウbodyです.実際のユーザーが表示しているページに参加する場合は、chromeであるactiveTabを使用する必要があります.tabsオブジェクトで操作できます.
コード中の文字列は実際のコードとして解釈され,JavaScriptで計算するとevalと考えられる.
使用状況
特にコードがないので、実際に使っているのを直接見ることができます.使うとこうなります.右上隅にExtensionをクリックすると、ポップアップウィンドウが開き、そこで調整できます.残念なことに、ポップアップウィンドウを閉じて再開すると、以前の設定は保持されません.
残念なことに、今日初めてChromeアプリを作りましたが、審査に時間がかかるようです.数週間かかるかもしれないそうですが、これは十分なコードではなく、すぐに完成すると信じています.今日アップロードが終わったらVelogに文章を書くと思っていたのですが、残念ながらすぐにchromeappリンクをアップロードできませんでした.
たいしたことではありませんが、クロム拡張をどのように作るかを学んだので、これは良い経験です.閑話ですがChromeアプリ作成時に開発者(?)を登録この仕事をするには5ドルの費用がかかります.
バカじゃないの?私はあなたたちに拡張をしました.私はお金を払うと言っていますか.
09.07
ReactのようにFront Frameworkを使用すると、ページ変換時にすべての要素が消え、ルートから再描画されます.したがって、すべてのアウトラインは消えますが、rootだけがアウトラインを残します.
審査が通ってから改める.
つまり、実際のユーザーがいれば、修正するという意味です.
githubリポジトリリンク:https://github.com/kakasoo/showMeTheLayout
09.10
Chrome Webショップに展開
Reference
この問題について(WebページHTML構造の一目瞭然な拡張), 我々は、より多くの情報をここで見つけました
https://velog.io/@kakasoo/웹-페이지-HTML-구조-한눈에-보는-익스텐션
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
['div', 'span', 'ul', 'li', 'dd', 'dl', 'section', 'h1', 'a', 'img', 'form', 'button', 'header', 'footer', 'input', 'p'].forEach(e => {
document.querySelectorAll(e).forEach(element => {
element.style.outline = "1px solid dodgerblue"
})
})だから自分で作ることにしました.普段からGoogle拡張アプリもやってみたいのですが、あまりサイズが大きくない感じです.イメージはすぐに思いついた.ラベル名、色、線の太さを選択して反映できます.
クロム拡張の追加方法には触れません.
<!DOCTYPE html>
<html>
<head>
<script src="scripts.js"></script>
<style type="text/css">
.tagBox {
display: flex;
max-width: 100%;
}
.tagName {
text-align: center;
font-size: 16px;
min-width: 20%;
margin-right: 10px;
letter-spacing: -0.5px;
font-weight: 300;
}
.color {
border: none;
width: 8%;
background-color: transparent;
}
.thickness {
width: auto;
}
</style>
</head>
<body style="width: 300px"></body>
</html>
動的組織ページ
tagに関する情報をオブジェクトとして事前に作成し、配列に入れます.foreachゲートの周りにtagやcolorなどを書きます.colorには、面白そうな色が適当に入っています.筆者はデザイン感がない.// variable
const tags = [
{ tag: "div", color: "#F54E3B" },
{ tag: "span", color: "#D6458A" },
{ tag: "ul", color: "#D04DEB" },
{ tag: "li", color: "#753BD4" },
{ tag: "dd", color: "#3744FA" },
{ tag: "dl", color: "#E36EF5" },
{ tag: "section", color: "#9C72D6" },
{ tag: "h1", color: "#7E82EB" },
{ tag: "a", color: "#689AD4" },
{ tag: "img", color: "#6BECFA" },
{ tag: "form", color: "#58C8F5" },
{ tag: "button", color: "#5ED6C3" },
{ tag: "header", color: "#6AEB9A" },
{ tag: "footer", color: "#65D455" },
{ tag: "input", color: "#C9FA55" },
{ tag: "p", color: "#FAE25B" },
];
// Create chrome extension body.
window.onload = () => {
tags.forEach(({ tag, color }) => {
console.log(color);
const tagBox = document.createElement("div");
tagBox.className = "tagBox";
tagBox.innerHTML = `
<div class="tagName">${tag}</div>
<input id="${tag}Check" class ="tagCheck" type="checkbox" name="tags" />
<input id="${tag}Color" class="color" type="color" value="${color}" />
<input
id="${tag}Thickness"
class="thickness"
type="range"
min="1"
max="10"
step="0.1"
value="1"
/>`;
document.body.appendChild(tagBox);
});
};
ポップアップウィンドウの画像は次のとおりです。
多分こんなイメージになりました.前述したようにラベルの名前が見え、checkboxでは見たい内容しか見えません.色を選択し、線の太さを決定できます.線の太さは1～10で、線の太さは0.1単位で調整できます.
ここまでは形が出ていましたが、今はチェックしたものをページに表示すればいいだけです.
実際の作業を担当するタスク() // work process
const work = () => {
tags.forEach(({ tag }) => {
const tagChecked = document.getElementById(`${tag}Check`).checked;
const tagColor = document.getElementById(`${tag}Color`).value;
const tagThickness = document.getElementById(`${tag}Thickness`).value;
console.log(tagChecked, tagColor, tagThickness);
if (tagChecked) {
// 컨텐츠 페이지를 대상으로 코드 작성
chrome.tabs.executeScript({
code: `document.querySelectorAll("${tag}").forEach((el) => {
el.style.outline = "${tagThickness}px solid ${tagColor}";
});`,
});
} else {
chrome.tabs.executeScript({
code: `document.querySelectorAll("${tag}").forEach((el) => {
el.style.outline = "none";
});`,
});
}
});
};
操作方法にはforeach文も使用されています.ポップアップウィンドウから、ユーザが入力した選択、色、線の太さなどを読み込み、それに応じて実際のページを変更します.chrome.tabs.executeScript({ code : "console.log(123)" });
拡張を使ったことがない人はおかしいと感じますが、Extensionでは基本的にdocumentです.bodyは拡張されたbody、つまり拡張アプリケーションをクリックしたときに現れるポップアップウィンドウbodyです.実際のユーザーが表示しているページに参加する場合は、chromeであるactiveTabを使用する必要があります.tabsオブジェクトで操作できます.
コード中の文字列は実際のコードとして解釈され,JavaScriptで計算するとevalと考えられる.
使用状況
特にコードがないので、実際に使っているのを直接見ることができます.使うとこうなります.右上隅にExtensionをクリックすると、ポップアップウィンドウが開き、そこで調整できます.残念なことに、ポップアップウィンドウを閉じて再開すると、以前の設定は保持されません.
残念なことに、今日初めてChromeアプリを作りましたが、審査に時間がかかるようです.数週間かかるかもしれないそうですが、これは十分なコードではなく、すぐに完成すると信じています.今日アップロードが終わったらVelogに文章を書くと思っていたのですが、残念ながらすぐにchromeappリンクをアップロードできませんでした.
たいしたことではありませんが、クロム拡張をどのように作るかを学んだので、これは良い経験です.閑話ですがChromeアプリ作成時に開発者(?)を登録この仕事をするには5ドルの費用がかかります.
バカじゃないの?私はあなたたちに拡張をしました.私はお金を払うと言っていますか.
09.07
ReactのようにFront Frameworkを使用すると、ページ変換時にすべての要素が消え、ルートから再描画されます.したがって、すべてのアウトラインは消えますが、rootだけがアウトラインを残します.
審査が通ってから改める.
つまり、実際のユーザーがいれば、修正するという意味です.
githubリポジトリリンク:https://github.com/kakasoo/showMeTheLayout
09.10
Chrome Webショップに展開
Reference
この問題について(WebページHTML構造の一目瞭然な拡張), 我々は、より多くの情報をここで見つけました
https://velog.io/@kakasoo/웹-페이지-HTML-구조-한눈에-보는-익스텐션
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
// variable
const tags = [
{ tag: "div", color: "#F54E3B" },
{ tag: "span", color: "#D6458A" },
{ tag: "ul", color: "#D04DEB" },
{ tag: "li", color: "#753BD4" },
{ tag: "dd", color: "#3744FA" },
{ tag: "dl", color: "#E36EF5" },
{ tag: "section", color: "#9C72D6" },
{ tag: "h1", color: "#7E82EB" },
{ tag: "a", color: "#689AD4" },
{ tag: "img", color: "#6BECFA" },
{ tag: "form", color: "#58C8F5" },
{ tag: "button", color: "#5ED6C3" },
{ tag: "header", color: "#6AEB9A" },
{ tag: "footer", color: "#65D455" },
{ tag: "input", color: "#C9FA55" },
{ tag: "p", color: "#FAE25B" },
];
// Create chrome extension body.
window.onload = () => {
tags.forEach(({ tag, color }) => {
console.log(color);
const tagBox = document.createElement("div");
tagBox.className = "tagBox";
tagBox.innerHTML = `
<div class="tagName">${tag}</div>
<input id="${tag}Check" class ="tagCheck" type="checkbox" name="tags" />
<input id="${tag}Color" class="color" type="color" value="${color}" />
<input
id="${tag}Thickness"
class="thickness"
type="range"
min="1"
max="10"
step="0.1"
value="1"
/>`;
document.body.appendChild(tagBox);
});
}; 多分こんなイメージになりました.前述したようにラベルの名前が見え、checkboxでは見たい内容しか見えません.色を選択し、線の太さを決定できます.線の太さは1～10で、線の太さは0.1単位で調整できます.
ここまでは形が出ていましたが、今はチェックしたものをページに表示すればいいだけです.
実際の作業を担当するタスク() // work process
const work = () => {
tags.forEach(({ tag }) => {
const tagChecked = document.getElementById(`${tag}Check`).checked;
const tagColor = document.getElementById(`${tag}Color`).value;
const tagThickness = document.getElementById(`${tag}Thickness`).value;
console.log(tagChecked, tagColor, tagThickness);
if (tagChecked) {
// 컨텐츠 페이지를 대상으로 코드 작성
chrome.tabs.executeScript({
code: `document.querySelectorAll("${tag}").forEach((el) => {
el.style.outline = "${tagThickness}px solid ${tagColor}";
});`,
});
} else {
chrome.tabs.executeScript({
code: `document.querySelectorAll("${tag}").forEach((el) => {
el.style.outline = "none";
});`,
});
}
});
};
操作方法にはforeach文も使用されています.ポップアップウィンドウから、ユーザが入力した選択、色、線の太さなどを読み込み、それに応じて実際のページを変更します.chrome.tabs.executeScript({ code : "console.log(123)" });
拡張を使ったことがない人はおかしいと感じますが、Extensionでは基本的にdocumentです.bodyは拡張されたbody、つまり拡張アプリケーションをクリックしたときに現れるポップアップウィンドウbodyです.実際のユーザーが表示しているページに参加する場合は、chromeであるactiveTabを使用する必要があります.tabsオブジェクトで操作できます.
コード中の文字列は実際のコードとして解釈され,JavaScriptで計算するとevalと考えられる.
使用状況
特にコードがないので、実際に使っているのを直接見ることができます.使うとこうなります.右上隅にExtensionをクリックすると、ポップアップウィンドウが開き、そこで調整できます.残念なことに、ポップアップウィンドウを閉じて再開すると、以前の設定は保持されません.
残念なことに、今日初めてChromeアプリを作りましたが、審査に時間がかかるようです.数週間かかるかもしれないそうですが、これは十分なコードではなく、すぐに完成すると信じています.今日アップロードが終わったらVelogに文章を書くと思っていたのですが、残念ながらすぐにchromeappリンクをアップロードできませんでした.
たいしたことではありませんが、クロム拡張をどのように作るかを学んだので、これは良い経験です.閑話ですがChromeアプリ作成時に開発者(?)を登録この仕事をするには5ドルの費用がかかります.
バカじゃないの?私はあなたたちに拡張をしました.私はお金を払うと言っていますか.
09.07
ReactのようにFront Frameworkを使用すると、ページ変換時にすべての要素が消え、ルートから再描画されます.したがって、すべてのアウトラインは消えますが、rootだけがアウトラインを残します.
審査が通ってから改める.
つまり、実際のユーザーがいれば、修正するという意味です.
githubリポジトリリンク:https://github.com/kakasoo/showMeTheLayout
09.10
Chrome Webショップに展開
Reference
この問題について(WebページHTML構造の一目瞭然な拡張), 我々は、より多くの情報をここで見つけました
https://velog.io/@kakasoo/웹-페이지-HTML-구조-한눈에-보는-익스텐션
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
// work process
const work = () => {
tags.forEach(({ tag }) => {
const tagChecked = document.getElementById(`${tag}Check`).checked;
const tagColor = document.getElementById(`${tag}Color`).value;
const tagThickness = document.getElementById(`${tag}Thickness`).value;
console.log(tagChecked, tagColor, tagThickness);
if (tagChecked) {
// 컨텐츠 페이지를 대상으로 코드 작성
chrome.tabs.executeScript({
code: `document.querySelectorAll("${tag}").forEach((el) => {
el.style.outline = "${tagThickness}px solid ${tagColor}";
});`,
});
} else {
chrome.tabs.executeScript({
code: `document.querySelectorAll("${tag}").forEach((el) => {
el.style.outline = "none";
});`,
});
}
});
};
chrome.tabs.executeScript({ code : "console.log(123)" });特にコードがないので、実際に使っているのを直接見ることができます.使うとこうなります.右上隅にExtensionをクリックすると、ポップアップウィンドウが開き、そこで調整できます.残念なことに、ポップアップウィンドウを閉じて再開すると、以前の設定は保持されません.
残念なことに、今日初めてChromeアプリを作りましたが、審査に時間がかかるようです.数週間かかるかもしれないそうですが、これは十分なコードではなく、すぐに完成すると信じています.今日アップロードが終わったらVelogに文章を書くと思っていたのですが、残念ながらすぐにchromeappリンクをアップロードできませんでした.
たいしたことではありませんが、クロム拡張をどのように作るかを学んだので、これは良い経験です.閑話ですがChromeアプリ作成時に開発者(?)を登録この仕事をするには5ドルの費用がかかります.
バカじゃないの?私はあなたたちに拡張をしました.私はお金を払うと言っていますか.
09.07
ReactのようにFront Frameworkを使用すると、ページ変換時にすべての要素が消え、ルートから再描画されます.したがって、すべてのアウトラインは消えますが、rootだけがアウトラインを残します.
審査が通ってから改める.
つまり、実際のユーザーがいれば、修正するという意味です.
githubリポジトリリンク:https://github.com/kakasoo/showMeTheLayout
09.10
Chrome Webショップに展開
Reference
この問題について(WebページHTML構造の一目瞭然な拡張), 我々は、より多くの情報をここで見つけました
https://velog.io/@kakasoo/웹-페이지-HTML-구조-한눈에-보는-익스텐션
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Chrome Webショップに展開
Reference
この問題について(WebページHTML構造の一目瞭然な拡張), 我々は、より多くの情報をここで見つけました https://velog.io/@kakasoo/웹-페이지-HTML-구조-한눈에-보는-익스텐션テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol