آموزش ساخت افزونه کروم با Html , CSS و javascrip

ایجاد یک برنامه افزودنی کروم می تواند یک پروژه آموزشی مفید باشد، زیرا به شما امکان می دهد مهارت های خود را در توسعه وب تمرین کنید و درک بهتری از نحوه کار افزونه های کروم داشته باشید.

در حالی که ایده ایجاد یک افزونه ممکن است در ابتدا پیچیده به نظر برسد، زمانی که ساختار اصلی را درک کنید، فرآیند بسیار ساده تر می شود.

افزونه‌های کروم برنامه‌های کوچکی هستند که می‌توانند عملکرد مرورگر را سفارشی کرده و بهبود بخشند. آنها با استفاده از فناوری های وب مانند HTML، CSS، و جاوا اسکریپت ساخته شده اند و می توانند به راحتی از فروشگاه وب Chrome نصب شوند.

در این مقاله ، شما را با نحوه ایجاد یک افزونه Color Picker کاربردی برای کروم آشنا خواهیم کرد.

در پایان این مقاله ، افزونه‌ای خواهید داشت که به کاربران امکان می‌دهد به راحتی هر رنگی را روی صفحه انتخاب کنند، تاریخچه رنگ‌های انتخاب شده را مشاهده کنند و با یک کلیک آن‌ها را کپی یا پاک کنند.

مراحل ایجاد برنامه افزودنی Color Picker Chrome

ما یک افزونه انتخابگر رنگ کروم را با استفاده از HTML، CSS و جاوا اسکریپت در پنج مرحله ساده ایجاد خواهیم کرد:

راه اندازی پروژه
ایجاد پسوند
ایجاد فایل مانیفست
تست و رفع اشکال
انتشار پسوند

1. راه اندازی پروژه

در مرحله اولیه یک دایرکتوری جدید برای افزونه خود ایجاد می کنیم.

هر نامی که میخواین رو میتونید به این دایروکتوری بدین و فایل های index.html، style.css و script.js را داخل آن بسازید.

این فایل ها حاوی کدهای HTML، CSS و جاوا اسکریپت برای پسوند شما خواهند بود.

پس از ساختن این فایل ها، می توانید به مرحله بعدی ایجاد افزونه انتخابگر رنگ خود بروید.

2. ایجاد پسوند

در مرحله دوم، رابط کاربری را برای extension انتخابگر رنگ خود طراحی کرده و با استفاده از HTML و CSS به آن استایل می دهیم.

پس از تکمیل رابط کاربری، از جاوا اسکریپت برای افزودن قابلیت انتخاب رنگ به برنامه افزودنی استفاده خواهیم کرد.

در فایل index.html، کد HTML زیر را برای ایجاد ساختار اصلی پسوند اضافه کنید:

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="popup">
      <div class="picker">
        <button id="color-picker">Pick Color</button>
      </div>
      <div class="picked-colors hide">
        <header>
          <p class="title">Picked colors</p>
          <span class="clear-all">Clear All</span>
        </header>
        <ul class="all-colors"></ul>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<button id="color-picker">Pick Color</button>

</div>

<p class="title">Picked colors</p>

<span class="clear-all">Clear All</span>

</header>

</div>

</body>

</html>

در فایل style.css، کد CSS زیر را اضافه کنید تا استایل ها را اضافه کنید و پسوند را از نظر بصری جذاب کنید.

در صورت تمایل می توانید رنگ، پس زمینه، فونت و اندازه افزونه را در این کد تغییر دهید.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.popup {
  width: 350px;
  background: #fff;
}
.popup :where(.picker, header, .all-colors) {
  display: flex;
  align-items: center;
}
.popup .picker {
  padding: 30px 0;
  background: #E3F2FD;
  justify-content: center;
}
.picker #color-picker {
  border: none;
  outline: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 5px;
  background: #5372F0;
  transition: 0.3s ease;
}
#color-picker:hover {
  background: #2c52ed;
}
.picked-colors {
  margin: 10px 15px;
}
.picked-colors header {
  justify-content: space-between;
}
header .title {
  font-size: 1rem;
}
header .clear-all {
  cursor: pointer;
  font-size: 0.9rem;
  color: #5372F0;
}
header .clear-all:hover {
  color: #143feb;
}
.picked-colors.hide {
  display: none;
}
.picked-colors .all-colors {
  flex-wrap: wrap;
  list-style: none;
  margin: 10px 0 15px;
}
.all-colors .color {
  display: flex;
  cursor: pointer;
  margin-bottom: 10px;
  width: calc(100% / 3);
}
.all-colors .rect {
  height: 21px;
  width: 21px;
  display: block;
  margin-right: 8px;
  border-radius: 5px;
}
.all-colors .color span {
  font-size: 0.96rem;
  font-weight: 500;
  text-transform: uppercase;
  font-family: "Open sans";
}

