تجربه من در سال 2023 به عنوان یک توسعه دهنده افزونه کروم دارای رتبه برتر در Upworks – قسمت 1

Summarize this content to 400 words in Persian Lang
معرفی

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

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

1. درک Chrome API

درک APIهای افزونه کروم یک مرحله بسیار مهم است، زیرا هر API توسط مجوزهای خاصی کنترل می شود. این مجوزها به برنامه‌نویس در جاوا اسکریپت اجازه می‌دهند تا API(های) ضروری را در معرض دید برنامه‌نویس قرار دهند و امکان استفاده از ویژگی‌های اضافی در Chrome را فراهم می‌کنند. به عنوان مثال Chrome Notifications و غیره

به زبان ساده، Chrome API مجموعه‌ای از APIها هستند که به ویژگی‌های Chrome دسترسی دارند و از طریق جاوا اسکریپت آن‌ها را در معرض دید توسعه‌دهندگان قرار می‌دهند.

این APIها توسعه دهندگان را قادر می سازند. برای دسترسی به عملکردهای مختلف مرورگر کروم و گسترش قابلیت های آن فراتر از تجربه اولیه مرور وب.

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

با این حال همه APIها بدون اجازه در دسترس نیستند، برخی نیاز به پیکربندی صریح در a دارند “آشکار”; فایلی که مجوزهای مورد نیاز پسوند و پیکربندی و ابرداده را بیان می کند.

برخی از نمونه‌های ویژگی‌های Chrome API عبارتند از:

2. معماری افزونه کروم به طور خلاصه

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

نکات فنی در مورد پاپ آپ

پاپ آپ ها توسط سیاست های CORS محدود نمی شوند (درخواست های XHR بین دامنه ای امکان پذیر است)
پنجره بازشو می‌تواند برای دسترسی به سرویس‌دهنده «پاس‌رسانی» ارسال کند
پنجره بازشو می تواند از طریق Chrome API با ContentScript ارتباط برقرار کند *chrome.tabs

را ContentScript کدی است که به DOM تزریق می شود، به این معنی که شما می توانید به راحتی DOM موجود در صفحه را دستکاری کنید، با این حال ContentScript به طور پیش فرض در یک دنیای ایزوله (یک جاوا اسکریپت VM جداگانه) اجرا می شود، به این معنی که در حالی که ممکن است شما به DOM دسترسی داشته باشید، به آن دسترسی ندارید. دسترسی به زمینه جاوا اسکریپت VM موجود در صفحه.

“یک دنیای منزوی یک محیط اجرای خصوصی غیرقابل دسترسی برای صفحه یا سایر برنامه های افزودنی است. نتیجه عملی این جداسازی این است که متغیرهای جاوا اسکریپت در اسکریپت های محتوای یک برنامه افزودنی برای صفحه میزبان یا اسکریپت های محتوای برنامه های افزودنی دیگر قابل مشاهده نیستند. این مفهوم در ابتدا با راه اندازی اولیه کروم معرفی شد و برای تب های مرورگر ایزوله می کرد.”

نکات فنی در مورد ContentScript

ContentScript می تواند با استفاده از پنجره postMessage با صفحات میزبان و Iframes ارتباط برقرار کند.
ContentScript می تواند API(های) Chrome خاصی را با استفاده از ارسال پیام اجرا کند.
ContentScript می تواند DOM صفحه میزبان را دستکاری کند
ContentScript می تواند با Background Worker و Popup با استفاده از ارسال پیام ارتباط برقرار کند.

در جهان های منزوی کار کنید توسعه دهندگان کروم. موجود در: https://developer.chrome.com/docs/extensions/mv3/content_scripts/#isolated_world (دسترسی: 17 مارس 2023).

را کارگر پیشینه، (همچنین به عنوان کارگر خدمات شناخته می شود) و Popup از این نظر مشابه هستند که هر دو محدودیت های CORS sandbox را به اشتراک نمی گذارند و هر دو می توانند به مجموعه ای از ویژگی های Chrome API دسترسی داشته باشند. Background Workers همانطور که از نام آن پیداست، عملیات پس زمینه بیشتری را انجام می دهند، و برخی از نمونه ها عبارتند از:

