کارگاه آموزشی توسعه مرورگر وب – قسمت 1

Summarize this content to 400 words in Persian Lang
من در حال شروع یک سری کوتاه از پست های وبلاگ در مورد ایجاد یک افزونه مرورگر وب با استفاده از WXT هستم. در این قسمت اول، ما محیط توسعه را تنظیم می کنیم و سعی می کنیم محتوای صفحه وب یا صفحه وب پیمایش شده را در برگه فعال بخوانیم.

انگیزه

نه اینکه می دانم دارم چه کار می کنم، اما هیجان انگیز به نظر می رسد…

از زمانی که استفاده از کامپیوتر را شروع کردم به طور موثر، خیلی چیزها تغییر کرده است. اگر سرعت پیشرفت های فنی را در نظر بگیرید کاملاً طبیعی است.

یکی از کارهایی که در آن زمان انجام می‌دادیم استفاده از اسکریپت‌های Greasemonkey برای اصلاح رفتار وب‌سایت‌ها بود. در برخی مواقع، کارها از کار افتادند، بیشتر به این دلیل که فروشندگان مرورگر شروع به محدود کردن قابلیت‌های این اسکریپت‌ها کردند و نمی‌توانند انجام دهند.

من Greasemonkey را کنار گذاشتم و شروع به تکیه بر افزونه های مرورگر کردم. هر چند وقت یک‌بار احساس می‌کردم که باید دوباره به Greasemonkey برسم. اما من هرگز انجام ندادم.

اخیراً متوجه شدم که فروشندگان مختلف مرورگر وب شروع به پشتیبانی از مجموعه مشترکی از APIها برای ایجاد پسوند مرورگر کرده‌اند. این چیز خوبی است. همچنین، من متوجه چند فریمورک شدم که ایجاد افزونه های مرورگر را آسان تر می کند. این حتی بهتر است!

WXT یکی از این فریم ورک ها است. آنقدر ساده به نظر می رسید که باعث شد تصمیم بگیرم وقتم را روی آن تلف کنم.

مشکل

از آنجایی که انگیزه من ریشه در یک مشکل واقعی و مفید ندارد، باید یکی را پیدا کنم که بتواند مرا علاقه مند کند.

من یک مرد SEO نیستم، اما در معرض این چیز OpenGraph هستم. من می دانم که چیست و چرا اهمیت دارد، اما نمی دانم دیگران چگونه این کار را انجام می دهند.

بنابراین، از خودم یک سوال پرسیدم: “چگونه می توانم تگ های OpenGraph یک صفحه وب را که بازدید می کنم ببینم؟”

راه حل

فقط روی صفحه وب کلیک راست کرده و آیتم منوی زمینه را انتخاب کنید که می گوید “مشاهده منبع صفحه”. تمام شد، اما خیلی کسل کننده!

راه حل Overkill

بیایید یک افزونه مرورگر بنویسیم که تگ‌های OpenGraph صفحه وب را که در برگه فعال رندر شده است بخواند و هنگامی که نماد برنامه افزودنی کلیک می‌شود، آن را در یک پنجره بازشو نشان می‌دهد.

نمی دانم حتی شدنی است یا نه. اما من حتی یک نام برای آن دارم: ogpatrol.

ببینیم…

در همین پست، ما یک مخزن GitHub برای این پروژه ایجاد می کنیم، پایگاه کد را مقداردهی اولیه می کنیم و برای خواندن محتوای صفحه وب به رویدادهای برگه گوش می دهیم. در پست های بعدی سعی می کنیم تگ های OpenGraph را بخوانیم و آنها را به صورت پاپ آپ نمایش دهیم.

شروع به کار

برای شروع به عنوان WXT به این پست نیاز ندارید – مستندات شروع به کار به اندازه کافی خوب است، اما اجازه دهید به شما بگویم که برای سفارشات خوب چه کار کردم.

من استفاده کردم npx و wxt برای ایجاد پروژه:

npx wxt@latest init ogpatrol

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس وارد دایرکتوری پروژه شده و وابستگی ها را نصب کنید:

cd ogpatrol && npm install

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در نهایت، من پروژه را در حالت توسعه با هدف قرار دادن فایرفاکس اجرا کردم:

npm run dev:firefox

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این پروژه را کامپایل کرد و یک پنجره جدید فایرفاکس با افزونه بارگذاری شده باز کرد. می‌توانم نماد برنامه افزودنی را در نوار ابزار پیدا کنم، روی آن کلیک کنم و پنجره خوش‌آمدگویی را ببینم. عالیه

من همچنین پروژه را در حالت توسعه با هدف قرار دادن Chrome اجرا کردم:

npm run dev

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

همان! برنامه افزودنی در یک پنجره جدید Chrome (در واقع Chromium در مورد من) بارگیری شد و من می‌توانم پنجره خوش‌آمدگویی را ببینم.

در نهایت، من یک مخزن GitHub برای پروژه ایجاد کردم و پایگاه کد را فشار دادم:

gh repo create “ogpatrol” –public –push –source .

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شما می توانید آن را خودتان ogpatrol ببینید.

افراط در کد

تا به حال هیچ چیز زیادی به دست نیامده است. نه هیجان، نه شادی.

چطور به رویدادهای برگه گوش می دهیم و محتوای صفحه وب را که بارگذاری یا فعال شده است می خوانیم؟

بیایید تفاوت را ببینیم background.ts فایل:

diff –git a/entrypoints/background.ts b/entrypoints/background.ts
index f96fa48..856e65c 100644
— a/entrypoints/background.ts
+++ b/entrypoints/background.ts
@@ -1,3 +1,44 @@
export default defineBackground(() => {
– console.log(‘Hello background!’, { id: browser.runtime.id });
+ browser.tabs.onActivated.addListener(({ tabId }) => {
+ process(tabId);
+ });
+
+ browser.tabs.onUpdated.addListener((tabId, changeInfo) => {
+ if (changeInfo?.status === “complete”) {
+ process(tabId);
+ }
+ });
});
+
+async function process(tabId: number) {
+ // Get the tab:
+ const tab = await browser.tabs.get(tabId);
+
+ // Attempt to get the tab URL;
+ const url = tab.url ?? tab.pendingUrl;
+
+ // Return if we do not have a URL:
+ if (!url) {
+ return;
+ }
+
+ // Attempt to get the hostname:
+ const hostname = new URL(url).hostname;
+
+ // Return if we do not have a hostname:
+ if (!hostname) {
+ return;
+ }
+
+ // Cool, we have a nice tab!
+ console.log(“Tab activated:”, url, hostname);
+
+ const [{ result }] = await browser.scripting.executeScript({
+ target: { tabId },
+ func: () => {
+ return document.documentElement.outerHTML;
+ },
+ });
+
+ console.log(result);
+}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بگذارید توضیح دهم اینجا چه خبر است …

background.ts نقطه ورود برای اسکریپت پس زمینه است. این اسکریپت در پس زمینه اجرا می شود (تعجب!) و به رویدادهای مختلف گوش می دهد. ما در حال گوش دادن به دو رویداد هستیم: tabs.onActivated و tabs.onUpdated.

هنگامی که یک برگه فعال یا به روز می شود، ما با ما تماس می گیریم process با شناسه تب عمل کنید. را process تابع تب را دریافت می کند، سعی می کند URL و نام میزبان را استخراج کند، و در صورت موفقیت، یک اسکریپت را در برگه اجرا می کند تا محتوای صفحه وب را دریافت کند و آن را ثبت کند.

در اولین تلاش من کار نکرد و در عوض یک خطا در Browser Console به من نشان داد:

Error: Missing host permission for the tab

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توجه داشته باشید که کنسول مرورگر با کنسول وب متفاوت است. می توانید با فشار دادن آن را باز کنید Ctrl+Shift+J در فایرفاکس، و گزینه “Multiprocess” را انتخاب کنید تا پیام کنسول را از اسکریپت پس زمینه مشاهده کنید.

معلوم شد که مشکل مجوز است. باید تغییر زیر را در قسمت اضافه کنیم wxt.config.ts فایل:

diff –git a/wxt.config.ts b/wxt.config.ts
index 1e2f53d..2c6fc40 100644
— a/wxt.config.ts
+++ b/wxt.config.ts
@@ -1,4 +1,9 @@
import { defineConfig } from ‘wxt’;

// See https://wxt.dev/api/config.html
-export default defineConfig({});
+export default defineConfig({
+ manifest: {
+ permissions: [“scripting”],
+ host_permissions: [“”],
+ },
+});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما اضافه کردیم scripting اجازه دسترسی به browser.scripting API و مجوز میزبان برای دسترسی به محتوای صفحه وب.

مورد دوم این است که چرا همه ما افزونه های مرورگر را دوست داریم، درست است؟ چنین اجازه خوشمزه ای وقتی دیگران آن را انجام می دهند از آن متنفریم، وقتی آن را انجام می دهیم دوستش داریم. این قاعده است.

به هر حال، تا کنون، ما می توانیم محتوای صفحه وب را در کنسول مرورگر مشاهده کنیم.

بسته بندی کنید

ما سفر خود را برای ایجاد یک افزونه مرورگر وب با استفاده از WXT آغاز کردیم. ما محیط توسعه را تنظیم کردیم و به رویدادهای برگه گوش دادیم تا محتوای صفحه وب را با سلب حقوق حریم خصوصی کاربرانمان بخوانیم. دوست داشتنی…

این سفر را در پست‌های بعدی با تلاش برای خواندن تگ‌های OpenGraph صفحه وب و نمایش آنها در یک پنجره بازشو ادامه خواهیم داد.

npx wxt@latest init ogpatrol

cd ogpatrol && npm install

npm run dev:firefox

npm run dev

gh repo create "ogpatrol" --public --push --source .

diff --git a/entrypoints/background.ts b/entrypoints/background.ts
index f96fa48..856e65c 100644
--- a/entrypoints/background.ts
+++ b/entrypoints/background.ts
@@ -1,3 +1,44 @@
 export default defineBackground(() => {
-  console.log('Hello background!', { id: browser.runtime.id });
+  browser.tabs.onActivated.addListener(({ tabId }) => {
+    process(tabId);
+  });
+
+  browser.tabs.onUpdated.addListener((tabId, changeInfo) => {
+    if (changeInfo?.status === "complete") {
+      process(tabId);
+    }
+  });
 });
+
+async function process(tabId: number) {
+  // Get the tab:
+  const tab = await browser.tabs.get(tabId);
+
+  // Attempt to get the tab URL;
+  const url = tab.url ?? tab.pendingUrl;
+
+  // Return if we do not have a URL:
+  if (!url) {
+    return;
+  }
+
+  // Attempt to get the hostname:
+  const hostname = new URL(url).hostname;
+
+  // Return if we do not have a hostname:
+  if (!hostname) {
+    return;
+  }
+
+  // Cool, we have a nice tab!
+  console.log("Tab activated:", url, hostname);
+
+  const [{ result }] = await browser.scripting.executeScript({
+    target: { tabId },
+    func: () => {
+      return document.documentElement.outerHTML;
+    },
+  });
+
+  console.log(result);
+}

Error: Missing host permission for the tab

diff --git a/wxt.config.ts b/wxt.config.ts
index 1e2f53d..2c6fc40 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -1,4 +1,9 @@
 import { defineConfig } from 'wxt';

 // See https://wxt.dev/api/config.html
-export default defineConfig({});
+export default defineConfig({
+  manifest: {
+    permissions: ["scripting"],
+    host_permissions: [""],
+  },
+});