كيفية بناء امتداد كروم

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

الخطوة 1: المتطلبات

ملاحظتان قبل البدء:

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

قبل أن تبدأ ، ستحتاج إلى تحديد وظيفة الامتداد. ما الغرض الذي سيخدم؟ ركز على اهتمامات جمهورك ومشاكلهم ، حتى تتمكن من تحديد نوع الحل الذي يمكنك تقديمه بوضوح.

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

الخطوة الثانية: اللبنات الأساسية

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

الدليل هو موقع لتخزين الملفات على جهاز الكمبيوتر الخاص بك. يحتوي أي نظام تشغيل بهيكل ملف هرمي ، مثل MS-DOS أو OS / 2 أو Linux ، على دليل ملف.

لماذا تحتاج إلى دليل؟ لذلك عندما يقوم Chrome بتحميل الامتداد الخاص بك ، يمكنك سحب الملفات من المجلد الصحيح.

ملف manifest.json

بعد ذلك ، تحتاج إلى إنشاء ملف البيان الخاص بالملحق.

البيان هو ملف يخبر نظام التشغيل بكيفية بدء البرنامج . يتم دائمًا تحديد الإعدادات في ملف البيان باستخدام لغة XML. غالبًا ما تُستخدم البيانات لتضمين إعدادات مثل الامتيازات ، وإبلاغ نظام التشغيل بإصدار DLL الذي سيستخدمه البرنامج.

في حالة الامتداد الخاص بك ، سيعطي ملف البيان Chrome التعليمات لتحميل الامتداد.

إنشاء ملف البيان الخاص بك

في Chrome ، أنشئ ملفًا باسم manifest.json وأضفه إلى دليلك. أضف الكود الذي تحتاجه إلى ملف البيان الخاص بك. ثم أضف الكود التالي:

{

"الاسم": "مثال البدء" ،

"الوصف": "إنشاء ملحق!" ،

"الإصدار": "1.0" ،

"الإصدار_ الظاهر": 3

}

تعتمد أذونات الامتداد على وظيفة التمديد. يمكنك العثور على قائمة بجميع الأذونات ومعناها في مستندات امتداد Chrome.

الصفحة المنبثقة

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

1. قم بتعيين اسم الملف باستخدام browser_action في ملف البيان.
2. أنشئ الصفحة المنبثقة باستخدام HTML أو CSS. يمكنك إضافة الصور باستخدام SVG.
3. استخدم JavaScript لإضافة وظائف إلى النافذة المنبثقة. عيّن ملف JavaScript واربطه في ملفك المنبثق. علي سبيل المثال:
4. يمكنك إنشاء وظائف والوصول إلى DOM المنبثقة. فيما يلي مثال على كيفية القيام بذلك.

document.addEventListener (“DOMContentLoaded”، () => {

var button = document.getElementById ("إرسال")

button.addEventListener ("انقر"، (e) => {

console.log (ه)

})

})

نص المحتوى

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

