Lassen Sie uns über Chrome-Plug-ins sprechen, die auf Browserprinzipien basieren

Entwicklung der Browserarchitektur

Ära der Einzelprozessbrowser

Ein Einzelprozess-Browser bedeutet, dass alle Funktionsmodule des Browsers im selben Prozess ausgeführt werden. Zu diesen Modulen gehören das Netzwerk, Plug-Ins, die JavaScript-Laufumgebung, die Rendering-Engine und Seiten usw. Vor 2007 waren alle Browser auf dem Markt Single-Process-Browser.

Einzelprozess-Browserarchitektur

Viele Funktionsmodule werden in einem Prozess ausgeführt, was ein wesentlicher Faktor dafür ist, dass Browser mit nur einem Prozess instabil, instabil und unsicher sind.

Instabil: Frühe Browser erforderten Plug-Ins, um verschiedene leistungsstarke Funktionen wie Webvideos und Webspiele zu implementieren. Plug-Ins sind jedoch die Module, die am anfälligsten für Probleme sind, und sie werden auch im Browserprozess ausgeführt, sodass der Unfall eines Plug-Ins in Ein Absturz führt zum Absturz des gesamten Browsers. Zusätzlich zu Plug-Ins ist auch das Rendering-Engine-Modul instabil. Normalerweise kann ein komplexer JavaScript-Code zum Absturz des Rendering-Engine-Moduls führen. Wie bei Plugins kann ein Absturz der Rendering-Engine zum Absturz des gesamten Browsers führen.
Nicht reibungslos: Alle Seitenrenderingmodule, JavaScript-Ausführungsumgebungen und Plug-Ins werden im selben Thread ausgeführt, was bedeutet, dass nur ein Modul gleichzeitig ausgeführt werden kann. Wenn ein Skript sehr zeitaufwändig ist, monopolisiert es den gesamten Thread, was dazu führt, dass andere im Thread ausgeführte Seiten keine Chance haben, Aufgaben auszuführen, was dazu führt, dass der gesamte Browser nicht mehr reagiert und verzögert ist.
Unsicher: Wenn Sie ein Plug-in auf einer Seite ausführen, kann das Plug-in auf Betriebssystemressourcen zugreifen. Wenn es sich um ein bösartiges Plug-in handelt, kann es Viren freisetzen und Ihr Konto und Passwort stehlen, was zu Sicherheitsproblemen führt.

Ära der Multiprozess-Browser

frühe Architektur

Prozessarchitektur bei der Veröffentlichung von Chrome im Jahr 2008

Wie aus der Abbildung ersichtlich ist, hat die frühe Architektur die Fähigkeiten des Browsers in drei Hauptkategorien unterteilt: Browserprozess, Plug-in-Prozess und Rendering-Prozess. Jede Seite wird in einem separaten Rendering-Prozess ausgeführt, und die Plug-Ins auf der Seite werden ebenfalls in einem separaten Plug-In-Prozess ausgeführt. Die Prozesse kommunizieren über den IPC-Mechanismus. Dies löst verschiedene Probleme von Browsern im Single-Process-Zeitalter:

Instabilität beheben: Da Prozesse voneinander isoliert sind, ist beim Absturz einer Seite oder eines Plug-Ins nur der aktuelle Seitenprozess oder Plug-In-Prozess betroffen, der Browser und andere Seiten jedoch nicht.
Lösen Sie das Problem der Ungleichmäßigkeit: JavaScript wird im Rendering-Prozess ausgeführt. Selbst wenn JavaScript den Rendering-Prozess blockiert, wirkt es sich nur auf die aktuelle Rendering-Seite aus und hat keine Auswirkungen auf den Browser und andere Seiten, da die Skripte anderer Seiten in ihrem ausgeführt werden Eigene Rendering-Prozesse. Mitte.
Lösen Sie das Problem der Unsicherheit: Chrome sperrt den Plug-In-Prozess und den Rendering-Prozess in der Sandbox. Die Programme in der Sandbox können ausgeführt werden, aber sie können keine Daten auf die Festplatte schreiben und auch keine Daten an sensiblen Orten lesen. Auf diese Weise kann das Schadprogramm auch während des Rendervorgangs oder wenn im Plug-In-Prozess ein Schadprogramm ausgeführt wird, nicht in die Sandbox eindringen, um Systemberechtigungen zu erhalten.