استفاده مستقیم از Chrome API (اعلان‌ها/خواندن کوکی‌ها/منوی زمینه)
ارسال پیام به ContentScript/Popup
با برنامه افزودنی شخص ثالث ارتباط برقرار کنید
ارتباط با window.onmessage از طریق اسکریپت محتوا
دور زدن CORS (همانطور با پنجره بازشو)
بدون DOM بنابراین بدون شی سند.

3. ارسال پیام

ContentScript به جای برنامه افزودنی که دسترسی آن را به API(های) Chrome محدود می کند، در محدوده صفحه میزبان عمل می کند. این بدان معنی است که اگر برای استخراج اطلاعات DOM و انتقال داده ها به یک API شخص ثالث نیاز به تزریق کد به صفحه میزبان دارید، ممکن است محدودیت های خاصی ایجاد شود. ContentScript از همان محدودیت CORS تبعیت می کند و انتقال داده ها به دامنه های دیگر را غیرممکن می کند.

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

در زیر چند قطعه آورده شده است:

ارسال یک درخواست از یک اسکریپت محتوا به شکل زیر است:

(async () => {
const response = await chrome.runtime.sendMessage({greeting: “hello”});
// do something with response here, not outside the function
console.log(response);
})();

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

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

برای ارسال درخواست از یک برنامه افزودنی به یک اسکریپت محتوا، مشخص کنید که درخواست برای کدام برگه اعمال می شود، مانند مثال زیر:

(async () => {
const

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

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

توجه داشته باشید: مجوزهای «activeTab» و «tabs» برای دسترسی به ویژگی‌های برگه از API مورد نیاز است.

برای دریافت پیام، یک را تنظیم کنید runtime.onMessage شنونده رویداد این کدها هم در پسوندها و هم در اسکریپت های محتوا از یک کد استفاده می کنند

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
“from a content script:” + sender.tab.url :
“from the extension”);
if (request.greeting === “hello”)
sendResponse({farewell: “goodbye”});
}
);

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

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

4. تجربه توسعه برنامه افزودنی کروم در Upwork

توسعه برنامه افزودنی کروم یک جایگاه عالی در پلتفرم Upwork است که فرصت های متعددی را برای افراد ماهر ارائه می دهد تا شایستگی خود را به نمایش بگذارند. علیرغم وجود رقابت، کسانی که می توانند تخصص خود را در این زمینه نشان دهند، خود را در محاصره افراد و شرکت هایی خواهند دید که به دنبال کمک در ساخت محصولات افزونه کروم هستند. درآمد بالقوه از یک کنسرت یک روزه کروم می تواند کاملاً پرسود باشد، با هزینه متوسط ​​حدود 300 دلار، بسته به عمق دانشی که فرد در مورد معماری برنامه افزودنی دارد.

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

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

تزریق کد یکی دیگر از جنبه های مهم توسعه افزونه کروم است. این شامل اصلاح رفتار صفحات وب با تزریق کد سفارشی به اسکریپت های موجود است. با استفاده از این تکنیک، توسعه‌دهندگان می‌توانند عملکرد برنامه‌های وب را افزایش دهند، تجربیات کاربر را سفارشی کنند و ویژگی‌های اضافی را به‌طور یکپارچه ادغام کنند. درک عمیق جاوا اسکریپت و API افزونه کروم برای پیاده سازی موثر راه حل های تزریق کد ضروری است.

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

گسترش صفحات میزبان یک جنبه اساسی توسعه افزونه کروم است. مشتریان اغلب به دنبال کمک برای گسترش عملکرد برنامه های کاربردی وب خود با ادغام ویژگی های سفارشی در صفحات وب موجود هستند. این نیاز به درک کامل از مدل شیء سند (DOM) و توانایی دستکاری عناصر صفحه وب به صورت پویا دارد. با گسترش مؤثر صفحات میزبان، توسعه‌دهندگان می‌توانند راه‌حل‌های متناسب با نیازهای خاص مشتریان را ارائه دهند.

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

توجه داشته باشید: داشتن پیشینه قوی در DOM API و جاوا اسکریپت در بسیاری از کارهای افزونه کروم بسیار مفید خواهد بود.