/* Import Google font - Poppins */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Poppins", sans-serif;

}

.popup {

width: 350px;

background: #fff;

}

.popup :where(.picker, header, .all-colors) {

display: flex;

align-items: center;

}

.popup .picker {

padding: 30px 0;

background: #E3F2FD;

justify-content: center;

}

.picker #color-picker {

border: none;

outline: none;

color: #fff;

font-size: 1rem;

cursor: pointer;

padding: 10px 20px;

border-radius: 5px;

background: #5372F0;

transition: 0.3s ease;

}

#color-picker:hover {

background: #2c52ed;

}

.picked-colors {

margin: 10px 15px;

}

.picked-colors header {

justify-content: space-between;

}

header .title {

font-size: 1rem;

}

header .clear-all {

cursor: pointer;

font-size: 0.9rem;

color: #5372F0;

}

header .clear-all:hover {

color: #143feb;

}

.picked-colors.hide {

display: none;

}

.picked-colors .all-colors {

flex-wrap: wrap;

list-style: none;

margin: 10px 0 15px;

}

.all-colors .color {

display: flex;

cursor: pointer;

margin-bottom: 10px;

width: calc(100% / 3);

}

.all-colors .rect {

height: 21px;

width: 21px;

display: block;

margin-right: 8px;

border-radius: 5px;

}

.all-colors .color span {

font-size: 0.96rem;

font-weight: 500;

text-transform: uppercase;

font-family: "Open sans";

}

در فایل script.js، کد جاوا اسکریپت زیر را برای افزودن قابلیت به extension انتخابگر رنگ اضافه کنید.

با خواندن نظرات هر خط جاوا اسکریپت می توانید در مورد استفاده از یک خط خاص اطلاعات کسب کنید.

const colorPickerBtn = document.querySelector("#color-picker");
const clearAll = document.querySelector(".clear-all");
const colorList = document.querySelector(".all-colors");
const pickedColors = JSON.parse(localStorage.getItem("picked-colors") || "[]");

// Copying the color code to the clipboard and updating the element text
const copyColor = (elem) => {
    elem.innerText = "Copied";
    navigator.clipboard.writeText(elem.dataset.color);
    setTimeout(() => elem.innerText = elem.dataset.color, 1000);
}

const showColor = () => {
    if(!pickedColors.length) return; // Returning if there are no picked colors
    colorList.innerHTML = pickedColors.map(color => `
        <li class="color">
            <span class="rect" style="background: ${color}; border: 1px solid ${color == "#ffffff" ? "#ccc": color}"></span>
            <span class="value hex" data-color="${color}">${color}</span>
        </li>
    `).join(""); // // Generating li for the picked color and adding it to the colorList
    document.querySelector(".picked-colors").classList.remove("hide");

    // Add a click event listener to each color element to copy the color code
    document.querySelectorAll(".color").forEach(li => {
        li.addEventListener("click", e => copyColor(e.currentTarget.lastElementChild));
    });
}
showColor();

const activateEyeDropper = () => {
    document.body.style.display = "none";
    setTimeout(async () => {
        try {
            // Opening the eye dropper and getting the selected color
            const eyeDropper = new EyeDropper();
            const { sRGBHex } = await eyeDropper.open();
            navigator.clipboard.writeText(sRGBHex);

            // Adding the color to the list if it doesn't already exist
            if(!pickedColors.includes(sRGBHex)) {
                pickedColors.push(sRGBHex);
                localStorage.setItem("picked-colors", JSON.stringify(pickedColors));
                showColor();
            }
        } catch (error) {
            alert("Failed to copy the color code!");
        }
        document.body.style.display = "block";
    }, 10);
}

// Clearing all picked colors, updating local storage, and hiding the colorList element
const clearAllColors = () => {
    pickedColors.length = 0;
    localStorage.setItem("picked-colors", JSON.stringify(pickedColors));
    document.querySelector(".picked-colors").classList.add("hide");
}