Aktuelle Architektur

Im Vergleich zu früher hat die aktuelle Architektur viele neue Änderungen erfahren.

Aktuelle Chrome-Prozessarchitektur

Wie aus der Abbildung ersichtlich ist, umfasst der neueste Chrome-Browser: 1 Hauptbrowserprozess, 1 GPU-Prozess, 1 Netzwerkprozess, mehrere Rendering-Prozesse und mehrere Plug-in-Prozesse.

Browserprozess: Hauptverantwortlich für die Anzeige der Benutzeroberfläche, die Benutzerinteraktion, die Verwaltung von Unterprozessen sowie die Bereitstellung von Speicher und anderen Funktionen. Es versteht sich, dass der Browserprozess ein einheitlicher „ Planungsmaster “ ist, um andere Prozesse zu planen. Wenn wir beispielsweise eine URL in die Adressleiste eingeben, ruft der Browserprozess zuerst den Netzwerkprozess auf.
Rendering-Prozess: Die Kernaufgabe besteht darin, HTML, CSS und JavaScript in Webseiten umzuwandeln, mit denen Benutzer interagieren können. In diesem Prozess werden sowohl die Textsatz-Engine Blink als auch die JavaScript-Engine V8 ausgeführt. Standardmäßig erstellt Chrome für jedes Tab-Tag einen Rendering-Prozess . . Aus Sicherheitsgründen läuft der Rendervorgang im Sandbox-Modus.
GPU-Prozess: Tatsächlich gab es bei der ersten Veröffentlichung von Chrome keinen GPU-Prozess. Die ursprüngliche Absicht der Verwendung einer GPU bestand darin, den Effekt von 3D-CSS zu erzielen. Spätere Webseiten und die Benutzeroberfläche von Chrome entschieden sich jedoch für die Verwendung der GPU zum Zeichnen, was die GPU zu einer häufigen Anforderung für Browser machte. Schließlich hat Chrome in seiner Multiprozessarchitektur auch GPU-Prozesse eingeführt.
Netzwerkprozess: Hauptverantwortlich für das Laden der Netzwerkressourcen der Seite. Früher wurde er als Modul im Browserprozess ausgeführt. Erst vor kurzem wurde er unabhängig und wurde zu einem separaten Prozess.
Plug-In-Prozess: Hauptsächlich für die Ausführung von Plug-Ins verantwortlich. Da Plug-Ins anfällig für Abstürze sind, müssen sie vom Plug-In-Prozess isoliert werden, um sicherzustellen, dass der Absturz des Plug-In-Prozesses keine Auswirkungen auf den Plug-In-Prozess hat Browser und die Seite.

Aktuelle Architektur

Die Architektur des Chrome-Browsers erfährt derzeit einige Änderungen, die als serviceorientierte Architektur (SOA) bezeichnet werden. Der Zweck besteht darin, die mit dem Browser selbst (Chrome) verbundenen Teile in verschiedene Dienste aufzuteilen. Nach der Serviceorientierung werden diese Funktionen verwendet sein Es kann in verschiedenen Prozessen ausgeführt oder zur Ausführung in einem einzigen Prozess zusammengeführt werden. Der Hauptgrund dafür besteht darin, Chrome auf Hardware mit unterschiedlichen Funktionen eine unterschiedliche Leistung zu ermöglichen. Wenn Chrome auf Hardware mit besserer Leistung ausgeführt wird, werden mit dem Browserprozess verbundene Dienste in anderen Prozessen ausgeführt, um die Systemstabilität zu verbessern. Im Gegenteil, wenn die Hardwareleistung nicht gut ist, werden diese Dienste im selben Prozess ausgeführt, um die Speichernutzung zu reduzieren.

Serviceorientierte Architektur

Steckbarer Antrieb

Bevor wir den Mechanismus ausführen, schauen wir uns an, was passiert, wenn Sie die Seite öffnen:

Was passiert, wenn Sie die Seite öffnen?

