شرح كيفية برمجة إضافة بسيطة للمتصفح Google Chrome

زكريـاء · 2011-11-24, 14:46

السلام عليكم و رحمة الله تعالى و بركاته
بسم الله الرحمـــــن الرحيـــــــــــــــــــــم

رابط الموضوع الأصلي : https://djazayri.blogspot.com/2011/02/google-chrome.html (الموضوع منقول من مدونتي و أنا كاتبه الأصلي )

مقدمة :
الإضافات في Google Chrome هي برامج صغيرة بإمكانها تغيير أو إضافة وظائف جديدة للمتصفح ، يتم كتابتها بتقنيات الويب المعروفة مثل الـ HTML ، JavaScript و الـ CSS و الإضافة عبارة عن مجموعة ملفات يتم تجميعها لاحقا في حزمة واحدة لتقديمها للمستعمل النهائي ، و فيما يلي شرح سريع لكيفية برمجة إضافة بسيطة ، بعد تثبيتها ستظهر أيقونة جديدة في المتصفح ، عند الضغط عليها يتم فتح علامة تبويب جديدة و تحميل مقالة عربية عشوائية على موقع ويكيبيديا

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

كود:

{
    "name": "تحميل مقالة عشوائية على ويكيبيديا",
    "version": "1.0",
    "description": "تحميل مقالة عشوائية باللغة العربية على موقع ويكيبيديا في علامة تبويب جديدة",
    "browser_action": { "default_icon": "icon19.png" },
    "icons": { "48": "icon48.png", "128": "icon128.png" },
    "background_page": "background.html"
}

و الثاني بالإسم background.html و محتواه كالآتي :

كود:

<script>
    chrome.browserAction.onClicked.addListener(function(tab) {
        chrome.tabs.create({url:'https://ar.wikipedia.org/wiki/خاص:عشوائي'});
    });
</script>

لم يبقى سوى تحميل الأيقونات الثلاثة أدناه و وضعها بالمجلد لتكون أتممت برمجة أول إضافة لك
الأيقونة الأولى :

الأيقونة الثانية :

الأيقونة الثالثة :

التثبيت :
أما طريقة تثبيت الإضافة تتم كما يلي :
أدخل إلى صفحة إدارة الإضافات من هنا :chrome://settings/extensionSettings
شغّل وضع المطوّر

ثم إضغط زر

إختر مجلد الإضافة و اضغط " OK "

إن تمّ التثبيت بنجاح ستظهر الأيقونة كما يلي :

ما عليك سوى الضغط عليها و تذوق ثمرة جهدك.

شكرًا على القراءة

، أخوكم في الله زكرياء