clearAll.addEventListener("click", clearAllColors);
colorPickerBtn.addEventListener("click", activateEyeDropper);

const colorPickerBtn = document.querySelector("#color-picker");

const clearAll = document.querySelector(".clear-all");

const colorList = document.querySelector(".all-colors");

const pickedColors = JSON.parse(localStorage.getItem("picked-colors") || "[]");

// Copying the color code to the clipboard and updating the element text

const copyColor = (elem) => {

elem.innerText = "Copied";

navigator.clipboard.writeText(elem.dataset.color);

setTimeout(() => elem.innerText = elem.dataset.color, 1000);

}

const showColor = () => {

if(!pickedColors.length) return; // Returning if there are no picked colors

colorList.innerHTML = pickedColors.map(color => `

<span class="value hex" data-color="${color}">${color}</span>

</li>

`).join(""); // // Generating li for the picked color and adding it to the colorList

document.querySelector(".picked-colors").classList.remove("hide");

// Add a click event listener to each color element to copy the color code

document.querySelectorAll(".color").forEach(li => {

li.addEventListener("click", e => copyColor(e.currentTarget.lastElementChild));

});

}

showColor();

const activateEyeDropper = () => {

document.body.style.display = "none";

setTimeout(async () => {

try {

// Opening the eye dropper and getting the selected color

const eyeDropper = new EyeDropper();

const { sRGBHex } = await eyeDropper.open();

navigator.clipboard.writeText(sRGBHex);

// Adding the color to the list if it doesn't already exist

if(!pickedColors.includes(sRGBHex)) {

pickedColors.push(sRGBHex);

localStorage.setItem("picked-colors", JSON.stringify(pickedColors));

showColor();

}

} catch (error) {

alert("Failed to copy the color code!");

}

document.body.style.display = "block";

}, 10);

}

// Clearing all picked colors, updating local storage, and hiding the colorList element

const clearAllColors = () => {

pickedColors.length = 0;

localStorage.setItem("picked-colors", JSON.stringify(pickedColors));

document.querySelector(".picked-colors").classList.add("hide");

}

clearAll.addEventListener("click", clearAllColors);

colorPickerBtn.addEventListener("click", activateEyeDropper);

3. ایجاد یک فایل مانیفست

در مرحله سوم یک فایل manifest.json برای پسوند خود ایجاد می کنیم. این فایل بخشی ضروری از هر برنامه extension کروم است و به عنوان یک فایل پیکربندی برای افزونه عمل می کند. حاوی اطلاعاتی در مورد برنامه افزودنی مانند نام، توضیحات، نسخه، نمادها و مجوزهای آن است.

برای ایجاد فایل manifest.json، یک فایل جدید در پوشه پروژه ایجاد کنید و نام آن را manifest.json بگذارید. سپس کد زیر را به فایل اضافه کنید:

{
    "manifest_version": 3,
    "name": "Color Picker",
    "description": "A simple color picker extension. Easily pick any color on the screen, view a history of picked colors, and copy or clear them with a single click.",
    "version": "1.0",
    "action": {
        "default_popup": "index.html"
    },
    "icons": {
        "16": "icons/icon16.png",
        "32": "icons/icon32.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    }
}

{

"manifest_version": 3,

"name": "Color Picker",

"description": "A simple color picker extension. Easily pick any color on the screen, view a history of picked colors, and copy or clear them with a single click.",

"version": "1.0",

"action": {

"default_popup": "index.html"

"icons": {

"16": "icons/icon16.png",

"32": "icons/icon32.png",

"48": "icons/icon48.png",

"128": "icons/icon128.png"

}

می توانید مجموعه ای از آیکون ها را برای extension انتخابگر رنگ از این لینک Google Drive دانلود کنید. پس از دانلود، نام پوشه را به آیکون تغییر دهید و آن را به فهرست پروژه برنامه extension خود اضافه کنید.

4. تست و اشکال زدایی

در مرحله چهارم، برنامه extension خود را از فهرست محلی خود برای آزمایش و رفع اشکال در کروم بارگیری می کنیم.

برای انجام این کار؛ این موارد را دنبال کنید:

کروم را باز کنید و به این URL بروید: chrome://extensions.
ضامن «حالت برنامه‌نویس» را در گوشه سمت راست بالای صفحه فعال کنید.
روی دکمه «بارگیری بدون بسته‌بندی» کلیک کنید و فهرست پروژه برنامه افزودنی خود را انتخاب کنید.
برنامه افزودنی شما اکنون باید بارگیری شود و در صفحه افزونه های Chrome ظاهر شود.

برای آزمایش برنامه extension ، روی آیکون برنامه extension در نوار ابزار کروم کلیک کنید و مطمئن شوید که رابط کاربری انتخابگر رنگ همانطور که انتظار می رود ظاهر می شود و عملکرد به درستی کار می کند.

اگر با مشکل یا خطا مواجه شدید، می‌توانید از کنسول Chrome DevTools برای اشکال‌زدایی افزونه استفاده کنید.

برای باز کردن DevTools، روی پنجره افزونه کلیک راست کرده و گزینه Inspect را انتخاب کنید.

همچنین دکمه Errors را درست بعد از دکمه حذف برای برنامه extension خود خواهید دید.

قبل از انتشار برنامه extension خود در فروشگاه وب Chrome یا در دسترس قرار دادن آن برای عموم، ضروری است که به طور کامل آن را آزمایش و اشکال زدایی کنید تا از عملکرد صحیح آن اطمینان حاصل کنید.

5. انتشار پسوند

در مرحله آخر، extension انتخابگر رنگ خود را در فروشگاه وب کروم منتشر می کنیم تا در دسترس همه کاربران کروم باشد. برای انجام این کار؛ این موارد را دنبال کنید:

یک فایل فشرده از برنامه extension خود ایجاد کنید و به داشبورد برنامه‌نویس Chrome بروید.

روی دکمه «افزودن آیتم جدید» کلیک کرده و گزینه «افزونه» را انتخاب کنید.

فیلدهای مورد نیاز، از جمله نام، توضیحات، و دسته های برنامه افزودنی خود را پر کنید.

فایل manifest.json و نمادهای مورد نیاز برای پسوند را آپلود کنید.

پسوند را برای بررسی ارسال کنید.

انتشار برنامه extension خود در فروشگاه وب Chrome راهی عالی برای نشان دادن مهارت های خود به عنوان یک توسعه دهنده و به اشتراک گذاری کار خود با مخاطبان گسترده است.

اگر در فرآیند انتشار با مشکل یا مشکلی مواجه شدید، می‌توانید برای راهنمایی به اسناد رسمی Google مراجعه کنید.

نتیجه گیری و سخن پایانی

با دنبال کردن مراحل این وبلاگ، با موفقیت یک افزونه انتخابگر رنگ کاربردی ایجاد کرده‌اید که به کاربران امکان می‌دهد به راحتی رنگ‌ها را از روی صفحه انتخاب کنند. این extension با تمام مرورگرهای وب مبتنی بر کرومیوم از جمله کروم، مایکروسافت اج، اپرا و غیره سازگار است.

این پروژه فرصتی عالی برای تمرین مهارت‌های توسعه وب و کسب اطلاعات بیشتر در مورد نحوه کار افزونه‌های Chrome بود. امیدواریم از این فرآیند لذت برده باشید و در آینده نسبت به توانایی خود در ایجاد برنامه های افزودنی اطمینان بیشتری داشته باشید.

اگر این وبلاگ را مفید یافتید، لطفاً آن را با دیگران به اشتراک بگذارید. حمایت شما به ما کمک می کند تا به تولید محتوا و منابع ارزشمند برای جامعه توسعه ادامه دهیم. از حمایت شما متشکرم

آموزش ساخت افزونه کروم با Html , CSS و javascrip

مراحل ایجاد برنامه افزودنی Color Picker Chrome

1. راه اندازی پروژه

2. ایجاد پسوند

3. ایجاد یک فایل مانیفست

4. تست و اشکال زدایی

5. انتشار پسوند

نتیجه گیری و سخن پایانی

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مراحل ایجاد برنامه افزودنی Color Picker Chrome

1. راه اندازی پروژه

2. ایجاد پسوند

3. ایجاد یک فایل مانیفست

4. تست و اشکال زدایی

5. انتشار پسوند

نتیجه گیری و سخن پایانی

مطالب زیر را حتما مطالعه کنید

فرانت اند کار و بکند کار تفاوت چیست؟

3 زبانی که برای تبدیل شدن به یک توسعه دهنده وب سایت باید بدانید

10 مبانی جاوا اسکریپت

3 ویرایشگر کد رایگان برای طراحان و توسعه دهندگان وب

دیدگاهتان را بنویسید لغو پاسخ