Wenn der Benutzer eine Registerkarte hinzufügt, werden der Systembrowserprozess, der Rendering-Prozess, der GPU-Prozess und der Netzwerkprozess erstellt.
Der Benutzer gibt eine URL ein und der Browserprozess überprüft die URL, stellt das Protokoll zusammen und bildet eine vollständige URL.
Der Browserprozess sendet die URL-Anfrage über Interprozesskommunikation (IPC) an den Netzwerkprozess.
Nach Erhalt der URL-Anfrage prüft der Netzwerkprozess, ob der lokale Cache die angeforderte Ressource zwischengespeichert hat, und gibt die Ressource in diesem Fall an den Browserprozess zurück.
Wenn nicht, initiiert der Netzwerkprozess eine http-Anfrage (Netzwerkanfrage) an den Webserver;
Netzwerkprozess-Parsing-Antwortprozess;
- Überprüfen Sie den Statuscode. Wenn er nicht 200 ist, führen Sie die dem Statuscode entsprechende Verarbeitungslogik aus.
- 200 Antwortverarbeitung: Überprüfen Sie den Antworttyp Content-Type. Wenn es sich um einen Byte-Stream-Typ handelt, wird die Anfrage an den Download-Manager gesendet und es wird kein nachfolgendes Rendering durchgeführt. Wenn es sich um HTML handelt, wird der Browserprozess zur Vorbereitung benachrichtigt der Rendering-Prozess für das Rendering;
Bereiten Sie den Rendering-Prozess vor
- Der Browserprozess prüft, ob die aktuelle URL mit dem Stammdomänennamen des zuvor geöffneten Rendering-Prozesses übereinstimmt. Wenn sie identisch sind, wird der ursprüngliche Prozess wiederverwendet. Wenn sie unterschiedlich sind, wird ein neuer Rendering-Prozess gestartet;
Daten übertragen und Status aktualisieren
- Nachdem der Rendering-Prozess fertig ist, initiiert der Browser eine „Dokument senden“-Nachricht an den Rendering-Prozess. Der Rendering-Prozess empfängt die Nachricht und richtet eine „Pipeline“ zum Übertragen von Daten mit dem Netzwerkprozess ein.
- Nachdem der Renderprozess die Daten empfangen hat, sendet er eine Bestätigungsnachricht an den Browser.
- Nachdem der Browserprozess die Bestätigungsnachricht erhalten hat, aktualisiert er den Status der Browseroberfläche: Sicherheit, Adressleisten-URL, Vorwärts- und Rückwärtsverlaufsstatus und aktualisiert die Webseite;

Was passiert, wenn Sie das Plug-in öffnen?

Die Bedienung des Plugins wird gegenüber der Seite vereinfacht

1. Wir öffnen den Browser und fügen eine leere Registerkarte hinzu

2. Klicken Sie mit der rechten Maustaste auf eine leere Stelle in der Registerkartenleiste, wählen Sie „Task-Manager“ und öffnen Sie das Task-Manager-Fenster.

3. Sie können sehen, dass 6 Prozesse ausgeführt werden, nämlich Browserprozess, GPU-Prozess, Netzwerkprozess, Speicherprozess, Rendering-Prozess und Erweiterungsprozess.

Die Erweiterungsseite wird im Erweiterungsprozess ausgeführt und umfasst hauptsächlich background.html und popup.html.
- Es gibt keinen Inhalt in backgrunt.html. Es wird von background.js erstellt und generiert. Wenn der Browser geöffnet wird, wird die Datei background.js des Plug-Ins automatisch geladen. Sie ist unabhängig von der Webseite und wird immer ausgeführt im Hintergrund. Es ruft hauptsächlich die vom Browser bereitgestellte Datei „background.js“ auf. API zur Interaktion mit dem Browser;
- popup.html hat Inhalte, genau wie unsere gewöhnlichen Webseiten, es besteht aus HTML, CSS und Javascript. Es wird bei Bedarf geladen und erfordert, dass der Benutzer auf die Schaltfläche in der Adressleiste klickt, um es auszulösen, bevor die Seite angezeigt werden kann ;
Der Rendering-Prozess läuft hauptsächlich auf der Webseite. Wenn die Seite geöffnet wird, wird content_script.js geladen und in die Umgebung der Webseite eingefügt. Wie das auf der Webseite eingeführte Javascript kann es den DOM-Baum der Webseite bedienen und Ändern Sie den Anzeigeeffekt der Seite.
Der GPU-Prozess bietet hauptsächlich Hardware-Funktionsunterstützung für das Rendern der Plug-in-Schnittstelle.
Der Netzwerkprozess verarbeitet hauptsächlich externe Ressourcenanforderungen in Plug-Ins. Beispielsweise hängt das Nexydy-Plug-In von einigen externen JS ab.
Der Speicherprozess stellt lokale Speicherfunktionen für Plug-Ins bereit, z. B. die Verwendung von chrome.storage.local für dauerhafte Speicherung;
Der Browserprozess spielt hier eher eine Brückenrolle. Als Transit kann er die Nachrichtenkommunikation zwischen Extension Page und content_script.js realisieren.

