Vous pouvez utiliser une extension de navigateur. Certaines extensions sont très populaires et utiles, telles que les bloqueurs d'annonces, les gestionnaires de mots de passe et les téléspectateurs PDF. Ces extensions (ou «compléments») ne sont pas limitées à cela - vous pouvez en faire plus avec eux! Cet article expliquera comment créer une extension. Finalement, nous le ferons fonctionner dans plusieurs navigateurs.
Nous ferons une extension appelée "Reddit Transcription" qui améliorera l'accessibilité Reddit en déplaçant des commentaires spécifiques en haut de la section des commentaires et en ajoutant un attribut Aria au lecteur d'écran. Nous allons également aller plus loin dans notre extension en ajoutant des options pour ajouter des frontières et des arrière-plans aux commentaires pour un meilleur contraste de texte.
L'idée est de vous donner une bonne idée de la façon de développer des extensions de navigateur. Nous allons d'abord créer des extensions pour les navigateurs à base de chrome tels que Google Chrome, Microsoft Edge, Brave, etc. Dans les futurs articles, nous allons porter l'extension pour le rendre compatible avec Firefox, et récemment ajouté Safari pour le support d'extensions Web dans ses versions macOS et iOS des navigateurs.
La base de code GitHub est-elle prête? Faisons-le pas à pas.
Tout d'abord, nous avons besoin d'un espace de travail du projet. Tout ce dont nous avons vraiment besoin, c'est de créer un dossier et de le nommer (je l'ai nommé Transistors of-Reddit). Ensuite, créez un dossier appelé SRC pour notre code source.
Un point d'entrée est un fichier qui contient des informations générales sur l'extension (c'est-à-dire le nom d'extension, la description, etc.) et définit les autorisations ou les scripts à exécuter.
Notre point d'entrée peut être le fichier manifeste.json situé dans le dossier SRC que nous venons de créer. Dans ce document, ajoutons les trois propriétés suivantes:
<code>{ "manifest_version": 3, "name": "Reddit 转录器", "version": "1.0" }</code>Manifest_version est similaire à la version dans NPM ou Node. Il définit les API disponibles (ou non disponibles). Nous utiliserons la dernière version 3 (également connue sous le nom de MV3) pour des travaux de pointe.
La deuxième propriété est le nom, qui spécifie notre nom d'extension. Ce nom est le nom que notre extension apparaît lorsqu'elle apparaît partout, comme le Chrome Web Store et la page Chrome: // Extensions dans le navigateur Chrome.
Ensuite, il y a la version. Il marque l'extension avec un numéro de version. N'oubliez pas que cette propriété (par opposition à Manifest_version) est une chaîne qui ne peut contenir que des nombres et des points (par exemple 1.3.5).
En fait, nous pouvons en ajouter plus pour aider à ajouter le contexte de l'extension. Par exemple, nous pouvons fournir une description qui explique la fonctionnalité d'une extension. Il est préférable de fournir ces informations car elles permettent aux utilisateurs une meilleure compréhension de ce qu'ils rencontreront lors de l'utilisation de l'extension.
Dans cet exemple, nous ajoutons non seulement une description, mais fournissons également les icônes et les URL auxquelles la boutique en ligne Chrome pointe sur sa page d'extension.
<code>{ "description": "使Reddit 对残疾用户更易于访问。", "icons": { "16": "images/logo/16.png", "48": "images/logo/48.png", "128": "images/logo/128.png" }, "homepage_url": "https://www.php.cn/link/530ebdeb0491c0459e00298fcdb3a2bd/extensions/tor/" }</code>L'un des grands avantages des extensions est que leur API vous permet d'interagir directement avec votre navigateur. Mais nous devons explicitement accorder ces autorisations à l'extension, qui est également incluse dans le fichier manifeste.json.
<code>{ "manifest_version": 3, "name": "Reddit 转录器", "version": "1.0", "description": "使Reddit 对残疾用户更易于访问。", "icons": { "16": "images/logo/16.png", "48": "images/logo/48.png", "128": "images/logo/128.png" }, "homepage_url": "https://www.php.cn/link/530ebdeb0491c0459e00298fcdb3a2bd/extensions/tor/", "permissions": [ "storage", "webNavigation" ] }</code>Quelles autorisations nous venons-nous de donner cette prolongation? Tout d'abord, stockage. Nous voulons que cette extension enregistre les paramètres de l'utilisateur, nous devons donc accéder au stockage Web du navigateur pour les enregistrer. Par exemple, si l'utilisateur souhaite que le commentaire affiche une bordure rouge, nous enregistrerons le paramètre pour la prochaine fois au lieu de le remettre à nouveau.
Nous accordons également l'autorisation de prolongation pour voir comment les utilisateurs naviguent vers l'écran actuel. Reddit est une application de page unique (SPA), ce qui signifie qu'elle ne déclenche pas la rafraîchissement de la page. Nous devons "capturer" cette interaction car Reddit ne chargera les commentaires que pour les publications lorsque nous cliquez dessus. C'est pourquoi nous profitons de la webnavigation.
Nous couvrirons le code d'exécution sur la page plus tard, car il nécessite l'ajout d'une toute nouvelle entrée dans Manifest.json.
/ Explication Selon les autorisations autorisées, le navigateur peut afficher un avertissement à l'utilisateur d'accepter les autorisations. Cependant, seules certaines autorisations sont comme ceci, et Chrome a un bon aperçu de ces autorisations.
L'extension du navigateur a une API internationalisée intégrée (I18N). Il vous permet de gérer les traductions en plusieurs langues (liste complète). Pour utiliser l'API, nous devons définir notre traduction et notre langue par défaut dans le fichier manifeste.json:
<code>"default_locale": "en"</code>
Cela met l'anglais comme langue. Si le navigateur est défini sur une autre langue qui n'est pas prise en charge, l'extension retombe aux paramètres par défaut (EN dans cet exemple).
Notre traduction est définie dans le répertoire _Locales. Créons un dossier pour chaque langue pour soutenir. Chaque sous-répertoire a son propre fichier messages.json.
<code>src └─ _locales └─ en └─ messages.json └─ fr └─ messages.json</code>
Un fichier de traduction contient plusieurs parties:
Voici un exemple qui rassemble tout cela:
<code>{ "userGreeting": { // 翻译键(“id”) "message": "Good $daytime$, $user$!" // 翻译"description": "用户问候", // 翻译人员的可选描述"placeholders": { // 可选占位符"daytime": { // 如消息中所引用"content": "$1", "example": "morning" // 我们内容的示例值}, "user": { "content": "$1", "example": "Lars" } } } }</code>L'utilisation des espaces réservés est un peu difficile. Tout d'abord, nous devons définir les espaces réservés dans le message. Les espaces réservés doivent être enfermés en caractères $. Après cela, nous devons ajouter l'espace réservé à la "liste d'espace réservé". C'est un peu non intuitif, mais Chrome veut savoir quelle valeur doit être insérée pour nos espaces réservés. Nous voulons (apparemment) utiliser les valeurs dynamiques ici, nous utilisons donc une valeur de contenu spéciale 1 $ pour référencer la valeur que nous avons insérée.
L'exemple de propriété est facultatif. Il peut être utilisé pour inciter le traducteur à ce que pourrait être l'espace réservé (mais il ne montre pas réellement).
Nous devons définir la traduction suivante pour notre extension. Copiez-les et collez-les dans le fichier messages.json. N'hésitez pas à ajouter plus de langues (par exemple, si vous parlez allemand, ajoutez un dossier de _Locales, etc.).
<code>{ "name": { "message": "Reddit 转录器" }, "description": { "message": "子reddits 的辅助图像描述。" }, "popupManageSettings": { "message": "管理设置" }, "optionsPageTitle": { "message": "设置" }, "sectionGeneral": { "message": "常规设置" }, "settingBorder": { "message": "显示评论边框" }, "settingBackground": { "message": "显示评论背景" } }</code>Vous vous demandez peut-être pourquoi nous nous sommes inscrits sans les autorisations i18n, non? Chrome est un peu bizarre à cet égard, car vous n'avez pas besoin d'enregistrer chaque autorisation. Certains (comme Chrome.I18N) ne nécessitent pas d'enregistrement dans les manifestes. D'autres autorisations nécessitent une entrée, mais ne sont pas affichées à l'utilisateur lorsque l'extension est installée. Certaines autres autorisations sont "mixtes" (comme Chrome.Runtime), ce qui signifie que certaines de leurs fonctionnalités peuvent être utilisées sans déclarer les autorisations - mais d'autres caractéristiques de la même API nécessitent une entrée enregistrée dans le manifeste. Vous devez examiner la documentation pour bien comprendre ces différences.
La première chose que les utilisateurs finaux voient est une page d'ensemble d'entrée ou d'extension dans le Chrome Web Store. Nous devons ajuster le fichier manifeste pour nous assurer que tout est traduit.
<code>{ // 更新这些条目"name": "__MSG_name__", "description": "__MSG_description__" }</code>L'application de cette syntaxe utilisera la traduction correspondante dans le fichier messages.json (par exemple, le nom _msg est traduit à l'aide du nom).
L'application de la traduction dans des fichiers HTML nécessite un peu de javascript.
<code>chrome.i18n.getMessage('name');</code>Ce code renvoie la traduction que nous avons définie (c'est-à-dire la transcription Reddit). Les espaces réservés peuvent être effectués de la même manière.
<code>chrome.i18n.getMessage('userGreeting', { daytime: 'morning', user: 'Lars' });</code>L'application de la traduction à tous les éléments de cette façon peut être lourde. Mais nous pouvons écrire un petit script qui effectue une traduction selon l'attribut de données. Créons donc un nouveau dossier JS dans le répertoire SRC, puis ajoutant un nouveau fichier util.js.
<code>src └─ js └─ util.js</code>
Cela peut accomplir la tâche:
<code>const i18n = document.querySelectorAll("[data-intl]"); i18n.forEach(msg => { msg.innerHTML = chrome.i18n.getMessage(msg.dataset.intl); }); chrome.i18n.getAcceptLanguages(languages => { document.documentElement.lang = languages[0]; });</code>Après avoir ajouté ce script à la page HTML, nous pouvons ajouter un attribut Data-INTL à l'élément pour définir son contenu. La langue du document sera également définie en fonction de la langue de l'utilisateur.
<code> </code>
<code>管理设置</code>
Avant de plonger dans la programmation réelle, nous devons créer deux pages:
Voici un aperçu des dossiers et des fichiers dont nous avons besoin pour créer la page:
<code>src ├─ css | └─ paintBucket.css ├─ popup | ├─ popup.html | ├─ popup.css | └─ popup.js └─ options ├─ options.html ├─ options.css └─ options.js</code>
Le fichier .css contient des CSS purs, c'est tout. Je n'entrerai pas dans les détails, car je sais que la plupart d'entre vous lecteurs ont déjà une compréhension complète du fonctionnement du CSS. Vous pouvez copier et coller des styles à partir du référentiel GitHub du projet.
Notez que la fenêtre contextuelle n'est pas un onglet, sa taille dépend de ce qu'elle est à l'intérieur. Si vous souhaitez utiliser une fenêtre contextuelle de taille fixe, vous pouvez définir les propriétés de largeur et de hauteur sur l'élément HTML.
Il s'agit d'un squelette HTML qui relie les fichiers CSS et JavaScript et dans
Ajoutez-y le titre et les boutons. `` '
<code><meta charset="UTF-8"> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport"> <meta content="ie=edge" http-equiv="X-UA-Compatible"></code> <title data-intl="name"></title><link href="../css/paintBucket.css" rel="stylesheet"><link href="popup.css" rel="stylesheet"><h1></h1>
<code>h1 包含扩展程序名称和版本；按钮用于打开选项页面。标题将不会填充翻译（因为它缺少data-intl 属性），并且按钮还没有任何点击处理程序，因此我们需要填充popup.js 文件：</code>
const title = document.getElementById ('title'); const SettingsBtn = document.QuerySelector ('bouton');
title.textContent = ${manifest.name} (${manifest.version}) ;
SettingsBtn.AddeventListener ('click', () => {chrome.runtime.openOptionSpage ();});
<code>此脚本首先查找manifest 文件。Chrome 提供了包含getManifest 方法的runtime API（此特定方法不需要runtime 权限）。它将我们的manifest.json 返回为JSON 对象。在我们使用扩展程序名称和版本填充标题后，我们可以向设置按钮添加事件侦听器。如果用户与之交互，我们将使用chrome.runtime.openOptionsPage() 打开选项页面（同样不需要权限条目）。弹出窗口页面现在已完成，但扩展程序尚不知道它的存在。我们必须通过将以下属性附加到manifest.json 文件来注册弹出窗口。</code>
"Action": {"default_popup": "popup / popup.html", "default_icon": {"16": "images / logo / 16.png", "48": "images / logo / 48.png", "128": "images / logo / 128.png"}},,
<code>#### 创建选项页面创建此页面的过程与我们刚刚完成的过程非常相似。首先，我们填充options.html 文件。以下是一些我们可以使用的标记：</code>
<circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
<code><div></div></code> <p>Extension transcriptive Reddit fournie par <a href="https://www.php.cn/link/530ebdeb0491c0459e00298fcdb3a2bd" target="_blank">Lars.koelker.dev</a> .</p>
Reddit est une marque déposée de Reddit, Inc. Cette extension n'est pas approuvée ou associée à Reddit, Inc. en aucune façon.
<code>目前还没有实际的选项（只有它们的包装器）。我们需要编写选项页面的脚本。首先，我们在options.js 中定义变量以访问我们的包装器和默认设置。“冻结”我们的默认设置可以防止我们以后意外修改它们。</code>
const defaultSettings = object.freeze ({border: false, background: false,});
<code>接下来，我们需要加载保存的设置。我们可以为此使用（先前注册的）存储API。具体来说，我们需要定义是要在本地存储数据(chrome.storage.local) 还是通过登录的所有设备同步设置(chrome.storage.sync)。让我们在这个项目中使用本地存储。需要使用get 方法检索值。它接受两个参数： 1. 我们要加载的条目2. 包含值的回调我们的条目可以是字符串（例如，下面的settings）或条目数组（如果我们想要加载多个条目，则很有用）。回调函数中的参数包含我们先前在{ settings: ... } 中定义的所有条目的对象：</code>chrome.storage.local.get ('paramètres', ({paramètres}) => {const Options = Paramètres?
// Créer et afficher les options Const GeneralOptions = Object.Keys (Options) .Filter (x =>! X.startswith ('Advanced'));
GeneralOptions.ForEach (option => createOption (option, options, généralsection));
<code>为了呈现选项，我们还需要创建一个createOption() 函数。</code>
Fonction CreateOption (setting, settingsObject, wrapper) {const settingwrapper = <div><label for="${setting}">${chrome.i18n.getMessage(</label></div> );
`;
const toggleswitch = settingwrapper.QuerySelector ("Label.is-Switch"); const INPUT = SettingWrapper.QuerySelector ("Input");
input.Onchange = () => {toggleswitch.setAttribute (aria-cueilled ', input.checked);
toggleswitch.onkeydown = e => {if (e.key === "" || e.key === "Entrée") {e.PreventDefault ();
wrapper.APPENDCHILD (Settingwrapper);
<code>在我们的开关（又名单选按钮）的onchange 事件侦听器中，我们调用函数updateSetting。此方法将把单选按钮的更新值写入存储中。为此，我们将使用set 函数。它有两个参数：我们要覆盖的条目和（可选）回调（在本例中我们不使用）。由于我们的settings 条目不是布尔值或字符串，而是一个包含不同设置的对象，因此我们使用扩展运算符(...) 并仅覆盖settings 对象中的实际键(setting)。</code>
fonction updateSetting (key, valeur) {chrome.storage.local.get ('paramètres', ({paramètres}) => {chrome.storage.local.set ({paramètres: {... Paramètres,
<code> } })</code>
});}
<code>同样，我们需要通过将以下条目附加到manifest.json 来“通知”扩展程序我们的选项页面：</code>
"Options_Ui": {"open_in_tab": true, "page": "options / options.html"},
<code>根据您的用例，您还可以通过将open_in_tab 设置为false 来强制选项对话框作为弹出窗口打开。 ### 安装开发扩展程序现在我们已经成功设置了manifest 文件并将弹出窗口和选项页面都添加到了组合中，我们可以安装扩展程序来检查我们的页面是否正常工作。导航到chrome://extensions 并启用“开发者模式”。将出现三个按钮。单击标记为“加载解压”的按钮，然后选择扩展程序的src 文件夹以加载它。扩展程序现在应该已成功安装，并且我们的“Reddit 转录器”图块应该在页面上。我们现在已经可以与扩展程序交互了。单击地址栏旁边的拼图块(?) 图标，然后单击新添加的“Reddit 转录器”扩展程序。您现在应该会看到一个小的弹出窗口，其中包含一个按钮，用于打开选项页面。不错吧？在我的设备上它可能看起来有点不同，因为我在这些屏幕截图中启用了深色模式。如果您启用“显示评论背景”和“显示评论边框”设置，然后重新加载页面，则状态将保留，因为我们将其保存在浏览器的本地存储中。 ### 添加内容脚本好的，我们现在已经可以触发弹出窗口并与扩展程序设置交互，但是扩展程序本身还没有做任何特别有用的事情。为了让它发挥作用，我们将添加一个内容脚本。在js 目录中添加一个名为comment.js 的文件，并确保在manifest.json 文件中定义它：</code>
"content_scripts": [{"correspond": [" : //www.reddit.com/ "], "js": ["js / comment.js"]}],
<code>content_scripts 由两部分组成： - matches：此数组保存URL，这些URL 告诉浏览器我们希望内容脚本在何处运行。作为Reddit 的扩展程序，我们希望它在与://www.redit.com/* 匹配的任何页面上运行，其中星号是通配符，用于匹配顶级域之后的任何内容。 - js：此数组包含实际的内容脚本。内容脚本无法与其他（普通）JavaScript 交互。这意味着如果网站的脚本定义了变量或函数，我们就无法访问它。例如：</code>
// script_on_website.js const username = 'Lars';
// content_script.js console.log (nom d'utilisateur);
<code>现在让我们开始编写内容脚本。首先，我们在comment.js 中添加一些常量。这些常量包含稍后将使用的RegEx 表达式和选择器。CommentUtils 用于确定帖子是否包含“tor 评论”，或者是否存在评论包装器。</code>
const MessageTypes = object.freeze ({comment_page: 'comment_page', subdreddit_page: 'subdreddit_page', main_page: 'main_page', autre_page: 'autre_page',});
constants de constants = object.freeze ({commentWrapper: 'div [style = "- commentswrapper-gradient-color"]> div, div [style = "max-height: unset"]> div', torcomment: 'div [data-tor-comment]', postContent: 'div [dato-test-]'});
const urlRegex = object.freeze ({commentage: / \ / r \ /. \ / commentaires \ /. /, subdredditpage: /\/r\/.*\ \//});
const CorowerUtils = object.freeze ({IstorComment: (comment) => comment.QuerySelector ('[Data-Test-]')? Comment.QuerySelector ('[Data-Test -]'). TextContent. () => !! Document.QuerySelector ('[data-reddit-comment-wrapPapper = "true"]')});
<code>接下来，我们检查用户是否直接打开评论页面（“帖子”），然后执行RegEx 检查并更新directPage 变量。当用户直接打开URL（例如，通过将其键入地址栏或单击另一个页面上的<a> 元素（例如Twitter））时，就会发生这种情况。</a></code>
Soit DirectPage = False;
<code>除了直接打开页面外，用户通常还会与SPA 交互。为了捕获这种情况，我们可以通过使用runtime API 向comment.js 文件添加消息侦听器。</code>
chrome.runtime.onMessage.addListener (msg => {if (msg.type === MessageTypes.comment_page) {waitForComment (movecomments);}});
<code>我们现在只需要这些函数。让我们创建一个moveComments() 函数。它将特殊的“tor 评论”移动到评论部分的开头。它还会根据设置中是否启用了边框，有条件地将背景颜色和边框应用于评论。为此，我们调用存储API 并加载settings 条目：</code>
function moveComments () {if (commentUtils.commentWrapeRexists ()) {return;}
const wrapper ${Selectors.commentWrapper} > div document.QuerySelector (sélecteurs.commentwrapper);
wrapper.dataset.redditcommentwrapper = 'true'; wrapper.style.flexDirection = 'colonne';
if (DirectPage) {commentaires = document.QuerySelectorAll ("[Data-Reddit-Comment-WrapPapper = 'true']> div");
chrome.storage.local.get ('paramètres', ({paramètres}) => {// mettez en surbrillance 18 commentaires.ForEach (commentaire => {if (commentUtils.istorcomment (commentaire)) {comment.dataset.torcomment = 'true'; if (Setting.Background) {comment.style.background) s.border) {comment.style.outline = '2px Solid Red'; comment.style.order = "-1";
<code>applyWaiAria() 函数在moveComments() 函数中调用——它添加aria- 属性。另一个函数创建唯一标识符以与aria- 属性一起使用。</code>
Fonction appliquantwaiaria (postContent, commentaire) {const postmedia = postContent.QuerySelector ('img [class * = "imagebox-image"], vidéo');
if (! PostMedia) {return;}
comment.setAttribute ('id', commentID);
function uuidv4() { return 'xxxxxxx-xxxx-4xxx-yxxxx-xxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }
<code>以下函数等待评论加载，如果找到评论包装器，则调用回调参数。</code>
Function WaitForComment (callback) {const Config = {childlist: true, subtree: true}; const Observer = new mutationObserver (mutations => {pour (const mutation of mutations) {if (document.QuerySelector (sélecteurs.commentwrapper)) {callback (); Observer.Disconnect (); ClearTimeout (temps
Observer.Observe (document.DocumentElement, config); const Timeout = startObservingTimeout (Observer, 10);
fonction startObservingTimeout (Observer, Seconds) {return setTimeout (() => {Observer.Disconnect ();}, 1000 * secondes);
<code>### 添加服务工作者还记得我们在内容脚本中添加了消息侦听器吗？此侦听器当前未接收消息。我们需要自己将其发送到内容脚本。为此，我们需要注册一个服务工作者。我们必须通过将以下代码附加到manifest.json 来注册服务工作者：</code>
"Background": {"Service_Worker": "Sw.js"}
<code>不要忘记在src 目录中创建sw.js 文件（服务工作者始终需要在扩展程序的根目录src 中创建）。现在，让我们为消息和页面类型创建一些常量：</code>
const MessageTypes = object.freeze ({comment_page: 'comment_page', subdreddit_page: 'subdreddit_page', main_page: 'main_page', autre_page: 'autre_page',});
const urlRegex = object.freeze ({commentage: / \ / r \ /. \ / commentaires \ /. /, subdredditpage: /\/r\/.*\ \//});
const utils = object.freeze ({getPageType: (url) => {if (new url (url) .pathname === '/') {return messageTypes.main_page;} else if (urlRegex.commentPage.Test (url)) {return MessageTes.Comment_Page;} else. ) {return MessageTypes.Subreddit_Page;
<code>return messageTypes.OTHER_PAGE;</code>
}});
<code>我们可以添加服务工作者的实际内容。我们使用历史状态上的事件侦听器(onHistoryStateUpdated) 来执行此操作，该侦听器检测何时使用History API 更新页面（通常在SPA 中用于在没有页面刷新情况下导航）。在此侦听器中，我们查询活动选项卡并提取其tabId。然后，我们将包含页面类型和URL 的消息发送到我们的内容脚本。</code>
chrome.webnavigation.onhistorystateupdated.addListener (async ({url}) => {const [{id: tabid}] = attend chrome.tabs.query ({active: true: currentwindow: true});
chrome.tabs.sendMessage (tabid, {type: utils.getPageType (url), url});});
<code>### 全部完成！我们完成了！导航到Chrome 的扩展程序管理页面(chrome://extensions)，然后点击解压扩展程序上的重新加载图标。如果您打开包含“Reddit 转录器”评论和图像转录的Reddit 帖子（例如此帖子），只要我们在扩展程序设置中启用了它，它就会被移动到评论部分的开头并突出显示。 ### 结论这是否像您想象的那么难？在我深入研究之前，它肯定比我想象的要简单得多。在设置manifest.json 并创建任何我们需要的文件和资产后，我们真正做的只是像往常一样编写HTML、CSS 和JavaScript。如果您在途中遇到任何问题，Chrome API 文档是一个很好的资源，可以帮助您重回正轨。再次声明，这是包含我们在本文中介绍的所有代码的GitHub 代码库。阅读它，使用它，并让我知道您的想法！</code>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
