نحوه ساخت و انتشار یک برنامه افزودنی کروم: راهنمای گام به گام برای ایجاد یک محافظ جلسه سفارشی

Summarize this content to 400 words in Persian Lang

معرفی

ایجاد یک افزونه کروم در ابتدا می تواند دلهره آور به نظر برسد. اما با راهنمایی صحیح، قابل مدیریت است. این راهنما شما را در ساخت و انتشار افزونه کروم راهنمایی می کند. “Custom Session Saver” نامیده می شود. این افزونه به کاربران امکان ذخیره و بازیابی جلسات سفارشی را می دهد. به عنوان مثال، “کار”، “شخصی”، “توسعه”، و غیره.

در پایان این راهنما، یک افزونه کاربردی کروم، آماده برای انتشار خواهید داشت.

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

با ایجاد دایرکتوری برای پروژه خود با نام “custom_session_storage” شروع کنید. در داخل این دایرکتوری، ساختار پوشه زیر را ایجاد کنید:

project\_root/

│

├── background.js # Background script specified in manifest

├── images/ # Directory for icons

│ ├── icon16.png # 16×16 icon

│ ├── icon48.png # 48×48 icon

│ └── icon128.png # 128×128 icon

├── manifest.json # Chrome extension manifest file

├── popup.js # popup script file

├── popup.css # popup style file

└── popup.html # Default popup HTML file

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فایل مانیفست

باز کن manifest.json و کد زیر را قرار دهید:

{
“manifest_version”: 3,
“name”: “Custom Session Saver”,
“version”: “1.0”,
“description”: “Save and restore custom sessions, for example: ‘Work’, ‘Personal’, ‘Development’, etc.”,
“permissions”: [
“storage”,
“tabs”
],
“background”: {
“service_worker”: “background.js”
},
“action”: {
“default_popup”: “popup.html”
},
“icons”: {
“16”: “images/icon16.png”,
“48”: “images/icon48.png”,
“128”: “images/icon128.png”
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این فایل به صورت زیر عمل می کنیم:

تعریف نسخه مانیفست مورد استفاده ما.
نام، نسخه و توضیحات سفارشی خود را به آن می دهیم.
اضافه کردن مجوز برای “ذخیره سازی” برای ذخیره داده های محلی و “برگه ها” برای دستکاری برگه ها.
تنظیم اسکریپت پس زمینه این همه عملکردها برای ذخیره سازی برگه ها و جلسات را کنترل می کند.
تعریف رابط کاربری برای پنجره بازشو
تنظیم نماد پیش فرض برای اندازه های زیر: 16×16، 48×48، و 128×128.

اسکریپت پس زمینه

ايجاد كردن background.js برای رسیدگی به فرآیندهای پس زمینه برنامه افزودنی. آن را باز کنید و کد زیر را قرار دهید:

console.log(“Background script loaded”);

chrome.runtime.onInstalled.addListener(() => {
console.log(“Extension installed”);
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === “saveSession”) {
chrome.storage.local.set({ [message.sessionName]: message.session }, () => {
console.log(`Session ${message.sessionName} saved.`);
chrome.runtime.sendMessage({ action: “refreshSessions” });
if (sendResponse) sendResponse();
});
} else if (message.action === “openSession”) {
chrome.storage.local.get([message.sessionName], (result) => {
let session = result[message.sessionName];
if (session) {
session.forEach((tab) => {
chrome.tabs.create({ url: tab.url });
});
}
});
} else if (message.action === “deleteSession”) {
chrome.storage.local.remove(message.sessionName, () => {
console.log(`Session ${message.sessionName} deleted.`);
chrome.runtime.sendMessage({ action: “refreshSessions” });
if (sendResponse) sendResponse();
});
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

– onInstalled: پس از نصب، این رویداد فعال می شود. این گزارش می دهد که نصب با موفقیت انجام شده است.

– onMessage: این رویدادها از popup.js. اگر پیام “saveSession” باشد، جلسه را در حافظه محلی ذخیره می کند. اگر پیام «openSession» باشد، در فضای ذخیره‌سازی محلی آن جلسه جستجو می‌شود و برگه‌های جدیدی را بر اساس داده‌های ذخیره شده باز می‌کند. در نهایت، اگر پیام «deleteSession» باشد، نام جلسه را از فضای ذخیره‌سازی حذف می‌کند.

– ارسال پیام: برای جدا کردن نگرانی ها، popup.js منطق جلسه رفرش را کنترل می کند. هنگام ذخیره یا حذف، رویدادی را ارسال می کنیم که popup.js به نوسازی گوش می دهد و آن را فعال می کند.

رابط کاربری

رابط کاربری را در آن تنظیم کنید popup.html. فایل را باز کنید و کد زیر را قرار دهید:

در این فایل، مسیر استایل و عنوان افزونه خود را اضافه کردیم. در داخل تگ بدنه، موارد زیر را قرار دادیم:

هدر با نماد و عنوان کوچک.
یک ظرف div با یک ورودی و یک دکمه برای ذخیره جلسه.
div دیگری که جلسات ذخیره شده ما را برگزار می کند.
یک تگ اسکریپت برای وارد کردن فایل جاوا اسکریپت ما ** popup.js**.

اسکریپت

که در popup.js، ما تعاملات رابط کاربری را مدیریت خواهیم کرد. فایل را باز کنید و کد زیر را قرار دهید:

document.addEventListener(“DOMContentLoaded”, () => {
const saveSessionButton = document.getElementById(“saveSession”);
const sessionNameInput = document.getElementById(“sessionName”);
const sessionsUL = document.getElementById(“sessionsUL”);

const loadSessions = () => {
while (sessionsUL.firstChild) {
sessionsUL.removeChild(sessionsUL.firstChild);
}
chrome.storage.local.get(null, (sessions) => {
for (let sessionName in sessions) {
let sessionLI = document.createElement(“li”);
sessionLI.className = “session”;
let sessionTitle = document.createElement(“span”);
sessionTitle.textContent = sessionName;

let openButton = document.createElement(“button”);
openButton.textContent = “OPEN”;
openButton.addEventListener(“click”, () => {
chrome.runtime.sendMessage({ action: “openSession”, sessionName });
});

let deleteButton = document.createElement(“button”);
deleteButton.textContent = “DELETE”;
deleteButton.addEventListener(“click”, () => {
chrome.runtime.sendMessage({ action: “deleteSession”, sessionName });
});

sessionLI.appendChild(sessionTitle);
sessionLI.appendChild(openButton);
sessionLI.appendChild(deleteButton);
sessionLI.appendChild(document.createElement(“br”));
sessionsUL.appendChild(sessionLI);
}
});
};

saveSessionButton.addEventListener(“click”, () => {
let sessionName = sessionNameInput.value;
if (sessionName) {
chrome.tabs.query({ currentWindow: true }, (tabs) => {
let session = tabs.map((tab) => ({ url: tab.url, title: tab.title }));
chrome.runtime.sendMessage(
{ action: “saveSession”, sessionName, session },
loadSessions
);
});
}
});

chrome.runtime.onMessage.addListener((message) => {
if (message.action === “refreshSessions”) {
loadSessions();
}
});

loadSessions();
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

داخل این اسکریپت:

ما یک شنونده روی سند ایجاد می کنیم تا وقتی همه محتوا بارگیری شد، فعال شود.
ما چند عنصر را از UI دریافت می کنیم: دکمه ذخیره جلسه، عنصر ورودی و عنصر لیست جلسات.
الف را تعریف می کنیم loadSession روش. در داخل، از یک حلقه while برای پاک کردن عنصر لیست استفاده می‌کنیم و هر تغییر را دوباره بارگذاری می‌کنیم. ما ویژگی session را با استفاده از روش های داخلی کروم از حافظه محلی بازیابی می کنیم.
ما در تمام جلسات خود با استفاده از a حلقه می کنیم for-in حلقه، ایجاد یک li عنصر و دادن نام کلاس جلسه به آن. یک فاصله برای حفظ عنوان ما ایجاد کنید. یک دکمه برای باز کردن جلسه هنگام کلیک کردن، و یک دکمه حذف برای حذف جلسه هنگام کلیک کردن.
عنوان و دکمه ها را به جلسه خود اضافه می کنیم li عنصر و این عنصر به جلسه ما ul از جانب popup.html.
ما یک شنونده رویداد را به دکمه ذخیره جلسه اضافه می کنیم. با کلیک، مقدار ورودی را می گیرد و به عنوان نام جلسه ذخیره می کند. با استفاده از روش‌های کروم، از طریق برگه‌های باز پنجره فعلی حلقه می‌زنیم. سپس یک نقشه ایجاد کنید و یک پیام ارسال کنید background.js برای ذخیره جلسات در حافظه محلی. ما را تحریک می کنیم loadSession برای بارگیری مجدد لیست و منعکس کردن مورد جدید.
یک شنونده برای رسیدگی اضافه می کنیم refreshSessions پیام ها از background.js.
در نهایت، ما این روش را در اولین بار برای نمایش جلسات موجود فعال می کنیم.

نمادها

سه اندازه نماد را آماده کنید: 16×16، 48×48، و 128×128 پیکسل. اینها برای نوار ابزار کروم و فروشگاه وب کروم هستند.

ابزارهای رایگانی مانند resizeimage.net، مولد آیکون هوش مصنوعی و FreeConvert را جستجو کنید. برای ایجاد و تغییر اندازه آیکون های خود.

سبک ها

استایل پنجره را با popup.css کاربر پسند و صاف به نظر برسد. فایل را باز کنید و کد زیر را قرار دهید:

body {
width: 300px;
font-family: Arial, sans-serif;
}

.title-container {
border-bottom: 1px solid rgba(0, 0, 0, .06);
display: flex;
justify-content: flex-start;
text-align: center;
align-items: center;
}

.title {
margin-left: 4px;
}

.input-container {
margin-top: 4px;
padding-bottom: 10px;
}

.input {
border: 1px solid lightgray;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
margin-right: 5px;
border-radius: 4px;
font-size: larger;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 4px;
}

input:focus-visible,
button:focus-visible {
outline: 1px solid #007bff;
outline-offset: 0px;
}

button {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
}

.save-session-btn {
background-color: #007bff;
color: #ffffff;
}

.save-session-btn:hover,
.save-session-btn:active,
.save-session-btn:focus,
.save-session-btn:focus-visible {
background-color: #0056b3;
}

.sessions-list {
padding-inline-start: 20px;
}

.session {
display: flex;
align-items: center;
margin-bottom: 15px;
padding-left: 5px;
}

.session::before {
content: “\2022”;
display: inline-block;
width: 20px;
margin-left: -25px;
text-align: center;
}

.session span {
flex-grow: 1;
font-weight: bold;
font-size: larger;
}

.session button {
margin-left: 10px;
background-color: #ffffff;
color: #007bff;
border: 1px solid #007bff;
}

.session button:hover,
.session button:active,
.session button:focus,
.session button:focus-visible {
background-color: #dbe5f2;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای این سبک، ما ظاهری مدرن را در نظر گرفتیم:

عرض و فونت سفارشی برای کل بدن.
محفظه عنوان متن محور با حاشیه کمی در پایین.
یک حاشیه کوچک برای جدا کردن عنوان از نماد.
سبک های سفارشی برای ورودی و دکمه ها، از جمله گوشه های گرد، کمی سایه و خطوط آبی. دو دکمه وجود دارد: یکی آبی رنگ و دیگری با خطوط آبی.
موقعیت یابی انعطاف پذیر، ایجاد آیتم های فهرست، فضایی مشابه یک ستون با رشد انعطاف پذیر دارد. از آنجایی که “flex” آیتم های لیست ما را می شکند، نماد آیتم لیست را قبل از هر کدام اضافه کردیم.

آزمایش کردن

برای آزمایش برنامه افزودنی خود:

1. به صفحه افزونه کروم (chrome://extensions/) بروید.

2. حالت توسعه دهنده را فعال کنید.

3. روی “Load unpacked” کلیک کنید و دایرکتوری پروژه خود را انتخاب کنید. اکنون افزونه شما باید در کروم قابل مشاهده باشد.

در حال استقرار در فروشگاه وب Chrome

استقرار در فروشگاه وب Chrome ساده است. به دلیل فرآیند بررسی گوگل، به جزئیات نیاز دارد. این مراحل را دنبال کنید:

1. Zip Your Application: مطمئن شوید که پروژه شما از ساختار درست پوشه پیروی می کند. manifest.json باید در ریشه باشد

2. تنظیم یک حساب برنامه‌نویس: به داشبورد برنامه‌نویس فروشگاه وب Chrome بروید. سپس برای انتشار برنامه های افزودنی یک بار هزینه 5 دلاری بپردازید.

3. برنامه افزودنی خود را آپلود کنید: روی «افزودن مورد جدید» کلیک کنید، فایل فشرده خود را آپلود کنید. جزئیات مورد نیاز مانند عنوان، توضیحات و سیاست حفظ حریم خصوصی را پر کنید.

4. ارسال برای بررسی: پس از تکمیل فرم، پسوند خود را برای بررسی ارسال کنید. این فرآیند می تواند از چند ساعت تا چند روز طول بکشد. پس از بررسی، یک ایمیل برای شما ارسال خواهد شد.

بهبودها

برای بهبود برنامه افزودنی خود، این ویژگی‌ها را اضافه کنید:

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

نتیجه

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

لینک افزونه عمومی

مخزن کد

project\_root/

│

├── background.js          # Background script specified in manifest

├── images/                # Directory for icons

│   ├── icon16.png         # 16x16 icon

│   ├── icon48.png         # 48x48 icon

│   └── icon128.png        # 128x128 icon

├── manifest.json          # Chrome extension manifest file

├── popup.js          # popup script file

├── popup.css          # popup style file

└── popup.html             # Default popup HTML file

{
    "manifest_version": 3,
    "name": "Custom Session Saver",
    "version": "1.0",
    "description": "Save and restore custom sessions, for example: 'Work', 'Personal', 'Development', etc.",
    "permissions": [
        "storage",
        "tabs"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html"
    },
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    }
}

console.log("Background script loaded");

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed");
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "saveSession") {
    chrome.storage.local.set({ [message.sessionName]: message.session }, () => {
      console.log(`Session ${message.sessionName} saved.`);
      chrome.runtime.sendMessage({ action: "refreshSessions" });
      if (sendResponse) sendResponse();
    });
  } else if (message.action === "openSession") {
    chrome.storage.local.get([message.sessionName], (result) => {
      let session = result[message.sessionName];
      if (session) {
        session.forEach((tab) => {
          chrome.tabs.create({ url: tab.url });
        });
      }
    });
  } else if (message.action === "deleteSession") {
    chrome.storage.local.remove(message.sessionName, () => {
      console.log(`Session ${message.sessionName} deleted.`);
      chrome.runtime.sendMessage({ action: "refreshSessions" });
      if (sendResponse) sendResponse();
    });
  }
});

document.addEventListener("DOMContentLoaded", () => {
  const saveSessionButton = document.getElementById("saveSession");
  const sessionNameInput = document.getElementById("sessionName");
  const sessionsUL = document.getElementById("sessionsUL");

  const loadSessions = () => {
    while (sessionsUL.firstChild) {
      sessionsUL.removeChild(sessionsUL.firstChild);
    }
    chrome.storage.local.get(null, (sessions) => {
      for (let sessionName in sessions) {
        let sessionLI = document.createElement("li");
        sessionLI.className = "session";
        let sessionTitle = document.createElement("span");
        sessionTitle.textContent = sessionName;

        let openButton = document.createElement("button");
        openButton.textContent = "OPEN";
        openButton.addEventListener("click", () => {
          chrome.runtime.sendMessage({ action: "openSession", sessionName });
        });

        let deleteButton = document.createElement("button");
        deleteButton.textContent = "DELETE";
        deleteButton.addEventListener("click", () => {
          chrome.runtime.sendMessage({ action: "deleteSession", sessionName });
        });

        sessionLI.appendChild(sessionTitle);
        sessionLI.appendChild(openButton);
        sessionLI.appendChild(deleteButton);
        sessionLI.appendChild(document.createElement("br"));
        sessionsUL.appendChild(sessionLI);
      }
    });
  };

  saveSessionButton.addEventListener("click", () => {
    let sessionName = sessionNameInput.value;
    if (sessionName) {
      chrome.tabs.query({ currentWindow: true }, (tabs) => {
        let session = tabs.map((tab) => ({ url: tab.url, title: tab.title }));
        chrome.runtime.sendMessage(
          { action: "saveSession", sessionName, session },
          loadSessions
        );
      });
    }
  });

  chrome.runtime.onMessage.addListener((message) => {
    if (message.action === "refreshSessions") {
      loadSessions();
    }
  });

  loadSessions();
});

body {
    width: 300px;
    font-family: Arial, sans-serif;
}

.title-container {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    display: flex;
    justify-content: flex-start;
    text-align: center;
    align-items: center;
}

.title {
    margin-left: 4px;
}

.input-container {
    margin-top: 4px;
    padding-bottom: 10px;
}

.input {
    border: 1px solid lightgray;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    margin-right: 5px;
    border-radius: 4px;
    font-size: larger;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
}

input:focus-visible,
button:focus-visible {
    outline: 1px solid #007bff;
    outline-offset: 0px;
}

button {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.save-session-btn {
    background-color: #007bff;
    color: #ffffff;
}

.save-session-btn:hover,
.save-session-btn:active,
.save-session-btn:focus,
.save-session-btn:focus-visible {
    background-color: #0056b3;
}

.sessions-list {
    padding-inline-start: 20px;
}

.session {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-left: 5px;
}

.session::before {
    content: "\2022";
    display: inline-block;
    width: 20px;
    margin-left: -25px;
    text-align: center;
}

.session span {
    flex-grow: 1;
    font-weight: bold;
    font-size: larger;
}

.session button {
    margin-left: 10px;
    background-color: #ffffff;
    color: #007bff;
    border: 1px solid #007bff;
}

.session button:hover,
.session button:active,
.session button:focus,
.session button:focus-visible {
    background-color: #dbe5f2;
}