افزونه وب Chrome - بدون نیاز به تجربه برنامه نویسی قبلی: 6 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:52

برنامه های افزودنی Chrome برنامه های کوچکی هستند که برای افزایش تجربه مرور کاربران ساخته شده اند. برای اطلاعات بیشتر در مورد برنامه های افزودنی chrome به https://developer.chrome.com/extensions بروید.

برای ایجاد یک افزونه وب Chrome ، برنامه نویسی مورد نیاز است ، بنابراین مرور HTML ، JavaScript و CSS در وب سایت زیر بسیار مفید است:

www.w3schools.com/default.asp (مدارس w3 وب سایت خوبی برای کدگذاری منابع است)

نحوه کدنویسی نمی دانید؟ نگران نباشید ، این آموزش به شما کمک خواهد کرد.

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

تدارکات

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

• رایانه ای با ویرایشگر متن (من از دفترچه یادداشت استفاده می کنم)
• گوگل کروم

و این همه!

مرحله 1: ایجاد دایرکتوری

ابتدا یک پوشه ایجاد کنید تا همه فایلها را در خود جای دهد و نام آن را "پسوند" بگذارید. در صورت تمایل می توان نام را بعداً تغییر داد.

مرحله 2: فایل مانیفست را ایجاد کرده و آن را کدگذاری کنید

فایل مانیفست بخش بسیار مهمی از پسوند است. این برنامه به برنامه افزودنی دقیقاً می گوید که چه کاری باید انجام دهد و چگونه باشد. فایل های مانیفست در JSON قالب بندی می شوند. اولین قدم این است که یک ویرایشگر متن را باز کرده و یک فایل جدید را به عنوان "manifest.json" ذخیره کنید.

سپس اسکریپت زیر را تایپ کنید:

{

"name": "اولین افزونه" ، "نسخه": "1.0" ، "description": "من می توانم یک برنامه افزودنی را کد کنم" ، "manifest_version": 2 ، "browser_action": {"default_title": "اولین برنامه افزودنی"}}

کاما بعد از مقادیر را به خاطر بسپارید!

پس از تایپ این مورد ، فایل مانیفست را ذخیره کرده و به chrome: // extensions بروید (Chrome باید به عنوان مرورگر برای این کار استفاده شود). هنگامی که در chrome: // extensions هستید ، حالت برنامه نویس را روشن کنید. پس از آن ، دکمه "Load unpacked" را فشار دهید و پوشه "extension" را انتخاب کنید.

درام رول لطفا…

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

مرحله 3: نمادها را ایجاد کرده و مانیفست را به روز کنید

یکی از وب سایت هایی که برای ترسیم نمادها به خوبی کار می کند ، https://www.piskelapp.com/ است. برنامه های نقاشی دیگری نیز برای استفاده وجود دارد. نمادها باید مربع باشند. این پروژه از آیکون های 16x16 ، 32x32 ، 48x48 و 128x128 استفاده می کند. هنگامی که نماد ساخته شد ، یک پوشه به نام "images" را در پوشه افزونه ایجاد کنید و نماد را در آن پوشه قرار دهید. شاید ایده خوبی باشد که یک تصویر را با توجه به اندازه آن نامگذاری کنیم. به عنوان مثال ، 'icon32.png'. کد جدید در زیر آمده است:

{

"name": "اولین افزونه" ، "نسخه": "1.0" ، "description": "من می توانم یک برنامه افزودنی را کد کنم" ، "manifest_version": 2 ، "browser_action": {"default_title": "اولین برنامه افزودنی" ، " default_icon ": {" 16 ":" images/icon16-p.webp

برای مراجعه به کد مانیفست ، به https://developer.chrome.com/extensions/manifest بروید.

مرحله 4: یک پنجره بازشو اضافه کنید

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

ابتدا ، یک سند را به عنوان فایل 'popup.html' در پوشه افزونه ذخیره کنید.

در مرحله بعد ، فایل مانیفست را ویرایش کنید تا "popup.html" هنگام کلیک روی آن نمایش داده شود. کد جدید در زیر آمده است:

{

"name": "اولین افزونه" ، "نسخه": "1.0" ، "description": "من می توانم یک برنامه افزودنی را کد کنم" ، "manifest_version": 2 ، "browser_action": {"default_title": "اولین برنامه افزودنی" ، " default_icon ": {" 16 ":" images/icon16-p.webp

کاما را فراموش نکنید!

حال ، اگر کد HTML زیر به popup.html اضافه شود ، پس از کلیک روی آن 'Hello World' نشان داده می شود.

سلام دنیا

مرحله 5: ظاهر زیبا و تعاملی ایجاد کنید

اگر یک خط HTML اصلی تایپ شود ، حداقل کار را انجام می دهد. اگر CSS (Cascading Style Sheets) اضافه شود ، خنک تر به نظر می رسد و اگر جاوا اسکریپت اضافه شود ، می تواند تعاملی تر باشد. این آموزش به توضیح جزئیات HTML ، JavaScript و CSS نمی پردازد ، اما منابع زیادی به صورت آنلاین وجود دارد. در زیر کد برنامه ساده "Hello World" و سپس برنامه رنگارنگ تر به ترتیب آمده است:

سلام دنیا

سلام دنیا

#سلام {background-color: #000000؛ رنگ: #ff0000؛ مرز: 8px شروع #86a3b2؛ مرز شعاع: 50 پیکسل؛ تبدیل: چرخش (57 درجه) ؛ بالشتک: 10 پیکسل ؛ user-select: none؛ مکان نما: crosshair؛ گذار: تبدیل 2 ثانیه ؛ } #hello: hover {transform: rotate (-417deg)؛ }

این مثال دوم می تواند برای یک مبتدی بسیار گیج کننده باشد. اما ، این به شما نشان می دهد که CSS برای برنامه/برنامه افزودنی چقدر مهم است. اکنون زمان مناسبی برای استراحت و یادگیری برنامه نویسی HTML5 است و از developer.chrome.com برای مرجع استفاده کنید. ممکن است مدتی طول بکشد ، اما می توان یک تمدید عالی انجام داد.

مرحله 6: انتشار آن در فروشگاه وب Chrome

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

اولین کاری که باید برای افزودن یک برنامه افزودنی انجام شود این است که پوشه افزونه را به یک فایل زیپ تبدیل کنید. دومین کاری که باید انجام دهید این است که به https://chrome.google.com/webstore/category/extensions بروید و وارد حساب Google شوید. سپس ، روی دکمه چرخ دنده تنظیمات کلیک کنید و سپس روی 'dashboard developer' کلیک کنید. برای بارگذاری فایل زیپ ، دکمه "مورد جدید" را فشار دهید. هنگامی که آنجا هستید ، باید فهرست فروشگاه ، حریم خصوصی و قیمت گذاری را ویرایش کنید. اگر یک برنامه افزودنی برای بررسی ارسال شود ، می تواند به راحتی منتشر شود.

حالا که برنامه افزودنی به پایان رسید ، به کد نویسی ادامه دهید!