“content_scripts”: [

{

"يطابق": ["<all_urls>”] ،

"css": ["background.css"]،

"js": ["background.js"]

}

] ،

إذا كنت تريد أن تعمل الإضافة على موقع واحد ، مثل Facebook ، على سبيل المثال ، يجب عليك إضافة [“https://facebook.com/*”]

صفحة الأحداث

الحدث عبارة عن كائن يمكنك من إعلامك بحدوث شيء مثير للاهتمام. على سبيل المثال ، يمكنك استخدام الحدث chrome.alarms.onAlarm ليتم إعلامك عندما يحين موعد الإنذار.

chrome.alarms.onAlarm.addListener (الوظيفة (المنبه) {

appendToLog ("alarms.onAlarm -"

+ "الاسم:" + المنبه

+ 'ScheduleTime:' + alarm.scheduledTime) ؛

}) ؛

يمكنك معرفة المزيد حول صفحات الأحداث في مستندات Chrome

Content.js

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

الخطوة 3: افتح ملف HTML منبثق من نافذة امتداد Chrome المنبثقة

إذا قمت بوضع زر في امتداد Chrome الأصلي ، فعند النقر فوق هذا الزر ، يمكنك إنشاء نافذة HTML منبثقة أخرى في محتوى مختلف. هذا مثال على StackOverflow:

البيان. json:

{

"الاسم": "أوراق الغش" ،

"الوصف": "ملحق ورقة الغش" ،

"الإصدار": "1.0" ،

"manifest_version": 3 ،

"معرفتي": {

"service_worker": "background.js"

} ،

"أذونات": ["تخزين" ، "activeTab" ، "برمجة" ، "علامات تبويب"] ،

"عمل": {

"default_popup": "popup.html" ،

"default_icon": {

"16": "/images/get_started16.png" ،

"32": "/images/get_started32.png" ،

"48": "/images/get_started48.png" ،

"128": "/images/get_started128.png"

}

} ،

"الرموز": {

"16": "/images/get_started16.png" ،

"32": "/images/get_started32.png" ،

"48": "/images/get_started48.png" ،

"128": "/images/get_started128.png"

}

}

popup.html:

<! DOCTYPE html>

<html>

<head>

<link rel = ”stylesheet” href = ”style.css”>

</head>

<الجسم>

<button id = ”git_Sheet”> ورقة git </button>

<script src = ”popup.js”> </script>

</body>

</html>

وملف popup.js:

اسمح لـ gitSheet = document.getElementById (“git_Sheet”) ؛ gitSheet.addEventListener (“click” ، async () => {let

= await chrome.tabs.query ({active: true، currentWindow: true})؛ chrome.scripting.executeScript ({target: {tabId: tab.id}، function: ShowGitSheet،})؛ }) ؛ وظيفة ShowGitSheet () {chrome.browserAction.openPopup ({popup: “git_popup.html”}) ؛ }

نصيحة: استخدم chrome.windows.create ({url: '…' ، اكتب: 'popup'}) بدلاً من chrome.browserAction.openPopup إذا كنت تريد متصفحًا آخر غير Firefox لتشغيل امتدادك.

الخطوة 4: تحقق من وجود أخطاء بعد تثبيت الامتداد الخاص بك في Chrome

بمجرد الانتهاء من مرحلة البناء ، حان الوقت لاختبار الامتداد للتأكد من أن Chrome سيقوم بتشغيله. لتحميل الملحق الخاص بك وبدء التصحيح ، اتبع الخطوات التالية:

• افتح chrome: // extension في متصفح Google Chrome.
• اضبط وضع المطور عن طريق تحديد مربع Developer في الزاوية العلوية اليمنى.
• انقر فوق "تحميل ملحق غير مضغوط" ، وسترى ملفك مع خيار تحديده.
• إذا كان الملحق الخاص بك صالحًا ، فيجب تحميله على الفور عند تحديده.
• إذا كان غير صالح ، سترى رسالة خطأ.

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

بعد ذلك ، تأكد من تحديد المربع "ممكّن" حتى تتمكن من رؤيته قيد التشغيل.

الخطوة 5: أضف المنطق إلى العمل.

من القواعد الأساسية الجيدة وضع استدعاءات واجهة برمجة التطبيقات في البرنامج النصي في الخلفية ومعالجة DOM في النص البرمجي للمحتوى. دعنا نرى مثالاً على إضافة برنامج نصي في الخلفية:

1. قم بإنشاء ملف يسمى background.js داخل دليل الامتدادات
2. قم بتسجيل نص الخلفية في البيان

{

"الاسم": "مثال البدء" ،

"الوصف": "إنشاء ملحق!" ،

"الإصدار": "1.0" ،

"manifest_version": 3 ،

"معرفتي": {

"service_worker": "background.js"

}

}

يمكن لمتصفح Chrome فحص الملف للحصول على إرشادات إضافية عند إعادة تحميل الامتداد ، مثل الأحداث.

1. أضف البرنامج النصي. سيكون مختلفًا وفقًا للغرض من التمديد الخاص بك.

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

// background.js

دعونا اللون = '# 3aa757' ؛

chrome.runtime.onInstalled.addListener (() => {

chrome.storage.sync.set ({color}) ؛

console.log ('تعيين لون الخلفية الافتراضي إلى٪ cgreen'، `color: $ {color}`)؛

}) ؛

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

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

<! DOCTYPE html>

<html>

<head>

<link rel = ”stylesheet” href = ”button.css”>

</head>

<الجسم>

<button id = ”changeColor”> </button>

</body>

</html>

ما هي متطلبات الأيقونة؟ للصور ، 16 × 16 و 32 × 32 بكسل. يجب أن تكون جميع الرموز مربعة.

لا تنس إضافة البرامج النصية المنطقية الخاصة بك حتى يعرف الملحق الخاص بك ما يجب القيام به. على سبيل المثال ، يمكنك إضافته في نهاية البرنامج النصي popup.js.

// عند النقر فوق الزر ، قم بحقن setPageBackgroundColor في الصفحة الحالية

changeColor.addEventListener (“click” ، async () => {

يترك

= await chrome.tabs.query ({active: true، currentWindow: true})؛

chrome.scripting.executeScript ({

الهدف: {tabId: tab.id}،

الوظيفة: setPageBackgroundColor ،

}) ؛

}) ؛

// سيتم تنفيذ نص هذه الوظيفة كبرنامج نصي للمحتوى داخل ملف

// الصفحه الحاليه

وظيفة setPageBackgroundColor () {

chrome.storage.sync.get (“color”، ({color}) => {

document.body.style.backgroundColor = color ؛

}) ؛

}

وظيفة setPageBackgroundColor () {

chrome.storage.sync.get (“color”، ({color}) => {

document.body.style.backgroundColor = color ؛

}) ؛

الخطوة 6: جرب الامتداد الخاص بك

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

الخطوة 7: أرسل الامتداد الخاص بك إلى سوق Chrome الإلكتروني

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

في متجر مطوري Chrome ، انقر على عنصر جديد ، ثم أسقط ملف المشروع في برنامج التحميل.

سيطرح Chrome بعض الأسئلة لطلب معلومات حول أذوناته وسبب الحاجة إليها.

أمثلة على ملحقات جوجل كروم

يبدو أن هناك امتدادًا لكل شيء. فيما يلي بعض من أكثرها فائدة:

• حفظ في Drive
  يقوم هذا الامتداد بتثبيت رمز صغير أعلى المتصفح. سيرسل كل ما تتصفحه إلى حساب محرك الأقراص الخاص بك حتى تتمكن من إلقاء نظرة عليه لاحقًا. إنه يعمل عن طريق التقاط لقطات الشاشة أو حفظ الصور أو الصوت أو الفيديو.
• فرز
  يمنح هذا المكون الإضافي المستخدمين طريقة لتنظيم صناديق البريد الوارد الخاصة بهم وتحديد أولويات الأشياء الأكثر أهمية بالنسبة لهم. يتكامل مع Gmail ويتيح لك سحب الرسائل وإفلاتها في أعمدة مخصصة.
• HTTPS في كل مكان
  يعزز هذا الامتداد أمان تصفحك عن طريق تغيير أي موقع ويب من http إلى HTTPS آمنًا ، وبالتالي فهو مشفر وآمن.
• لا يهمني ملفات تعريف الارتباط
  مع كل موقع يطلب منك الموافقة على ملفات تعريف الارتباط ، يعد هذا الامتداد منقذًا. قد لا يبدو الأمر كثيرًا ولكنه سيضغط على زر الموافقة في النوافذ المنبثقة لملفات تعريف الارتباط. سيوفر لك الوقت ويسرع من إنتاجيتك.
• اختبار السرعة
  
  يتيح لك هذا الامتداد المفيد التحقق من سرعة الاتصال أثناء التنقل. باستخدام إصدار سطح المكتب والجوال ، يمكنك التأكد من أن اتصالك في أعلى مستوى قبل تنزيل مرفق كبير أو بث مقطع فيديو.
  بنقرة واحدة ، سيقوم Speedtest بإجراء اختبار اتصال سريع على الشبكة التي تستخدمها.

ما الذي يمكن أن يفعله امتداد Chrome؟

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

تعمل إضافة Chrome باستخدام إجراءات الصفحة أو إجراءات المتصفح:

إجراء الصفحة : هذا إجراء خاص بصفحات معينة.

إجراء المتصفح : مناسب بغض النظر عن الصفحة التي تتصفحها.

تأكد من أن واجهة المستخدم سهلة الاستخدام وسهلة الفهم. سيكون التسليم النهائي عبارة عن حزمة يمكن لمستخدمها تنزيلها وتثبيتها.

5 طرق مجربة ومختبرة لكسب المال من الامتداد الخاص بك

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

1. الإعلانات داخل التطبيق

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

يقوم مستخدمو CodeFuel بزيادة عائداتهم وتبسيط تسييلهم لأن الخدمة تعرض الإعلانات ذات الصلة بقصد المستخدم.

2. البحث عن الإعلانات

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

3. المدفوعات والمشتريات داخل التطبيق

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

4. ترقيات مدفوعة

وبالمثل ، في هذا النموذج ، يتم تقديم الامتداد الأساسي مجانًا ، ولكن إذا كان المستخدم يريد إصدارًا متميزًا ، فيجب عليه الدفع مقابل الإصدار الذي تمت ترقيته. هذا نموذج شائع للغاية ، تستخدمه الامتدادات الشائعة مثل Grammarly.

5. فريميوم

ربما يكون هذا هو النموذج الأكثر شيوعًا لتحقيق الدخل من الإضافات والتطبيقات. مع freemium ، تقدم التمديد مجانًا. كيف تكسب المال منه؟ لديك خياران:

1. يمكنك تقديم نسخة تجريبية مجانية لفترة محدودة من الوقت.
2. يمكنك تقديم إصدار أساسي مجاني بميزات محدودة.

إذا اخترت هذا النموذج ، ففكر في حدوده منذ أن أوقفت Google الإضافات المدفوعة.

أفضل ملحقات أمان جوجل كروم:

يستخدم معظم الأشخاص Chrome في كل شيء بدءًا من التسوق والبحث وحتى إدارة حساباتهم المالية. يجب حماية كل هذه البيانات الحساسة. هناك العديد من الملحقات التي يمكن أن تجعل هذه المعلومات آمنة.

1. برنامج Avast Online Security

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

2. طمس

يتوفر عدد من مديري كلمات المرور ، وهو أمر لا بد منه لضمان بقاء جميع بيانات الاعتماد الخاصة بك آمنة. تعد Blur واحدة من أكثر الطرق أمانًا ، نظرًا لميزات الأمان الإضافية الخاصة بها.

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

3. انقر وتنظيف

إنها أداة تنظيف تمسح كل آثار نشاطك عبر الإنترنت بنقرة واحدة . سيؤدي زر الامتداد إلى مسح جميع محفوظات الإنترنت وملفات تعريف الارتباط وذاكرة التخزين المؤقت وعناوين URL المحفوظة وقواعد بيانات SQL على الويب وحتى الملفات المؤقتة. يحتوي Click and Clean على برنامج مكافحة برامج ضارة مضمّن ويمكن تخصيصه حتى لحذف أنواع معينة من البيانات.

4. زر الذعر

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

5. Ghostery

إذا كنت ترغب في حماية خصوصيتك عبر الإنترنت أو التحكم في أجهزة التتبع ، فيمكن أن يكون هذا الامتداد هو الحل. يمنحك Ghostery التحكم في أجهزة التتبع حتى تتمكن من تحديد أي منها تريد حظره أو إلغاء حظره. كما أنه يمكّنك من منع تعقب نوع معين.

كيف يمكن أن يساعدك CodeFuel في زيادة عائد التمديد إلى الحد الأقصى

ارتقِ بتحويل الامتداد إلى المستوى التالي باستخدام CodeFuel. يوفر نظامنا الأساسي الكامل لتحقيق الدخل تسييلًا على أساس النية لممتلكاتك الرقمية ، بما في ذلك امتدادات المتصفح.

يستفيد الحل من التعلم الآلي لخدمة المستخدمين إعلانات تسوق وإعلانات نصية ذات صلة عالية ، ومخصصة وفقًا للقصد. بخلاف الحلول الأخرى ، يتيح لك CodeFuel المرونة في العمل مع شبكات إعلانية متعددة مثل Bing و GoogleAdSense. ابدأ في تعظيم العائد من التمديد مع CodeFuel اليوم.

كيفية إصلاح امتداد Chrome إذا تجمد؟

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

تسرد تعليمات Chrome عددًا من نصائح تحري الخلل وإصلاحه:

• أغلق علامات التبويب والتطبيقات الأخرى
• أعد تشغيل المتصفح
• تحقق من وجود برامج ضارة
• اختبر الشبكة للتعرف على المشكلات
• إذا كانت إضافتك تتسبب في تعارض مع Chrome ، فاتبع الإرشادات التالية:

1. في أعلى اليسار ، انقر على المزيد إعدادات.
2. في الجزء السفلي ، انقر فوق " خيارات متقدمة ".
3. انقر فوق إعادة تعيين وتنظيف قم بتحديث أو إزالة التطبيقات غير المتوافقة.
   إذا كنت لا ترى هذا الخيار ، فلا يوجد تطبيق مشكلة.
4. حدد ما إذا كنت تريد تحديث أو إزالة كل تطبيق من القائمة.
   افتح متجر تطبيقات الكمبيوتر الخاص بك وتحقق من وجود تحديث.

التعليمات