Grundlegende Einführung in Plug-Ins

Versionsentwicklung

Es gibt drei Versionen des Chrome-Plug-Ins, nämlich Manifest V1, Manifest V2 und Manifest V3 . Unter ihnen wurde die MV1-Version aufgegeben. Derzeit sind MV2- und MV3-Versionen auf dem Markt, wobei MV2 der Mainstream ist und langsam durch MV3 ersetzt wird. Zeitleiste:

Manifestieren Sie die neuen Funktionen von V2

https://developer.chrome.com/docs/extensions/mv2/manifestVersion/#manifest-v1-changes

Die standardmäßige Inhaltssicherheitsrichtlinie „script-src 'self'; object-src 'self';“ ist festgelegt. Eine detaillierte Konfiguration der Inhaltssicherheitsrichtlinie finden Sie in der MDN-Dokumentation.
Standardmäßig stehen Ressourcen innerhalb eines Plugin-Pakets externen Websites nicht mehr zur Verfügung. Es muss explizit über das Manifest-Attribut web_accessible_resources auf die Whitelist gesetzt werden.
Änderungen der Browser-Aktions-API;
Änderungen an der Seitenaktions-API;
chrome.extension ersetzt chrome.self, um auf das Plug-in selbst zu verweisen;
chrome.extension.getTabContentses und chrome.extension.getExtensionTabs sind veraltet und werden durch extension.getViews ersetzt;
Port.tab ist veraltet und wurde durch runtime.Port ersetzt;

Manifestieren Sie die neuen Funktionen von V3

Servicemitarbeiter ersetzt Hintergrundseite;
Änderungen an Netzwerkanfragen verwerfen die webRequest-API und verwenden zur Verarbeitung die neue declarativentrequest-API.
Die Ausführung von remote gehostetem Code ist nicht mehr zulässig. Es kann nur JS ausgeführt werden, das im Erweiterungspaket enthalten ist.
Zu vielen Methoden wurden Promises hinzugefügt, Callbacks werden jedoch weiterhin als Alternative unterstützt;
Die Browser-Aktions-API und die Seiten-Aktions-API sind in einer einzigen Aktions-API vereint.
Über das Internet zugängliche Ressourcen können nur für bestimmte Websites und Erweiterungen verfügbar sein.
Mit der Content Security Policy (CSP) ist es nun möglich, separate CSPs für verschiedene Ausführungskontexte innerhalb eines einzelnen Objekts anzugeben;
Mit der Änderung vonexecuteScript können keine beliebigen Strings mehr ausgeführt werden, sondern nur noch Skriptdateien und Funktionen;

Probleme durch Umstellung auf MV3

Da der Hintergrund die Seitenkonfiguration „background.html“ nicht mehr unterstützt, kann XMLHttpRequest für das Fensterobjekt nicht aufgerufen werden, um eine Ajax-Anfrage zu erstellen. Das bedeutet, dass wir XMLHttpRequest in „background.html“ nicht verwenden können, um Anfragen wie die V2-Version zu senden. Stattdessen müssen Sie dies tun Verwenden Sie fetch, um Schnittstellendaten abzurufen.
Da Service-Worker nur von kurzer Dauer sind und bei Nichtgebrauch beendet werden, bedeutet dies, dass sie während der gesamten Laufzeit des Plug-Ins weiterhin starten, ausführen und beenden, was instabil ist; daher müssen wir möglicherweise den Hintergrundcode ändern. js in V2 Es wurden einige Transformationen an der Logik vorgenommen. In der Vergangenheit waren wir es gewohnt, einige Daten direkt in globalen Variablen zu speichern, wie zum Beispiel die folgenden:

// V2 background.js
let saveUserName = "";

// 其他页面，比如content-script或者popup中存储数据
chrome.runtime.onMessage.addListener(({ type, name }) => {
  if (type === "set-name") {
    saveUserName = name;
  }
});

