[クロム拡張]-アーキテクチャとチュートリアル
33089 ワード
🌈 クロムえん
Chrome Extensionは、必要な機能を追加したプログラムで、Webに簡単にアクセスできます.
今回のプロジェクトではChrome Expressionを作成し、チュートリアルや資料を見ることで、韓国語バージョンがあればもっといいと思います.
🏛 Architecture
クロム拡張は、次のコンポーネントから構成されます.
🪵 Manifest
すべてのクロム合金の外付けには
manifest.json形式のファイルがあり、JSONという名前で、重要な情報を提供しています.この
jsonファイルには、チュートリアルで説明する多くのプロパティを入れることができます.デフォルトの
manifest.json例{
"name": "My Extension",
"description": "A nice little demo extension.",
"version": "2.1",
"manifest_version": 3,
}🪵 Background script
バックグラウンドスクリプトは、Extensionの重要なブラウザイベントのリスナーを含むExtensionのイベントハンドルです.バックグラウンドで実行を続行し、イベントが発生したときに指定した論理を実行します.
ここでいうイベントとは、ブラウザトリガ、例えば、新しいページに移動したり、ブックマークを削除したり、ラベルを閉じたりすることです.
バックグラウンドスクリプトを登録するには、
manifestで次の設定を行う必要があります.{
"name": "My Extension",
"description": "A nice little demo extension.",
"version": "2.1",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
}🪵 UI Elements
Extensionを担当するユーザーインタフェース部分チュートリアルまたはアーキテクチャの説明
popup.html.このポップアップ・ページからtabs.createまたはwindow.open()を呼び出して、他のページをジャンプできます.
通常、デフォルトのポップアップ設定は、次のように
manifestによって作成されます.{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
},
}🪵 Content Script
Webページの読み取りまたは書き込みの拡張機能は、コンテンツスクリプトを使用します.このスクリプトは、ブラウザがアクセスするWebページのDOMを読み取り、変更します.
コンテンツ・スクリプトは、メッセージを交換したり、ストレージ・APIのストレージ値を使用して親拡張子と通信することができます.
🪵 Options Page
オプションページでは、クロムブラウザをカスタムブラウザに移植するように、拡張をカスタマイズすることもできます.オプションを使用して機能を有効にし、ユーザーが必要な機能を選択できるようにします.
manifest:{
...
"options_page": "options.html"
}Chrome Extensionを開発する際、Chrome APIを理解することで、ブラウザとの緊密な統合がより効果的になります.
注意:API Reference
✏️ Tutorial
このチュートリアルでは、画面上の1つ以上のchrome expressionボタンを押すことで、画面の背景色を変更できる簡単なHTML/CSSを使用してアプリケーションを作成します.
✔️ manifest.jsonの作成
まず、ワークスペースに
manifest.jsonファイルを作成します.{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3
}АААААААААААА
次のChromeブラウザで、
現在作成されている拡張子を登録できます.
今は何の機能もありませんので、いくつかの機能を追加しましょう.
勘定科目の勘定科目バックグラウンド・スクリプトの登録
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
}
}background.jsという名前のファイルを作成し、次のように記述します.let color = '#3aa757';
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ color });
console.log('Default background color set to %cgreen', `color: ${color}`);
});onInstalledは、最初のインストール拡張時に実行され、新しいバージョンに更新されたときに実行され、新しいバージョンのChromeに更新されます.また、ストレージAPIはLocalStorage APIと同様のストレージ機能を提供しているが、いくつかの違いがある.
違いは、以下のように簡単です.もっと知りたい場合は、次のリンクを参照してください.
✔勘定科目記憶域権限の追加
ほとんどのAPI(ストレージAPIを含む)は、
manifestの「アクセス権」フィールドに登録して使用する必要があります.{
...
"permissions": ["storage"]
}
✔▼ユーザーインタフェースの作成
次に、「Extension」をクリックして表示インタフェースを作成します.
作業フォルダの下に
popup.htmlを作成し、次のように作成します.popup.html <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="button.css">
</head>
<body>
<button id="changeColor"></button>
</body>
</html>button.css button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
border: none;
border-radius: 2px;
}
button.current {
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
}manifestに追加する必要があります.その前に、次のリンクから画像をダウンロードし、作業環境にimagesというフォルダを追加して、画像を追加してください.次にmanifestにアイコンを登録すればいいです.イメージフォルダリンク
manifest.json {
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
}default_iconはツールバーアイコンを指定するために使用され、iconsは拡張管理ページ、権限警告、およびお気に入りアイコンに画像を表示するために使用される.次のクロム拡張をロックして表示すると、次の画面が表示されます.
上のボタンでバックグラウンドスクリプトに保存した色を使用するには、
popup.jsを作成し、次のコードを追加します.popup.js let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', ({ color }) => {
changeColor.style.backgroundColor = color;
});popup.htmlに追加しましょう.popup.html <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="button.css">
</head>
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>popup.jsコードを更新して画面の色を変更する必要があります.popup.js // 버튼을 클릭했을때, 현재 페이지에 설정된 배경색으로 바꿉니다.
changeColor.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setPageBackgroundColor,
});
});
// 이 함수의 본문은 컨텐츠 스크립트로 실행됩니다.
// 현재 페이지
function setPageBackgroundColor() {
chrome.storage.sync.get("color", ({ color }) => {
document.body.style.backgroundColor = color;
});
}chrome.tabs.queryは、Tab[]というプロセスを返し、属性が指定されていない場合は、指定された属性を持つすべてのタブをインポートします.activeはウィンドウがアクティブかどうかを尋ねる属性であり、currentWindowはタブが現在のウィンドウにあるかどうかを尋ねる属性である.chrome.scriptingのフォーマットは次のとおりです.
その後、
manifestの「現在のページのエクスポートに一時的にアクセス」権限と、スクリプトAPIの「activeTabメソッド」を使用するスクリプト権限が必要になります.executeScript {
...
"permissions": ["storage", "activeTab", "scripting"],
}
完了した結果が表示されます.
✔プレイヤーへのオプションサイクル
現在のエクスポートは緑にのみ変更できます.ユーザーにより多くのエクスポート機能を制御するように選択できます.このために仕事をしましょう.
作業フォルダに
manifest.jsonファイルを作成します.options.html <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="button.css">
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>options.htmlにmanifestを登録する.{
"name": "Getting Started Example",
...
"options_page": "options.html"
}
最後に、
options_pageを作成し、論理を追加します.options.js let page = document.getElementById("buttonDiv");
let selectedClassName = "current";
const presetButtonColors = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"];
// 버튼 클릭에 반응하여 선택된 버튼을 마킹하고 저장합니다.
// 선택
function handleButtonClick(event) {
// 전에 선택된 색상 버튼의 스타일링을 제거합니다.
let current = event.target.parentElement.querySelector(
`.${selectedClassName}`
);
if (current && current !== event.target) {
current.classList.remove(selectedClassName);
}
// 선택한 버튼을 마킹합니다.
let color = event.target.dataset.color;
event.target.classList.add(selectedClassName);
chrome.storage.sync.set({ color });
}
// 제공된 각 색상에 대해 페이지에 버튼을 추가합니다.
function constructOptions(buttonColors) {
chrome.storage.sync.get("color", (data) => {
let currentColor = data.color;
for (let buttonColor of buttonColors) {
let button = document.createElement("button");
button.dataset.color = buttonColor;
button.style.backgroundColor = buttonColor;
if (buttonColor === currentColor) {
button.classList.add(selectedClassName);
}
button.addEventListener("click", handleButtonClick);
page.appendChild(button);
}
});
}
// 색상 옵션을 구성하여 페이지 초기화
constructOptions(presetButtonColors);
ここで完全なコードを表示できます.
https://github.com/hustle-dev/Frontend-Skill/tree/main/chrome-extension-example
📚 コメントサイト
Reference
この問題について([クロム拡張]-アーキテクチャとチュートリアル), 我々は、より多くの情報をここで見つけました https://velog.io/@hustle-dev/크롬-익스텐션-아키텍처와-튜토리얼テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol