كيفية إنشاء امتداد عبر المتصفح باستخدام JavaScript وواجهات برمجة تطبيقات المتصفح

سيغطي هذا البرنامج التعليمي كيفية إنشاء امتداد ويب يعمل عبر متصفحات متعددة. سيوضح لك كيفية هيكلة مشروع وكتابة كود JavaScript للتفاعل مع علامات تبويب المتصفح ، اعتمادًا على المتصفح الذي يتم استخدامه. هذا يعني أنه يمكنك ترميز حزمة ملحق واحدة ثم توزيعها على متاجر الويب متعددة المتصفحات.

ستركز هذه المشاركة على متصفحي Chrome و Firefox ، إلى جانب توزيع الإضافات عبر Chrome Web Store ومواقع Firefox Add-ons. المتصفحات وخيارات التوزيع الأخرى متاحة أيضًا لملحقات الويب.

ابدأ بقالب - انسخ ، حرر ، وانشر!

لمشاهدة مثال مكتمل ، إليك رابط لملحق قمت بإنشائه يسمى Link Formatter ، مع JavaScript عبر المستعرضات داخل popup.js. يتم سرد الحزمة نفسها في كل من متاجر الويب Chrome و Firefox.

ملحقات المستعرض

تعد الإضافات طريقة رائعة لتوسيع وظائف متصفحك ، وهي تتيح لك تحسين تجربتك عبر الإنترنت. إذا كنت تقوم ببناء أول واحد لك أو ترغب في معرفة المزيد عنها ، فإنني أوصي بالبرامج التعليمية التالية:

  • ملحقات المتصفح - Mozilla | MDN
  • ما هي الامتدادات؟ - جوجل كروم
  • تشريح امتداد - موزيلا | MDN

قم بتحميل امتدادك محليًا على جهاز الكمبيوتر الخاص بك

عند تطوير امتدادك ، يمكنك تحميله محليًا دون الحاجة إلى نشره وتنزيله من موقع ويب خارجي. تعتمد طريقة القيام بذلك على المتصفح الذي تستخدمه.

كروم

  • قم بزيارة chrome://extensions/متصفح Chrome الخاص بك
  • انقر Load Unpacked
  • حدد مجلد الامتداد

ثعلب النار

  • يزور about:debugging
  • انقر فوق Load Temporary Add-on
  • حدد manifest.jsonداخل مجلد الامتداد

نصيحة التصحيح : لعرض وحدة التحكم ، (على سبيل المثال لرؤية الأخطاء) ، انقر بزر الماوس الأيمن / التحكم ، انقر فوق رمز امتداد الويب أو النافذة المنبثقة وحددinspect

كتابة JavaScript لتمديد المتصفح الخاص بك

هناك العديد من واجهات برمجة تطبيقات JavaScript API التي يمكن استخدامها في امتداد المتصفح. هذا المنشور سوف يركز على علامات التبويب API.

لمزيد من المعلومات حول واجهات برمجة تطبيقات ملحق الويب ، راجع واجهات برمجة تطبيقات JavaScript - Mozilla | MDN.

يمكن أن يحتوي ملحق المتصفح الذي يتضمن صفحة HTML منبثقة عندما ينقر المستخدم على الرمز في شريط أدوات المتصفح على هيكل مشروع مثل هذا:

extension├── css│ └── style.css├── js│ └── popup.js├── manifest.json└── popup.html

ستقوم popup.htmlالصفحة بعد ذلك بتشغيل js/popup.jsالبرنامج النصي في أسفل الصفحة. يمكنك إضافة JavaScript هنا.

ملاحظة : يمكن أن تحتوي هياكل المشروع الأخرى على مجلد لرمز المكتبة ، بالإضافة إلى ملفات JavaScript التي تعمل في مناطق أخرى من الامتداد. على سبيل المثال ، في النصوص البرمجية الخلفية للإضافة ، وفي أي مستندات أخرى مرفقة مع الامتداد ، بما في ذلك إجراء المستعرض أو النوافذ المنبثقة لإجراءات الصفحة ، أو الأشرطة الجانبية ، أو صفحات الخيارات ، أو صفحات علامة التبويب الجديدة.

واجهات برمجة تطبيقات علامة تبويب المتصفح

عند كتابة امتداد ويب ، تحتاج إلى استخدام واجهة برمجة تطبيقات علامات التبويب للتفاعل مع علامات التبويب في المتصفح. تحتاج أيضًا إلى طلب إذن من المستخدم للقيام بذلك.

طلب أذونات الوصول إلى علامات التبويب

يجب تعيين الأذونات في manifest.json. عندما يحاول المستخدم تثبيت الامتداد ، فإنه سيطلب من المستخدم تأكيد السماح بهذا الإجراء.

"permissions": [ "tabs" ]

الاستعلام عن علامات التبويب باستخدام واجهة برمجة تطبيقات المتصفح

تستخدم المتصفحات ، مثل Firefox ، browser.tabsواجهة برمجة التطبيقات للتفاعل مع علامات تبويب المتصفح. لطلب معلومات حول علامات تبويب النافذة ، يمكنك استخدام التابع query، الذي يُعيد الوعد بمصفوفة من علامات التبويب.

browser.tabs.query( queryInfo // object)

اقرأ المزيد حول browser.tabs.query على tabs.query () - Mozilla | MDN

لطلب علامة التبويب النشطة لنافذة المتصفح ، يجب عليك كتابة JavaScript التالية:

browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)

للحصول على علامة التبويب الحالية ، يمكنك استرداد علامة التبويب الأولى من مجموعة علامات التبويب التي تم إرجاعها. باتباع هذا الهيكل ، يمكنك الحصول على البيانات من علامة تبويب المتصفح.

const logCurrentTabData = (tabs) => { currentTab = tabs[0] console.log(currentTab.title); console.log(currentTab.url);}

ومع ذلك ، عند محاولة فتح الامتداد في Chrome ...

الاستعلام عن علامات التبويب باستخدام واجهة برمجة تطبيقات الكروم

يحتوي Chrome على واجهة برمجة تطبيقات خاصة به لاستعلامات علامات التبويب. هذا يتبع بناء الجملة chrome.tabs→ الاستعلام الخاص بك

chrome.tabs.query(object queryInfo, function callback)

اقرأ المزيد حول واجهة برمجة تطبيقات علامات تبويب Chrome هنا: chrome.tabs - Google Chrome.

So to use this method call, you would write the following in your browser extension:

chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) });

Combining tab queries

Detect which API to use

You can then include both types of browser queries in your extension by using a conditional statement to determine which one to use.

if(chrome) { chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) } );} else { browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)}

Adding more code for each browser type

Within each side of the condition, you can then add other pieces of code that depend on the different APIs, for example to create new tabs.

chrome.tabs.create()browser.tabs.create()

Here is the code with the extra methods added in that opens a link in a new tab.

if(chrome) { chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) } ); $('a').click( (event) => { chrome.tabs.create({url:event.target.href}) } )} else { browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData) $('a').click( (event) => { browser.tabs.create({url:event.target.href}) } )}

Publishing your extension

With this code in place, you can now interact with the current browser without having to write two or more different web extension projects. You can now package your extension and publish to multiple web stores with the same file!

  • Publish in the Chrome Web Store — Google Chrome
  • Developer Hub :: Add-ons for Firefox

اقرأ المزيد من موقع Medium

  • كيفية الارتباط بفقرة معينة في مقالتك على Medium (طريقة جدول المحتويات لعام 2018) بواسطة Quincy Larson في freeCodeCamp
  • تحسين التجربة المتوسطة: امتداد متصفح واحد في كل مرة بواسطة cedric amaya في freeCodeCamp

اقرأ المزيد من ryanwhocodes

  • كيف يمكنك إنشاء تطبيق ويب تقدمي في غضون ساعة
  • انتبه إلى لغة البرمجة الخاصة بك: كيفية استخدام Github Linguist و gitattributes لاكتشاف نوع كود تطبيقك بدقة
  • اجعل جهازك الطرفي أكثر سخونة وإنتاجية مع iTerm2 و Zsh!