// 点击popup时展示数据
chrome.action.onClicked.addListener((tab) => {
  // 这里saveUserName可能为空字符串
  console.log(saveUserName, "saveUserName");
});

Daher muss diese Art globaler variabler Daten in V3 transformiert werden. Die Transformationsmethode ist ebenfalls sehr einfach, nämlich die Daten im Speicher beizubehalten und sie dorthin zu bringen, wo sie benötigt werden:

// V3 service worker
chrome.runtime.onMessage.addListener(({ type, name }) => {
  if (type === "set-name") {
    chrome.storage.local.set({ name });
  }
});

chrome.action.onClicked.addListener(async (tab) => {
  const { name } = await chrome.storage.local.get(["name"]);
  chrome.tabs.sendMessage(tab.id, { name });
});

Beim Wechsel von der webRequest-API zur deklarativentrequest-API muss eine Menge Codelogik umgestaltet werden;

Warum auf MV3 umsteigen?

Von Manifest V1 bis Manifest V2 können wir sehen, dass Chrome den Datenschutz und die Sicherheit von Plug-Ins verbessern möchte und auch viele APIs optimiert. Neben einer besseren Sicherheit arbeitet Manifest V3 auch intensiv an der Leistung. Der Kern von Manifest V3 ist sehr klar: Er soll die Nutzung von Systemressourcen durch Erweiterungen begrenzen. Chrome steht seit jeher wegen seines hohen Ressourcenverbrauchs in der Kritik, und da Erweiterungen im Hintergrund laufen, ist es noch schwieriger, auftretende Probleme zu lokalisieren und zu verwalten. Obwohl es viele Einschränkungen hinzufügt, bietet Manifest V3 dennoch Vorteile:

Service Worker ermöglicht, dass Erweiterungen nicht länger im Hintergrund verbleiben, sodass die von Erweiterungen belegten Ressourcen wiederverwendet werden können, wodurch der Gesamtaufwand für den Browser reduziert wird.
Die Begrenzung der Anzahl der Regeln entspricht der Kontrolle der Obergrenze der Ressourcennutzung einer einzelnen Erweiterung bei der Regelberechnung;

Diese Änderungen können Chrome flüssiger machen, was für die Benutzer von Vorteil ist.

Formular anzeigen

Chrome-Plug-ins haben die folgenden acht gängigen Präsentationsformen:

browserAction (obere rechte Ecke des Browsers)

Wird in der Erweiterungsspalte in der oberen rechten Ecke des Browsers angezeigt, einschließlich eines Symbols, eines Namens und eines Popups

Shanhaiguan-Plug-in-Popup

pageAction (rechte Seite der Adressleiste)

pageAction bezieht sich auf das Symbol, das beim Öffnen bestimmter Seiten angezeigt wird. In früheren Versionen von Chrome wurde pageAction ganz rechts in der Adressleiste platziert. Wenn Sie mit der linken Maustaste klicken, wird ein Popup angezeigt, und wenn Sie mit der rechten Maustaste klicken, wird das zugehörige Standardoptionsmenü angezeigt. Die neue Version von Chrome hat diese Strategie geändert. Die pageAction wird wie die normale browserAction in der oberen rechten Ecke des Browsers platziert, mit der Ausnahme, dass sie grau ist, wenn sie nicht leuchtet, und farbig ist, wenn sie leuchtet. Wenn dies der Fall ist grau, es spielt keine Rolle, ob Sie links oder rechts klicken. Bei jedem Klick werden Popup-Optionen angezeigt.

Rechtsklick-Menü

Das Rechtsklick-Menü des Browsers kann durch die Entwicklung eines Chrome-Plug-Ins angepasst werden, hauptsächlich über die chrome.contextMenus-API. Das Rechtsklick-Menü kann in verschiedenen Kontexten angezeigt werden, z. B. auf normalen Seiten, ausgewähltem Text, Bildern, Links usw.

Rechtsklick-Menü des Nuggets-Plug-Ins

überschreiben (bestimmte Seiten abdecken)

Verwenden Sie Override, um einige der standardmäßigen spezifischen Seiten von Chrome zu ersetzen und stattdessen die von der Erweiterung bereitgestellten Seiten zu verwenden. Die Erweiterung kann Seiten wie diese ersetzen:

Verlauf: Die Seite, die Sie besuchen, wenn Sie im Menü „Extras“ auf „Verlauf“ klicken oder chrome://history direkt in die Adressleiste eingeben
Neue Tab-Seite: Die Seite, die beim Erstellen eines neuen Tabs besucht wurde, oder geben Sie chrome://newtab direkt in die Adressleiste ein
Lesezeichen: Browser-Lesezeichen oder direkt chrome://bookmarks eingeben

Das Nuggets-Plugin ersetzt die neue Registerkarte

devtools (Entwicklertools)

Chrome ermöglicht die Entwicklung von Plug-ins auf Entwicklertools (Devtools), hauptsächlich in:

Passen Sie ein oder mehrere Panels auf derselben Ebene wie Elemente, Konsole und Quellen an.
Passen Sie die Seitenleiste an. Derzeit können Sie nur die Seitenleiste des Elementebedienfelds anpassen.

React-Entwicklertools

Option (Optionsseite)

Für die Einstellungsseite des Plug-Ins können Sie mit der rechten Maustaste auf den Eintrag in der oberen rechten Ecke klicken und es wird eine Registerkarte mit Optionen angezeigt.

Omnibox

Die Omnibox ist eine Möglichkeit, Benutzern Suchvorschläge bereitzustellen. Sie können eine bestimmte Kennung in die Suchleiste eingeben und die Tabulatortaste drücken, um die Suche einzugeben.

JSON Viewer-Plugin

Desktop-Benachrichtigungen

Chrome bietet eine chrome.notificationsAPI für Plug-ins zum Pushen von Desktop-Benachrichtigungen. Es wurden bisher keine wesentlichen Unterschiede und Vorteile zwischen chrome.notifications und der mit HTML5 gelieferten Benachrichtigung festgestellt. Unabhängig davon, ob Sie chrome.notifications oder Notification verwenden, müssen Sie im Hintergrund-JS keine Berechtigung beantragen (die HTML5-Methode erfordert die Beantragung einer Berechtigung), sondern können sie direkt verwenden.

Kerneinführung

manifest.json

Dies ist die wichtigste und wesentlichste Datei eines Chrome-Plug-Ins. Sie wird zum Konfigurieren aller Plug-In-bezogenen Konfigurationen verwendet und muss im Stammverzeichnis abgelegt werden. Darunter sind manifest_version, name und version von wesentlicher Bedeutung.

Manifest V2

{
// 清单文件的版本，这里先使用2演示
"manifest_version": 2,
// 插件的名称
"name": "...",
// 插件的版本
"version": "1.0.0",
// 插件描述
"description": "...",
// 图标，一般偷懒全部用一个尺寸的也没问题
"icons": {
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
  },
// 会一直常驻的后台JS或后台页面
"background": {
"scripts": ["js/background.js"]
  },
// 浏览器右上角图标设置，browser_action、page_action、app必须三选一
"browser_action": {
"default_icon": "img/icon.png",
"default_title": "...",
"default_popup": "popup.html"
  },
// 当某些特定页面打开才显示的图标
"page_action": {
"default_icon": "img/icon.png",
"default_title": "...",
"default_popup": "popup.html"
  },
// 需要直接注入页面的JS
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["js/content-script.js"],
"css": ["css/custom.css"],
// 代码注入的时机，document_start, document_end, document_idle，默认document_idle
"run_at": "document_start"
    },
  ],
// 权限申请
"permissions": [
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"webRequestBlocking",
"storage", // 插件本地存储
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
  ],
// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
"web_accessible_resources": ["js/inject.js"],
"homepage_url": "...", // 插件主页
"chrome_url_overrides": { // 覆盖浏览器默认页面
"newtab": "newtab.html"
  },
"options_ui": { // 插件选项页
"page": "options.html",
"chrome_style": true
  },
"omnibox": { "keyword" : "..." }, // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
"default_locale": "zh_CN", // 默认语言
"devtools_page": "devtools.html", // devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
"content_security_policy": "...", // 安全策略
"web_accessible_resources": [ // 可以加载的资源
    RESOURCE_PATHS
  ]
}

Manifest V3 (zeigt nur die Unterschiede zur V2-Version)

{
"manifest_version": 3,
"background": {
"service_worker": js/background.js"
  },
  "action": { //browser_action 和 page_action，统一为 Action
    "default_icon": "img/icon.png",
    "default_title": "这是一个示例Chrome插件",
    "default_popup": "popup.html"
  }
  "content_security_policy": {
    "extension_pages": "...",
    "sandbox": "..."
  },
  "web_accessible_resources": [{
    "resources": [RESOURCE_PATHS]
  }]
}

Inhaltsskripte

Es handelt sich um eine Form des Einfügens von Skripten in die Seite im Chrome-Plug-in (obwohl es als Skript bezeichnet wird, kann es tatsächlich CSS enthalten). Mit Inhaltsskripten können wir durch Konfiguration problemlos JS und CSS in die angegebene Seite einfügen. Content-Skripte und die Originalseite teilen sich das DOM, nicht jedoch das JS. Wenn Sie auf die Seite JS zugreifen möchten (z. B. eine JS-Variable), können Sie nur injiziertes JS verwenden. Content-Skripte können nicht auf die meisten Chrome-APIs zugreifen, mit Ausnahme der folgenden vier:

chrome.extension
Chrom.i18n
chrome.runtime
chrome.storage

Diese APIs reichen in den meisten Fällen aus. Wenn Sie andere APIs aufrufen müssen, können Sie den Hintergrund- oder Servicemitarbeiter bitten, ihnen durch Kommunikation beim Aufruf zu helfen.

Hintergrund

Der Hintergrund ist eine permanente Seite, und ihr Lebenszyklus ist der längste aller Seitentypen im Plug-in. Sie wird geöffnet, wenn der Browser geöffnet wird, und geschlossen, wenn der Browser geschlossen wird, sodass normalerweise alle Seiten ausgeführt werden müssen Die Zeit, in der globaler Code, der beim Start ausgeführt wird, im Hintergrund platziert wird. Der Hintergrund verfügt über sehr hohe Berechtigungen und kann fast alle Chrome-Erweiterungs-APIs (außer Devtools) aufrufen. Er kann ohne Einschränkungen domänenübergreifend arbeiten und auf jede Website domänenübergreifend zugreifen, ohne dass die andere Partei CORS einrichten muss. Das Konzept des Hintergrunds wurde in der MV3-Version in „Service Worker“ geändert. Der Unterschied besteht darin, dass der Lebenszyklus kürzer geworden ist. Service Worker sind kurzlebige ereignisbasierte Skripte und eignen sich daher nicht zum Speichern globaler Variablen.

Pop-up

Ein Popup ist ein kleines Fenster einer Webseite, das geöffnet wird, wenn auf das Symbol in der oberen rechten Ecke geklickt wird. Es wird sofort geschlossen, wenn der Fokus die Webseite verlässt. Es wird im Allgemeinen für einige vorübergehende Interaktionen verwendet. Die Berechtigungsstufe ähnelt der im Hintergrund, der Lebenszyklus ist jedoch relativ kurz.

injiziertes Skript

Tatsächlich gibt es im Chrome-Plug-in kein Konzept für injiziertes Skript. Dies ist ein Konzept, das von Entwicklern während des Entwicklungsprozesses abgeleitet wurde. Es bezieht sich auf eine Art von JS, das durch DOM-Operationen in die Seite eingefügt wird. Da das Inhaltsskript nicht auf das JS auf der Seite zugreifen kann, kann es zwar das DOM bedienen, das DOM kann es jedoch nicht aufrufen, dh der Code im Inhaltsskript kann nicht durch Bindungsereignisse im DOM aufgerufen werden. Die Möglichkeit, einer Webseite eine Schaltfläche zum Aufrufen eines Plug-Ins hinzuzufügen, ist jedoch ein relativ häufiger Bedarf, sodass injiziertes Skript geboren wurde.

Plug-in-Kommunikationsmechanismus

Bevor wir über den Kommunikationsmechanismus sprechen, werfen wir einen Blick auf die im Plug-in vorhandenen Skripttypen. Die JS von Chrome-Plug-Ins können hauptsächlich in diese fünf Kategorien unterteilt werden: injiziertes Skript, Inhaltsskript, Popup-JS, Hintergrund-JS und Devtools-JS.

Berechtigungsvergleich

