Cara Membuat Pelanjutan Penyemak Imbas

Anda mungkin menggunakan sambungan penyemak imbas. Sesetengah sambungan sangat popular dan berguna, seperti penyekat iklan, pengurus kata laluan, dan penonton PDF. Sambungan ini (atau "add -ons") tidak terhad kepada ini - anda boleh berbuat lebih banyak dengan mereka! Artikel ini akan menerangkan cara membuat lanjutan. Akhirnya, kami akan membuatnya berjalan dalam pelbagai pelayar.

Apa yang kita mahu buat

Kami akan membuat lanjutan yang dipanggil "Reddit Transcription" yang akan meningkatkan kebolehcapaian Reddit dengan menggerakkan komen khusus ke bahagian atas bahagian komen dan menambah atribut aria kepada pembaca skrin. Kami juga akan mengambil lanjutan kami satu langkah lebih jauh dengan menambah pilihan untuk menambah sempadan dan latar belakang kepada komen untuk kontras teks yang lebih baik.

Seluruh idea adalah untuk memberi anda idea yang baik tentang cara membangunkan sambungan pelayar. Kami terlebih dahulu akan membuat sambungan untuk pelayar berasaskan kromium seperti Google Chrome, Microsoft Edge, Brave, dll. Dalam artikel yang akan datang, kami akan melanjutkan sambungan untuk menjadikannya serasi dengan Firefox, dan baru -baru ini menambah Safari untuk sokongan sambungan web dalam versi macOS dan iOS pelayar.

Adakah github codebase siap? Mari kita lakukan langkah demi langkah.

Buat Direktori Kerja

Pertama, kita memerlukan ruang kerja projek. Apa yang kita perlukan adalah untuk membuat folder dan namakannya (saya menamakannya Transistor-of-Reddit). Kemudian, buat folder yang dipanggil SRC di dalamnya untuk kod sumber kami.

Tentukan titik masuk

Titik kemasukan adalah fail yang mengandungi maklumat umum mengenai pelanjutan (iaitu, nama lanjutan, keterangan, dll) dan mentakrifkan kebenaran atau skrip yang akan dilaksanakan.

Titik masuk kami boleh menjadi fail manifest.json yang terletak di folder SRC yang baru saja kami buat. Di dalamnya, mari tambahkan tiga sifat berikut:

 <code>{ "manifest_version": 3, "name": "Reddit 转录器", "version": "1.0" }</code>

manifest_version adalah serupa dengan versi dalam npm atau nod. Ia mentakrifkan API mana yang tersedia (atau tidak tersedia). Kami akan menggunakan versi terkini 3 (juga dikenali sebagai MV3) untuk kerja canggih.

Harta kedua adalah nama, yang menentukan nama sambungan kami. Nama ini adalah nama pelanjutan kami muncul apabila ia muncul di mana -mana, seperti kedai web Chrome dan halaman Chrome: // Extensions dalam pelayar Chrome.

Kemudian ada versi. Ia menandakan pelanjutan dengan nombor versi. Ingat bahawa harta ini (berbanding dengan manifest_version) adalah rentetan yang hanya boleh mengandungi nombor dan titik (mis. 1.3.5).

Maklumat yang lebih manifest.json

Malah, kita boleh menambah lebih banyak untuk membantu menambah konteks pelanjutan. Sebagai contoh, kami dapat memberikan keterangan yang menerangkan fungsi pelanjutan. Adalah lebih baik untuk memberikan maklumat ini kerana ia memberi pengguna pemahaman yang lebih baik tentang apa yang akan mereka hadapi ketika menggunakan pelanjutan.

Dalam contoh ini, kita bukan sahaja menambah keterangan, tetapi juga memberikan ikon dan URL yang ditunjuk oleh kedai web Chrome pada halaman pelanjutannya.

 <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>

• Penerangan dipaparkan pada halaman pentadbiran Chrome (Chrome: // Extensions) dan harus pendek dan kurang dari 132 aksara.
• Ikon digunakan di banyak tempat. Seperti yang dinyatakan dalam dokumentasi, lebih baik untuk menyediakan versi ikon yang sama pada tiga resolusi yang berbeza, sebaiknya fail PNG. Anda boleh menggunakan ikon dari repositori GitHub untuk contoh ini.
• homepage_url boleh digunakan untuk menyambungkan laman web anda ke sambungan. Apabila anda mengklik lebih banyak butiran pada halaman admin, butang yang mengandungi pautan muncul.

Tetapkan kebenaran

Salah satu kelebihan pelanjutan yang besar ialah API mereka membolehkan anda berinteraksi secara langsung dengan penyemak imbas anda. Tetapi kita mesti memberikan kebenaran ini kepada lanjutan ini, yang juga termasuk dalam fail manifest.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>

Kebenaran apa yang kita hanya memberikan lanjutan ini? Pertama sekali, penyimpanan. Kami mahu pelanjutan ini menyimpan tetapan pengguna, jadi kami perlu mengakses storan web penyemak imbas untuk menyimpannya. Sebagai contoh, jika pengguna mahu komen itu menunjukkan sempadan merah, kami akan menyimpan tetapan untuk masa yang akan datang dan bukannya menetapkannya lagi.

Kami juga memberikan kebenaran lanjutan untuk melihat bagaimana pengguna menavigasi ke skrin semasa. Reddit adalah aplikasi halaman tunggal (SPA), yang bermaksud ia tidak mencetuskan penyegaran halaman. Kita perlu "menangkap" interaksi ini kerana Reddit hanya akan memuat komen untuk jawatan apabila kita mengklik pada mereka. Jadi, itulah sebabnya kita mengambil kesempatan daripada WebNavigation.

Kami akan merangkumi kod pelaksanaan pada halaman kemudian, kerana ia memerlukan menambah entri baru dalam manifest.json.

/Penjelasan Bergantung kepada kebenaran yang dibenarkan, penyemak imbas boleh memaparkan amaran kepada pengguna untuk menerima kebenaran. Walau bagaimanapun, hanya kebenaran tertentu seperti ini, dan Chrome mempunyai gambaran yang baik tentang keizinan ini.

Menguruskan terjemahan

Pelanjutan penyemak imbas mempunyai API terbina dalam (I18N). Ia membolehkan anda menguruskan terjemahan dalam pelbagai bahasa (senarai penuh). Untuk menggunakan API, kita mesti menentukan terjemahan dan bahasa lalai kami dalam fail manifest.json:

 <code>"default_locale": "en"</code>

Ini menetapkan bahasa Inggeris sebagai bahasa. Jika penyemak imbas ditetapkan ke mana -mana bahasa lain yang tidak disokong, lanjutan itu kembali ke lokasi lalai (EN dalam contoh ini).

Terjemahan kami ditakrifkan dalam direktori _locales. Mari buat folder di dalamnya untuk setiap bahasa untuk menyokong. Setiap subdirektori mempunyai fail tersendiri.json.

 <code>src └─ _locales └─ en └─ messages.json └─ fr └─ messages.json</code>

Fail terjemahan mengandungi pelbagai bahagian:

• Kunci Terjemahan ("ID"): Kunci ini digunakan untuk merujuk kepada terjemahan.
• Mesej: kandungan terjemahan sebenar
• Keterangan (Pilihan): Huraikan terjemahan (saya tidak mengesyorkan menggunakannya, mereka hanya akan membuang fail, dan kekunci terjemahan anda harus cukup deskriptif)
• Pemegang tempat (pilihan): boleh digunakan untuk memasukkan kandungan dinamik dalam terjemahan

Berikut adalah contoh yang membawa semua ini bersama -sama:

 <code>{ "userGreeting": { // 翻译键(“id”) "message": "Good $daytime$, $user$!" // 翻译"description": "用户问候", // 翻译人员的可选描述"placeholders": { // 可选占位符"daytime": { // 如消息中所引用"content": "$1", "example": "morning" // 我们内容的示例值}, "user": { "content": "$1", "example": "Lars" } } } }</code>

Menggunakan ruang letak agak sukar. Pertama, kita perlu menentukan ruang letak dalam mesej. Pemegang letak perlu disertakan dalam $ aksara. Selepas itu, kita perlu menambah pemegang tempat ke "senarai pemegang tempat". Ini agak tidak disengajakan, tetapi Chrome ingin tahu apa nilai yang perlu dimasukkan untuk tempat letak kami. Kami (nampaknya) mahu menggunakan nilai dinamik di sini, jadi kami menggunakan nilai kandungan khas $ 1 untuk merujuk nilai yang kami masukkan.

Contoh harta adalah pilihan. Ia boleh digunakan untuk mendorong penterjemah apa yang diletakkan di tempat letak (tetapi ia sebenarnya tidak menunjukkan).

Kita perlu menentukan terjemahan berikut untuk lanjutan kami. Salin dan tampalnya ke dalam fail Mesej.JSON. Jangan ragu untuk menambah lebih banyak bahasa (contohnya, jika anda berbahasa Jerman, tambahkan folder di _locales, dan sebagainya).

 <code>{ "name": { "message": "Reddit 转录器" }, "description": { "message": "子reddits 的辅助图像描述。" }, "popupManageSettings": { "message": "管理设置" }, "optionsPageTitle": { "message": "设置" }, "sectionGeneral": { "message": "常规设置" }, "settingBorder": { "message": "显示评论边框" }, "settingBackground": { "message": "显示评论背景" } }</code>

Anda mungkin tertanya -tanya mengapa kami berdaftar tanpa kebenaran i18n, bukan? Chrome agak pelik dalam hal ini, kerana anda tidak perlu mendaftarkan setiap kebenaran. Sesetengah (seperti Chrome.I18N) tidak memerlukan pendaftaran secara nyata. Kebenaran lain memerlukan entri, tetapi tidak dipaparkan kepada pengguna apabila sambungan dipasang. Sesetengah kebenaran lain adalah "bercampur" (seperti Chrome.runtime), yang bermaksud beberapa ciri mereka boleh digunakan tanpa mengisytiharkan keizinan - tetapi ciri -ciri lain API yang sama memerlukan entri yang didaftarkan dalam manifes. Anda perlu melihat dokumentasi untuk memahami sepenuhnya perbezaan ini.

Gunakan terjemahan dalam nyata

Pengguna akhir yang pertama melihat adalah halaman entri atau lanjutan di kedai web Chrome. Kita perlu menyesuaikan fail manifes untuk memastikan semuanya diterjemahkan.

 <code>{ // 更新这些条目"name": "__MSG_name__", "description": "__MSG_description__" }</code>

Memohon sintaks ini akan menggunakan terjemahan yang sepadan dalam fail mesej.json (contohnya, nama _msg diterjemahkan menggunakan nama).

Gunakan terjemahan di halaman HTML

Memohon terjemahan dalam fail HTML memerlukan beberapa JavaScript.

 <code>chrome.i18n.getMessage('name');</code>

Kod ini mengembalikan terjemahan yang kami tentukan (iaitu, transkrip reddit). Pemegang letak boleh dilakukan dengan cara yang sama.

 <code>chrome.i18n.getMessage('userGreeting', { daytime: 'morning', user: 'Lars' });</code>

Memohon terjemahan kepada semua elemen dengan cara ini boleh menjadi rumit. Tetapi kita boleh menulis skrip kecil yang melakukan terjemahan mengikut atribut data. Oleh itu, mari buat folder JS baru dalam direktori SRC dan kemudian tambahkan fail UTIL.JS baru di dalamnya.

 <code>src └─ js └─ util.js</code>

Ini dapat melaksanakan tugas:

 <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>

Selepas menambah skrip ini ke halaman HTML, kami boleh menambah atribut data-intl ke elemen untuk menetapkan kandungannya. Bahasa dokumen juga akan ditetapkan mengikut bahasa pengguna.

<code>



</code>

<code>管理设置</code>

Tambahkan halaman popup dan pilihan

Sebelum kita menyelam ke dalam pengaturcaraan sebenar, kita perlu membuat dua halaman:

1. Halaman Pilihan yang Mengandungi Tetapan Pengguna
2. Halaman pop timbul yang dibuka apabila berinteraksi dengan ikon lanjutan di sebelah bar alamat. Halaman ini boleh digunakan dalam pelbagai senario (contohnya, untuk memaparkan statistik atau tetapan cepat).

Berikut adalah gambaran keseluruhan folder dan fail yang kita perlukan untuk membuat halaman:

 <code>src ├─ css | └─ paintBucket.css ├─ popup | ├─ popup.html | ├─ popup.css | └─ popup.js └─ options ├─ options.html ├─ options.css └─ options.js</code>

Fail .css mengandungi CSS tulen, itu sahaja. Saya tidak akan pergi ke butiran, kerana saya tahu bahawa kebanyakan pembaca anda sudah mempunyai pemahaman yang lengkap tentang bagaimana CSS berfungsi. Anda boleh menyalin dan menampal gaya dari repositori GitHub projek.

Perhatikan bahawa pop timbul bukan tab, saiznya bergantung pada apa yang ada di dalamnya. Jika anda ingin menggunakan pop timbul saiz tetap, anda boleh menetapkan sifat lebar dan ketinggian pada elemen HTML.

Buat tetingkap pop timbul

Ini adalah kerangka HTML yang menghubungkan fail CSS dan JavaScript dan masuk

Tambah tajuk dan butang kepadanya. `` `

 <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.getElementById ('Title');

title.TextContent = ${manifest.name} (${manifest.version}) ;

settingsBtN.AddeventListener ('klik', () => {Chrome.Runtime.OpenOptionsPage ();});

<code>此脚本首先查找manifest 文件。Chrome 提供了包含getManifest 方法的runtime API（此特定方法不需要runtime 权限）。它将我们的manifest.json 返回为JSON 对象。在我们使用扩展程序名称和版本填充标题后，我们可以向设置按钮添加事件侦听器。如果用户与之交互，我们将使用chrome.runtime.openOptionsPage() 打开选项页面（同样不需要权限条目）。弹出窗口页面现在已完成，但扩展程序尚不知道它的存在。我们必须通过将以下属性附加到manifest.json 文件来注册弹出窗口。</code>

"tindakan": {"default_popup": "popup/popup.html", "default_icon": {"16": "image/logo/16.png", "48": "imej/logo/48.png", "128": "image/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>Reddit Transcriptionist Extension yang disediakan oleh <a href="https://www.php.cn/link/530ebdeb0491c0459e00298fcdb3a2bd" target="_blank">Lars.Koelker.dev</a> .</p>

Reddit adalah tanda dagangan berdaftar Reddit, Inc. Pelanjutan ini tidak disahkan atau dikaitkan dengan Reddit, Inc. dalam apa cara sekalipun.

<code>目前还没有实际的选项（只有它们的包装器）。我们需要编写选项页面的脚本。首先，我们在options.js 中定义变量以访问我们的包装器和默认设置。“冻结”我们的默认设置可以防止我们以后意外修改它们。</code>

const defaultSettings = Object.Freeze ({Border: False, Latar Belakang: False,});

<code>接下来，我们需要加载保存的设置。我们可以为此使用（先前注册的）存储API。具体来说，我们需要定义是要在本地存储数据(chrome.storage.local) 还是通过登录的所有设备同步设置(chrome.storage.sync)。让我们在这个项目中使用本地存储。需要使用get 方法检索值。它接受两个参数： 1. 我们要加载的条目2. 包含值的回调我们的条目可以是字符串（例如，下面的settings）或条目数组（如果我们想要加载多个条目，则很有用）。回调函数中的参数包含我们先前在{ settings: ... } 中定义的所有条目的对象：</code>

chrome.storage.local.get ('Tetapan', ({Tetapan})

// Membuat dan memaparkan pilihan const GenerOptions = Object.Keys (Options) .filter (x =>! X.StartSwith ('Advanced'));

GeneralOptions.Foreach (Option => CreateOption (Opsyen, Options, Generalsection));

<code>为了呈现选项，我们还需要创建一个createOption() 函数。</code>

Function CreateOption (SettingsObject, Wrapper) {const settingWrapper = <div><label for="${setting}">${chrome.i18n.getMessage(</label></div> div");

`;

const togglesWitch = SettingWrapper.QuerySelector ("label.is-switch");

input.onchange = () => {toggleswitch.setAttribute ('aria-checked', input.checked);

toggleswitch.onkeydown = e => {if (e.key === "" || e.key === "Enter") {E.PreVentDefault ();

Wrapper.AppendChild (menetapkanWrapper);

<code>在我们的开关（又名单选按钮）的onchange 事件侦听器中，我们调用函数updateSetting。此方法将把单选按钮的更新值写入存储中。为此，我们将使用set 函数。它有两个参数：我们要覆盖的条目和（可选）回调（在本例中我们不使用）。由于我们的settings 条目不是布尔值或字符串，而是一个包含不同设置的对象，因此我们使用扩展运算符(...) 并仅覆盖settings 对象中的实际键(setting)。</code>

fungsi kemas kini fungsi (kunci, nilai) {chrome.storage.local.get ('settings', ({settings}) => {chrome.storage.local.set ({settings: {... tetapan,

<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": [{"Matches": [" : //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 (nama pengguna);

<code>现在让我们开始编写内容脚本。首先，我们在comment.js 中添加一些常量。这些常量包含稍后将使用的RegEx 表达式和选择器。CommentUtils 用于确定帖子是否包含“tor 评论”，或者是否存在评论包装器。</code>

const messageTypes = object.freeze ({comment_page: 'comment_page', subreddit_page: 'subreddit_page', main_page: 'main_page', other_page: 'other_page',});

const selectors = Object.Freeze ({CommentWrapper: 'Div [style = "-CommentSwrapper-Gradient-color"]> div, div [style = "max-height: unset"]> div', torcomment: 'div [data-tor-comment]', postContent: 'div [data-test-]'});

const urlRegex = object.freeze ({CommentPage:/\/r \/. \/Comments \/./ , SubredDitPage: /\/r\/.**//});

Const Commentutils = Object.Freeze ({iSTorcomment: (Comment) => !! Document.QuerySelector ('[data-reddit-comment-wrapper = "true"]')});

<code>接下来，我们检查用户是否直接打开评论页面（“帖子”），然后执行RegEx 检查并更新directPage 变量。当用户直接打开URL（例如，通过将其键入地址栏或单击另一个页面上的<a> 元素（例如Twitter））时，就会发生这种情况。</a></code>

Biarkan 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>

fungsi moveComments () {if (commentUtils.commentWrapperExists ()) {return;

const wrapper ${Selectors.commentWrapper} > div document.QuerySelector (selectors.commentWrapper);

wrapper.dataset.redditcommentWrapper = 'true';

jika (DirectPage) {comments = document.QuerySelectorAll ("[data-reddit-comment-wrapper = 'true']> div");

chrome.storage.local.get ('tetapan', ({tetapan}) => {// highlight 18 comments.foreach (comment => {if (commentutils.istorcomment (comment) {comment.dataset.torcomment = 'true'; (settings.border) {comment.style.outline = '2px pepejal merah'; Comment.Style.order = "-1";

 <code>applyWaiAria() 函数在moveComments() 函数中调用——它添加aria- 属性。另一个函数创建唯一标识符以与aria- 属性一起使用。</code>

Fungsi ApplyWaiaria (PostContent, Comment) {const Postmedia = PostContent.QuerySelector ('img [class*= "imageBox-image"], video');

jika (! Postmedia) {return;

Comment.SetAttribute ('id', commentId);

fungsi uuidv4 () {return 'xxxxxxx-xxxx-4xxx-yxxxx-xxxxxxxxxxxxxx'.replace (/[xy]/g, fungsi (c)

<code>以下函数等待评论加载，如果找到评论包装器，则调用回调参数。</code>

Fungsi WaitForcomment (Callback) {const config = {childList: true, subtree: true};

Observer.observe (Document.documentElement, config);

fungsi startObservingTimeOut (pemerhati, saat) {return setTimeout () => {Observer.DisconNect ();}, 1000 * saat);

 <code>### 添加服务工作者还记得我们在内容脚本中添加了消息侦听器吗？此侦听器当前未接收消息。我们需要自己将其发送到内容脚本。为此，我们需要注册一个服务工作者。我们必须通过将以下代码附加到manifest.json 来注册服务工作者：</code>

"Latar Belakang": {"Service_Worker": "SW.JS"}

<code>不要忘记在src 目录中创建sw.js 文件（服务工作者始终需要在扩展程序的根目录src 中创建）。现在，让我们为消息和页面类型创建一些常量：</code>

const messageTypes = object.freeze ({comment_page: 'comment_page', subreddit_page: 'subreddit_page', main_page: 'main_page', other_page: 'other_page',});

const urlRegex = object.freeze ({CommentPage:/\/r \/. \/Comments \/./ , SubredDitPage: /\/r\/.**//});

const utils = object.freeze ({getPageType: (url) => {if (url baru (url) .pathname === '/') {return MessageTypes.Main_Page; ) {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}] = menunggu chrome.tabs.query ({aktif: 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>

Atas ialah kandungan terperinci Cara Membuat Pelanjutan Penyemak Imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!