MutationObserver => مواردی که کد فقط باید زمانی اجرا شود که عنصر هدف به DOM تزریق شود.
دانش پایه DOM API به عنوان مثال انتقال DOM، جایگزینی DOM و غیره
میمون وصله به عنوان مثال اضافه کردن کد اضافی به یک تابع موجود

5. نمونه کارها مناسب برای مهندسان برنامه افزودنی کروم

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

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

رویکرد من

خوشبختانه، من با یک پروژه ساده و در عین حال موثر به نام ASIN2Shopify آمدم. این پروژه شامل توسعه یک افزونه کروم است که قادر به استخراج اطلاعات از صفحات محصول آمازون و صادرات آن به فرمت Shopify CSV است. انگیزه شروع این پروژه از جستجوی کنسرت های افزونه کروم در Upwork ناشی شد.

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

هدف اصلی این پروژه نشان دادن تخصص من در توسعه توسعه در یک زمینه عملی بود. با داشتن شواهد ملموس از پروژه‌های گذشته مانند ASIN2Shopify، متقاعد کردن مشتریان بالقوه در پلتفرم‌هایی مانند Upwork به جای تکیه بر پیشنهادات بسیار آسان‌تر شد.

ساختن اولین افزونه کروم من (Asin2Shopify)

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

جدول زیر مجوزهای لازم و کاربرد آنها را نشان می دهد:

مجوزها
هدف

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

Storage API
اهداف پایدار

مجوزها در فایل مانیفست اعلام می شوند “manifest.json”

مانیفست افزونه اطلاعاتی در مورد قابلیت های یک برنامه افزودنی و فایل هایی که استفاده می کند به مرورگر می دهد. ویژگی‌های موجود برای برنامه‌های افزودنی برای استفاده توسط نسخه مانیفست فعلی تعریف می‌شوند. Manifest V3 پیشرفت‌هایی را در امنیت، حریم خصوصی و عملکرد برنامه‌های افزودنی معرفی می‌کند و به برنامه‌های افزودنی اجازه می‌دهد از فناوری‌های وب باز مانند سرویس‌دهندگان و وعده‌ها استفاده کنند.

مانیفست نسخه 3 (دسترسی: 17 مارس 2023).

توجه داشته باشید: همه فایل های Manifest باید شکایت MV3 باشند

یک فایل Manifest حاوی اطلاعاتی در مورد پسوند و مجوزهای مورد نیاز آن است.

در اینجا نمونه ای از فایل مانیفست آمده است