JS-Typ	Zugängliche APIs	DOM-Zugriffsstatus	JS-Zugriffsstatus	Direkt domänenübergreifend
gespritzt	Es unterscheidet sich nicht von gewöhnlichem JS und kann nicht auf eine erweiterte API zugreifen.	Kann Zugreifen	Kann Zugreifen	Kippen
Inhalt	Kann nur auf einige APIs wie Erweiterung und Laufzeit zugreifen	Kann Zugreifen	Kippen	Kippen
Pop-up	Zugriff auf die meisten APIs, außer der Devtools-Reihe	Nicht direkt zugänglich	Kippen	Kann
Hintergrund	Zugriff auf die meisten APIs, außer der Devtools-Reihe	Nicht direkt zugänglich	Kippen	Kann
Devtools	Kann nur auf einige APIs wie Devtools, Erweiterung, Laufzeit usw. zugreifen.	Kann	Kann	Kippen

Durch den Vergleich der Berechtigungen können wir erkennen, dass jedes Skript unterschiedliche Berechtigungen hat, sodass die Kommunikation zwischen verschiedenen Skripten sehr wichtig ist. Dies ist auch die Grundlage dafür, dass das Plug-In viele Funktionen realisieren kann.

Kommunikationsübersicht

	gespritzt	Inhalt	Pop-up	Hintergrund
gespritzt	-	window.postMessage	-	-
Inhalt	window.postMessage	-	chrome.runtime.sendMessage chrome.runtime.connect	chrome.runtime.sendMessage chrome.runtime.connect
Pop-up	-	chrome.tabs.sendMessage chrome.tabs.connect	-	chrome.extension. getBackgroundPage
Hintergrund	-	chrome.tabs.sendMessage chrome.tabs.connect	chrome.extension.getViews	-
Devtools	chrome.devtools. inspectedWindow.eval	-	chrome.runtime.sendMessage	chrome.runtime.sendMessage

Implementierungsideen für einige gängige Plug-Ins

Erkennung vergrabener Punktprotokolle

Im allgemeinen Geschäftsalltag werden einige versteckte Punkte gemeldet. Der Kern versteckter Punkte besteht darin, einige Anforderungen mit bestimmten Parametern zu senden. Wenn Sie beim lokalen Debuggen des Front-Ends die Informationen zu vergrabenen Punkten in Echtzeit anzeigen möchten, müssen Sie dies normalerweise überprüfen Geben Sie die Eingabeparameter der Meldeschnittstelle ein oder gehen Sie zum entsprechenden vergrabenen Punkt. Die Anzeige auf der Plattform ist sehr umständlich. Auf dieser Grundlage können wir Plug-ins verwenden, die uns helfen, versteckte Informationen schnell visuell anzuzeigen:

Page-Injection-Gadget

Eine weitere häufige Verwendung von Plug-ins besteht darin, Werkzeugcode in die Seite einzuschleusen, beispielsweise Tools zum Entfernen von Seitenwerbung.

Zusammenfassen

Mit der kontinuierlichen Weiterentwicklung der Browser hat Chrome nach und nach einige grundlegende Dienste getrennt, ähnlich einem plattformübergreifenden Online-Betriebssystem.
Chrome-Plug-Ins bieten eine breite Palette von Funktionen, wie z. B. Code-Injektion, domänenübergreifende Anforderungen, Persistenzlösungen, verschiedene Kommunikationsmechanismen usw. Entwickler können ihrer Fantasie freien Lauf lassen, um verschiedene Funktionen zusammenzustellen, um den Anforderungen verschiedener Szenarien gerecht zu werden, was im Grunde möglich ist erreichen, was das moderne Web unterstützen kann. Alle Funktionen.
Die MV2-Version des Chrome-Plug-Ins wird am 24. Januar vollständig eingestellt und muss so schnell wie möglich auf die MV3-Version migriert werden.

Verweise:

„Browser-Arbeitsprinzipien und -praktiken“: https://time.geekbang.org/column/intro/100033601?tab=catalog

„Einblick in moderne Webbrowser“: https://developer.chrome.com/blog/inside-browser-part1/

„Das grundlegende Funktionsprinzip des grafischen Browsers“: https://zhuanlan.zhihu.com/p/47407398

„Willkommen bei Manifest V3“: https://developer.chrome.com/docs/extensions/mv3/intro/

MDN-Dokumentation: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP web_accessible_resources: https://developer.chrome.com/docs/extensions/mv2/manifest/web_accessible_resources/

Autor｜Min Zi

Ursprünglicher Link

Dieser Artikel ist Originalinhalt von Alibaba Cloud und darf nicht ohne Genehmigung reproduziert werden.