السلام عليكم ورحمة الله وبركاته
اهلا بكم رواد واعضاء منتدى ستار تايمز
اما بعد :
سنقدم لكم اليوم شرح خاص بعمل إضافة لمتصفح قووقل كروم Google Chrome Extension بشكل سريع وبسيط
الإضافة ستكون وظيفتها وهي مدير المهام (إضافة، تعديل، عرض، حذف المهمات.)
قبل البدأ في الشرح
كل مبتدئ لا يعرف كيف يتم عمل إضافات متصفح قووقل كروم
يجب عليه زيارة هذا الموضوع وبعد ذلك الرجوع لتطبيق درس اليوم
شرح بعض مكونات إضافات متصفح كرووم Chrome Extensions مع مثال بسيط
نبدأ بعمل مجلد جديد نقوم بتسميته (Task Manager)
ونبدأ بالعمل عليه في محرر الأكواد البرمجية
ونقوم بفتح لمفات جديد
manifest.json
popup.html
popup.js
popup.css
وإضافة أيقونة
يمكنك إختيار هذه الصورة لتجربة الامر
icon16.png
المجلد سيكون على الشكل التالي في محرر الأكواد
البداية بالعمل على ملف manifest.json
{
"manifest_version": 3,
"name": "Task Manager",
"de--SS--ion": "A Chrome extension to manage tasks.",
"version": "1.0",
"permissions": ["storage"],
"action": {
"default_popup": "popup.html"
},
"icons": {
"16": "icon16.png"
}
}
تم اختيار نسخة التالتة من manifest تم تسمية الإضافة (Task Manager) تم منح وصف خاص بها الإضافة نسخة رقم 1 تم تحديد (Storage) أو التخزين وهي الخاصية الوحيدة التي سنعمل عليها في هذه الإضافة لكي نقوم بتخزين المهام التي سنقوم بإضافتها.
ويجب فهمها على هذا الشكل … الإضافة تطلب السماح من المتصفح لكي يجعلها تستخدم خاصية تخزين البيانات
فالعضو رغم حذفه للكوكيز الخاصة بالمتصفح فلن يتم حذف تلك البيانات (المهام التي أضافها العضو)
يتم حذف المهام تلقائيا عندما يقوم العضو بحذف ملف التخزين أو إزالة تثبيت الإضافة.
كالعادة action وضعنا فيها ملف popup.html الذي ستكون مهمته عرض الكتابة والأماكن التي سيكتب فيها العضو مهماته والأزرار الخاص بحفظ المهمة. الأيقونة نحدد إسمها في خاصية icons
ملف popup.html
هذا الملف وضعنا فيه عنوان الإضافة وقمنا بوضع input وهي مكان الذي سيكتب فيه العضو املهمة التي يريد إدخالها
بالإضافة الى وضع زر حفظ المهمة
ul الموجود فيها tasklist وهي المكان الذي سيتم عرض فيه كل المهمات التي قمت بإضافتها
ستظهر لك كأنها فارغة لأنه سيتم التعامل معها من خلال ملف popup.js عن طريق الجافاسكريبت
ولذلك تم ربط هذا الملف مع ملف الجافاسكريبت الذي سيقوم بعرض وتخزين المهمات
الملف popup.html سيتعامل مع تلك الأكواد عن طريق الكود الموجود في السطر الأخير --SS--
popup.css
هذا الملف هو المسؤول عن تزيين وتصميم الواجهة الخاصة بالإضافة
قمنا بعمل أكواد تقوم بتزيين الأزرار وتكبير الكتابة والتلاعب بحجم الواجهة
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');
chrome.storage.local.get('tasks', (result) => {
const tasks = result.tasks || [];
renderTasks(tasks);
});
addTaskBtn.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText) {
chrome.storage.local.get('tasks', (result) => {
const tasks = result.tasks || [];
tasks.push({ text: taskText, completed: false });
chrome.storage.local.set({ tasks }, () => {
renderTasks(tasks);
taskInput.value = ''; // Clear input field
});
});
}
});
function renderTasks(tasks) {
taskList.innerHTML = '';
tasks.forEach((task, index) => {
const listItem = document.createElement('li');
// Task text
const taskSpan = document.createElement('span');
taskSpan.textContent = task.text;
taskSpan.style.textDecoration = task.completed ? 'line-through' : 'none';
taskSpan.addEventListener('click', () => toggleComplete(index));
// Edit button
const editBtn = document.createElement('button');
editBtn.textContent = 'تعديل';
editBtn.classList.add('edit');
editBtn.addEventListener('click', () => editTask(index));
// Delete button
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'حذف';
deleteBtn.classList.add('delete');
deleteBtn.addEventListener('click', () => deleteTask(index));
listItem.appendChild(taskSpan);
listItem.appendChild(editBtn);
listItem.appendChild(deleteBtn);
taskList.appendChild(listItem);
});
}
function toggleComplete(index) {
chrome.storage.local.get('tasks', (result) => {
const tasks = result.tasks || [];
tasks[index].completed = !tasks[index].completed;
chrome.storage.local.set({ tasks }, () => {
renderTasks(tasks);
});
});
}
function editTask(index) {
const newTaskText = prompt("تعديل مهمة");
if (newTaskText) {
chrome.storage.local.get('tasks', (result) => {
const tasks = result.tasks || [];
tasks[index].text = newTaskText;
chrome.storage.local.set({ tasks }, () => {
renderTasks(tasks);
});
});
}
}
function deleteTask(index) {
chrome.storage.local.get('tasks', (result) => {
const tasks = result.tasks || [];
tasks.splice(index, 1);
chrome.storage.local.set({ tasks }, () => {
renderTasks(tasks);
});
});
}
هذا الملف هو الذي يقوم بالتعامل مع كل ماهو يحتاج للبرمجة والامور المنطقية
مثل عرض المهام وحفظها وتعديلها…
قمنا بعمل توابت من اجل الازرار والقائمة التي سنقوم بعرض فيها مهمات
chrome.storage .local .get
وظيفتها هي جلب البيانات من المكان المخصص لتخزين البيانات في متصفح كروم وعرضها لنا في الواجهة
addTaskBtn.addEventListener
وهي خاصة بإضافة المهمات وتخزينها وتقوم بتحديث الواجهة من أجل عرض المهمة في القائمة.
editTask
تقوم بتعديل على المهمة
deleteTask
تقوم بحذف المهمة
كما تلاحظ أن هذا الملف هو المسؤول عن إتمام عملية إضافة وتخزين المهمات عندما يقوم العضو بالضغط على زر الإدخال.
طريقة تثبيت الإضافة في متصفح كروم ستجدها في هذا الموضوع
لأن سبق وأن شرحت كيف يمكن تثبيت الإضافات…
شرح بعض مكونات إضافات متصفح كرووم Chrome Extensions مع مثال بسيط
يمكنك تحميل المجلد الخاص بهذه الإضافة وتثبيته على متصفحك من أجل تجربة وإستخدام الإضافة أو مراجعة جميع النصوص البرمجية التي عملنا بها اليوم.
المجلد سليم ولا يوجد اي فيروسات…
https://drive.google.com/file/d/11UyvvjWWtwKl4p7vGZ3cHV2QZ-UiidxW/
الإضافة مجانية يمكنكم التعديل عليها وتطويرها أكثر مع تعزيز الحماية فيها…
بارك الله فيكم على متابعة الموضوع
نلتقي قريبا ان شاء الله…
