簡単に言うと
Web ページの構造を確認したい場合は、通常、F12 を使用して要素のコンテンツを表示します。
面倒すぎて簡単でも便利でもない。
拡大
拡張機能は、HTML、JavaScript、CSS などの Web テクノロジーに基づいて構築されます。これらは別のサンドボックス実行環境で実行され、
Chrome ブラウザと対話します。拡張機能を使用すると、API を使用してブラウザを「拡張」し、ブラウザの動作を変更したり、Web コンテンツにアクセスしたりできます。
上記の状況を踏まえると、ワンクリック操作の実現には各ブラウザの拡張機能が役立ちます。
Google Chrome を例に挙げると、
Google 拡張プログラムの公式 Web サイトには科学的にアクセスする必要があります。
以下は他の人が翻訳した Web サイトです:中国語の拡張 URL。
拡張子を書く
初期化
- プロジェクト内にフォルダーを作成します。例:
- フォルダー内に拡張機能構成 json ファイルを作成します。ファイル名は「manifest」です。
vscode を使用している場合は、これに言及する価値があります。関連するプラグインを見つけることができます。Chrome
Extension Manifest JSON Schemaをインストールしました。
関連する拡張 API プラグインが見つかりませんでした。。
-
構成ファイルのマニフェストを書き込みます。
以下の図は簡単な構成ですが、その他の構成については公式サイトをご覧ください。
-
ブラウザは拡張機能をロードします。
まず拡張機能のリスト ページを見つけて
開発者モードをオンにすると、拡張機能を読み込むことができます。クリックするとフォルダーの選択を求められるので、先ほど作成したフォルダーを選択してください。
何はともあれ、成功です！
-
次に、拡張機能を固定します。
インタラクティブなポップアップ ページとロジックを作成する
インタラクティブなポップアップ ウィンドウの本質は HTML ページです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>哈哈</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
overflow: hidden;
}
.btn {
margin-top: calc(50% - 20px);
margin-left: calc(50% - 50px);
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 10px;
cursor: pointer;
outline: 1px solid #eaeaea;
}
.btn:hover {
font-weight: bold;
outline: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="btn">显示页面元素外框</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
Index.js ロジックのスクリプト作成:
1. ボタン イベントをバインドします。
2. 現在のタブ ページの div を表示および非表示にするスタイル ロジックを記述します。
3. 拡張機能固有の API を通じて現在のタブ ページ ID を検索し、CSS スタイル コンテンツを現在のタブ ページに追加します。
const btnDom = document.querySelector(".btn");
btnDom.addEventListener("click", async (e) => {
let str = e.target.innerText;
// 查询当前页面id
let [tab] = await chrome.tabs.query({
active: true, currentWindow: true });
let cssStr = " div {outline:1px solid red !important;}";
console.log(e, str, str === "显示页面元素外框");
if (str === "显示页面元素外框") {
btnDom.textContent = "隐藏页面元素外框";
// chrome.scripting.executeScript({
// target: { tabId: tab.id },
// func: show,
// args:{isShow:true}
// });
// 将css样式内容 添加到当前tab页
chrome.scripting.insertCSS({
target: {
tabId: tab.id },
css: cssStr,
});
} else {
btnDom.textContent = "显示页面元素外框";
// 将添加的css样式内容 从当前tab页删除
chrome.scripting.removeCSS({
target: {
tabId: tab.id },
css: cssStr,
});
}
});
function show(isShow) {
if (isShow) window.console.log("显示外框");
else window.console.log("隐藏外框");
}
効果
コンテンツを変更するローカル拡張機能は削除したり追加したりする必要はなく、自動的に更新されます。
エピローグ
この時点で、単純な Google 拡張機能の準備が整いました。他のブラウザをご利用の場合は、他のブラウザ拡張機能の公式サイトをご確認ください。