كيفية إنشاء ونشر امتداد Chrome في 20 دقيقة

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

ما هو امتداد كروم؟

تسمح لك ملحقات Chrome بإضافة وظائف إلى متصفح الويب Chrome دون الغوص بعمق في التعليمات البرمجية الأصلية. هذا رائع لأنه يمكنك إنشاء امتدادات جديدة لـ Chrome باستخدام التقنيات الأساسية التي يعرفها مطورو الويب - HTML و CSS وجافا سكريبت. إذا سبق لك إنشاء صفحة ويب ، فستتمكن من إنشاء امتداد أسرع مما يمكنك تناول الغداء. الشيء الوحيد الذي تحتاج إلى تعلمه هو كيفية إضافة بعض الوظائف إلى Chrome من خلال بعض واجهات برمجة تطبيقات JavaScript التي يعرضها Chrome.

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

ماذا تريد ان تبني؟

قبل أن تبدأ ، يجب أن تكون لديك فكرة تقريبية عما تريد بناءه. ليس من الضروري أن تكون فكرة جديدة رائدة ، يمكننا فقط القيام بذلك من أجل المتعة. في هذه المقالة ، سأخبرك بفكرتي وكيف قمت بتطبيقها في امتداد Chrome.

الخطة

لقد استخدمت امتداد Unsplash Chrome لفترة من الوقت مما يتيح لي الحصول على صور خلفية رائعة لـ Unsplash في علامة التبويب الافتراضية الخاصة بي. لقد استبدلت لاحقًا بامتداد Muzli Chrome الذي يحول علامة التبويب الافتراضية إلى موجز لأخبار التصميم واللقطات من جميع أنحاء الويب.

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

الخطوة 1: إعداد الأمور

تتمثل الخطوة الأولى في إنشاء ملف بيان باسم manifest.json. هذا ملف بيانات وصفية بتنسيق JSON يحتوي على خصائص مثل اسم الملحق والوصف ورقم الإصدار وما إلى ذلك. في هذا الملف نخبر Chrome بما سيفعله الامتداد والأذونات التي يتطلبها.

بالنسبة لملحق الفيلم ، نحتاج إلى الحصول على إذن للتحكم في activeTab ، لذا manifest.jsonيبدو ملفنا على النحو التالي :

{ “manifest_version”: 2, “name”: “RaterFox”, “description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”, “version”: “1”, “author”: “Jake Prins”,
"browser_action": { "default_icon": "tab-icon.png", “default_title”: “Have a good day” },
“chrome_url_overrides” : { “newtab”: “newtab.html”},
 “permissions”: [“activeTab”]}

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

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

“browser_action”: { “default_popup”: “popup.html”, },

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

الخطوة 2: اختبر ما إذا كان يعمل

الخطوة التالية هي إنشاء newtab.htmlالملف ووضع " Hello world":

  Test   

Hello World!

لاختبار ما إذا كان يعمل أم لا ، قم بزيارة chrome://extensionsالمتصفح الخاص بك وتأكد من تحديد خانة الاختيار وضع المطور في الزاوية اليمنى العليا.

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

الخطوة 3: جعل الأشياء جميلة

الآن بعد أن عملنا على أول ميزة لدينا ، حان الوقت لجعلها لطيفة. يمكننا ببساطة تصميم علامة تبويب جديدة عن طريق إنشاء main.cssملف في دليل الامتداد الخاص بنا وتحميله في newtab.htmlملفنا. الأمر نفسه ينطبق عند تضمين ملف JavaScript لأي وظيفة نشطة ترغب في تضمينها. بافتراض أنك قمت بإنشاء صفحة ويب من قبل ، يمكنك الآن استخدام سحرك لتظهر للمستخدمين ما تريد.

الانتهاء من الخطة

كل ما احتاجه لإنهاء امتداد الفيلم هو HTML و CSS وجافا سكريبت ، لذلك لا أعتقد أنه من المناسب التعمق في الكود ، لكنني أرغب في استعراضه بسرعة.

هذا ما فعلته:

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

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

النتائج

الآن مع هذا manifest.jsonالملف الصغير وبعض HTML و CSS و JavaScript ، تبدو كل علامة تبويب جديدة تفتحها أكثر إثارة للاهتمام:

الخطوة 4: انشر الامتداد الخاص بك

عندما يبدو امتداد Chrome الأول لطيفًا ويعمل كما ينبغي ، فقد حان الوقت لنشره في متجر Chrome. ما عليك سوى اتباع هذا الرابط للانتقال إلى لوحة تحكم سوق Chrome الإلكتروني (سيُطلب منك تسجيل الدخول إلى حسابك في Google إذا لم تكن كذلك). ثم انقر فوق Add new itemالزر ، واقبل الشروط وستنتقل إلى الصفحة حيث يمكنك تحميل الامتداد الخاص بك. الآن قم بضغط المجلد الذي يحتوي على مشروعك وقم بتحميل ملف ZIP هذا.

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

Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the Preview changes button. When you’re happy with the result, hit Publish changesand that’s it, your done!

Now go to the Chrome Web Store and search for your extension by its title (It might take some time before it’s up there). If you’re interested, you can find mine here.

The only thing left to do is get some users. So you might want to share a post about your life changing Chrome extension on social media. Tell your friends to check it out. Add it to ProductHunt. And don’t forget to share your project here in the comments. I’m curious to see what you came up with!

Conclusion

As a web developer, it’s very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript and a basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within just 20 minutes. Building an extension that’s new, worthwhile or looks nice will take some more time. But it’s all up to you!

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

فما تنتظرون؟ حان الوقت لبدء العمل على امتداد Chrome الخاص بك وتحويل فكرتك إلى حقيقة.

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

هل لديك أسئلة أو ملاحظات؟ اسمحوا لي أن نعرف في التعليقات!

شكرا للقراءة! أتمنى أن تكون المعلومات مفيدة. تابعوني على Medium لمزيد من المقالات المتعلقة بالتكنولوجيا أو على Twitter و Instagramjakeprins_nl.