کارگاه توسعه مرورگر وب – قسمت 2

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

نمای کلی

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

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

برچسب های OpenGraph

یک صفحه وب که از پروتکل OpenGraph پشتیبانی می کند مجموعه ای از متا تگ ها را در خود دارد section of the HTML document. These tags provide information about the Webpage itself such as the title, description, and the image to be displayed when the Webpage is shared on social media.

The OpenGraph tags are برچسب ها با a property صفت پیشوند با og::

og:title (الزامی) – عنوان صفحه وب.

og:type (الزامی) – نوع صفحه وب.

og:image (الزامی) – URL تصویری که هنگام اشتراک گذاری صفحه وب نمایش داده می شود.

og:url (الزامی) – URL صفحه وب.

og:description – توضیح مختصری از صفحه وب

og:site_name – نام سایت.

og:locale – محل صفحه وب.

og:determiner – کلمه ای که قبل از عنوان صفحه وب ظاهر می شود.

og:audio – آدرس یک فایل صوتی که با صفحه وب نمایش داده می شود.

og:video – URL یک فایل ویدئویی که با صفحه وب نمایش داده می شود.
و غیره…

پیاده سازی

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

ما می توانیم این کار را به صورت دستی انجام دهیم یا از یک کتابخانه برای تجزیه محتوای HTML و استخراج تگ های OpenGraph استفاده کنیم. در این صورت استفاده خواهیم کرد open-graph-scraper-lite کتابخانه فقط به این دلیل که من خیلی تنبل هستم که آن را به صورت دستی انجام دهم.

این کتابخانه یک نسخه سبک وزن از نسخه اصلی است open-graph-scraper که یک کتابخانه Node.js است و احتمالا در محیط مرورگر کار نخواهد کرد.

ابتدا باید کتابخانه را نصب کنیم:

npm install open-graph-scraper-lite

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

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

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

diff –git a/entrypoints/background.ts b/entrypoints/background.ts
index 856e65c..bc8edf9 100644
— a/entrypoints/background.ts
+++ b/entrypoints/background.ts
@@ -1,3 +1,5 @@
+import ogs from “open-graph-scraper-lite”;
+
export default defineBackground(() => {
browser.tabs.onActivated.addListener(({ tabId }) => {
process(tabId);
@@ -33,12 +35,26 @@ async function process(tabId: number) {
// Cool, we have a nice tab!
console.log(“Tab activated:”, url, hostname);

+ // Get the HTML content:
const [{ result }] = await browser.scripting.executeScript({
target: { tabId },
func: () => {
– return document.documentElement.outerHTML;
+ return document.head.innerHTML;
},
});

– console.log(result);
+ // Attempt to parse the OpenGraph data:
+ ogs({ html: result })
+ .then(({ error, result }) => {
+ if (error) {
+ console.error(“Error while trying to extract OpenGraph data.”);
+ return;
+ }
+
+ // We should have the OpenGraph data now:
+ console.log(“OpenGraph data is extracted successfully.”, result);
+ })
+ .catch((error) => {
+ console.error(“Error while trying to extract OpenGraph data.”, error);
+ });
}

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

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

همانطور که می بینید، تغییر بسیار ساده است:

ما وارد می کنیم open-graph-scraper-lite کتابخانه
ما محتوای آن را استخراج می کنیم section of the HTML document instead of using the entire document.
We use the ogs تابع تجزیه تگ های OpenGraph از محتوای صفحه وب است.

در حال حاضر، ما فقط داده های OpenGraph استخراج شده را به کنسول وارد می کنیم.

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

تعداد زیادی کتابخانه تجزیه کننده/ استخراج کننده OpenGraph موجود است. من انتخاب کردم open-graph-scraper-lite زیرا سبک وزن، آسان برای استفاده و توسعه یافته توسط همان نویسندگان نسخه اصلی است open-graph-scraper کتابخانه در اینجا به خوبی با مورد استفاده ما مطابقت دارد.

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

npm install open-graph-scraper-lite

diff --git a/entrypoints/background.ts b/entrypoints/background.ts
index 856e65c..bc8edf9 100644
--- a/entrypoints/background.ts
+++ b/entrypoints/background.ts
@@ -1,3 +1,5 @@
+import ogs from "open-graph-scraper-lite";
+
 export default defineBackground(() => {
   browser.tabs.onActivated.addListener(({ tabId }) => {
     process(tabId);
@@ -33,12 +35,26 @@ async function process(tabId: number) {
   // Cool, we have a nice tab!
   console.log("Tab activated:", url, hostname);

+  // Get the HTML content:
   const [{ result }] = await browser.scripting.executeScript({
     target: { tabId },
     func: () => {
-      return document.documentElement.outerHTML;
+      return document.head.innerHTML;
     },
   });

-  console.log(result);
+  // Attempt to parse the OpenGraph data:
+  ogs({ html: result })
+    .then(({ error, result }) => {
+      if (error) {
+        console.error("Error while trying to extract OpenGraph data.");
+        return;
+      }
+
+      // We should have the OpenGraph data now:
+      console.log("OpenGraph data is extracted successfully.", result);
+    })
+    .catch((error) => {
+      console.error("Error while trying to extract OpenGraph data.", error);
+    });
 }