{
“name”: “Asin2Shopify”,
“description”: “Asin2Shopify is a Google Chrome extension that fetches ASIN Numbers and exports to Shopify CSV”,
“version”: “1.0.0”,
“manifest_version”: 3,
“content_scripts”: [
{
“matches”: [“https://*.amazon.com/*”],
“run_at”:”document_end”,
“css”: [“content.css”],
“js” : [ “content-script.js”] }
],

“background”: {
“service_worker”: “worker.js”
},
“permissions”: [“storage”,”tabs”,”activeTab”,”notifications”],
“action”: {
“default_popup”: “index.html”
}

}

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

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

این مانیفست به کروم دستور می‌دهد هر زمان که از صفحه آمازون بازدید می‌کنیم، اسکریپت محتوا را تزریق کند.

استفاده عملی از ارسال پیام

ContentScripts ممکن است هنگام تلاش برای استفاده از Notification API با محدودیت هایی مواجه شود. با این حال، با واگذاری وظایف ایجاد نوتیفیکیشن به کارمند سرویس از طریق ارسال پیام، راه حلی می توان یافت.

function raiseNotification(item){
// Raise a notification bar in the chrome extension
const data = {
iconUrl: item.imgSrc,
title:item.title,
message: “This product has been added to the Shopify Export List”,
type:’basic’
};

//Raise a notification bar to the worker
chrome.runtime.sendMessage(event(‘notification’,data))
}
function event(type,data){
return {
type,
data
}
}

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

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

را chrome.runtime.sendMessage یک API است که به اسکریپت محتوا اجازه می‌دهد تا پیام‌هایی را به کارمند پس‌زمینه بفرستد، حفظ یک سبک ثابت از ارسال پیام ضروری است. نوع برای نشان دادن نوع رویداد و داده ها برای بار.

کارگر پس زمینه برای گوش دادن به رویدادها

chrome.runtime.onMessage.addListener((request,sender,sendResponse) => {
switch(request.type){
case “notification”:
chrome.notifications.create(”,request.data);
break;
}
})

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

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

6. مدیریت یک نمونه کار خوب برای مشتریان به عنوان یک توسعه دهنده در Upwork

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

در اینجا منبعی از Upwork است، که روش مناسب برای داشتن یک نمونه کار دقیق را پوشش می دهد.

یافتن مشتریان

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

مشتریان فقط می توانند دو خط اول پیشنهادات را در Upwork ببینند، بنابراین مطمئن شوید که تا حد امکان مختصر هستند. به عنوان مثال صحبت کردن در مورد مشکل در پیشنهاد با در نظر گرفتن یک اصلاح، یا ارسال پیوند به یک پروژه مشابه.
زمانی که در 5 پیشنهاد است درخواست دهید، یا زمانی که از پروژه مطمئن هستید، پیشنهاد بدهید (من می دانم که مناقصه بد است).
در ساعات کاری ایالات متحده درخواست دهید
“آخرین بازدید توسط مشتری” شانس مشتری برای مشاهده یک پیشنهاد جدید ارسال شده.

منبع [7 Expert Upwork Tips For Beginners (+ 9 Mistakes To Avoid)]

آن را کوتاه و ساده نگه دارید

پیشرفت تا کنون

نتیجه

در خاتمه، تجربه من به عنوان یک توسعه دهنده برنامه افزودنی کروم با رتبه برتر در Upwork در سال 2023 بسیار قابل توجه بوده است. در قسمت 1 این سری مقالات، من به اصول توسعه برنامه افزودنی کروم پرداختم و بینش های ارزشمندی را در مورد پیچیدگی های ایجاد افزونه های با کیفیت بالا به اشتراک گذاشتم.

با این حال، همانطور که به سمت قسمت 2 پیش می رویم، تمرکز ما به سمت تکنیک های پیشرفته و مفهوم ارسال پیام و استفاده از React for Development تغییر خواهد کرد.

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

خروجی های ویژه

من می خواهم یک قدردانی ویژه را به کارآموزم، @Chijioke Chika تقدیم کنم. او نقش بسزایی در توسعه رابط کاربری برای اجزای مختلف ایفا کرد و کمک های ارزنده ای در زمینه کدنویسی کرد. مشارکت های او به من اجازه داد تا بر جنبه های اساسی و برنامه ریزی استراتژیک پروژه هایمان تمرکز کنم.

فین

(async () => {
  const response = await chrome.runtime.sendMessage({greeting: "hello"});
  // do something with response here, not outside the function
  console.log(response);
})();

(async () => {
  const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
  const response = await chrome.tabs.sendMessage(tab.id, {greeting: "hello"});
  // do something with response here, not outside the function
  console.log(response);
})();

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting === "hello")
      sendResponse({farewell: "goodbye"});
  }
);

{
  "name": "Asin2Shopify",
  "description": "Asin2Shopify is a Google Chrome extension that fetches ASIN Numbers and exports to Shopify CSV",
  "version": "1.0.0",
  "manifest_version": 3,
   "content_scripts": [
    {
      "matches": ["https://*.amazon.com/*"],
      "run_at":"document_end",
      "css": ["content.css"],
      "js" : [ "content-script.js"]
    }
  ],

  "background": {
    "service_worker": "worker.js"
  },
  "permissions": ["storage","tabs","activeTab","notifications"],
  "action": {
    "default_popup": "index.html"
  }

}

function raiseNotification(item){
     // Raise a notification bar in the chrome extension
     const data =  {
         iconUrl: item.imgSrc,
         title:item.title,
         message: "This product has been added to the Shopify Export List",
         type:'basic'
     };

     //Raise a notification bar to the worker
     chrome.runtime.sendMessage(event('notification',data))
}
function event(type,data){
    return {
        type,
        data
    }
}

chrome.runtime.onMessage.addListener((request,sender,sendResponse) => {
    switch(request.type){
        case "notification":
            chrome.notifications.create('',request.data);
        break;    
    }
})