15 KiB
پروژه افزونه مرورگر بخش ۱: همه چیز درباره مرورگرها
طرح از وسیم شغام
آزمون پیش از درس
مقدمه
افزونه‌های مرورگر قابلیت‌های اضافی به مرورگر اضافه می‌کنند. اما قبل از اینکه یکی بسازید، باید کمی درباره نحوه کار مرورگرها یاد بگیرید.
درباره مرورگر
در این مجموعه درس‌ها، یاد می‌گیرید که چگونه یک افزونه مرورگر بسازید که روی مرورگرهای کروم، فایرفاکس و اج کار کند. در این بخش، خواهید فهمید که مرورگرها چگونه کار می‌کنند و عناصر افزونه مرورگر را طراحی می‌کنید.
اما مرورگر دقیقاً چیست؟ این یک نرم‌افزار است که به کاربر نهایی اجازه می‌دهد محتوایی را از یک سرور دریافت کرده و آن را روی صفحات وب نمایش دهد.
✅ کمی تاریخچه: اولین مرورگر "WorldWideWeb" نام داشت و توسط سر تیموتی برنرز-لی در سال ۱۹۹۰ ساخته شد.
برخی از مرورگرهای اولیه، از کارن مک‌گرین
وقتی کاربر با استفاده از یک آدرس URL (شناسه منبع یکنواخت) به اینترنت متصل می‌شود، معمولاً از طریق پروتکل انتقال ابرمتن با آدرس http یا https، مرورگر با یک سرور وب ارتباط برقرار کرده و یک صفحه وب را دریافت می‌کند.
در این مرحله، موتور رندر مرورگر آن را روی دستگاه کاربر نمایش می‌دهد که ممکن است یک تلفن همراه، دسکتاپ یا لپ‌تاپ باشد.
مرورگرها همچنین توانایی ذخیره‌سازی محتوا (کش) را دارند تا نیازی به دریافت مجدد آن از سرور نباشد. آن‌ها می‌توانند تاریخچه فعالیت‌های مرور کاربر را ثبت کنند، "کوکی‌ها" را ذخیره کنند که قطعات کوچکی از داده‌ها هستند و اطلاعاتی را برای ذخیره فعالیت‌های کاربر نگه می‌دارند، و موارد دیگر.
یک نکته بسیار مهم درباره مرورگرها این است که همه آن‌ها یکسان نیستند! هر مرورگر نقاط قوت و ضعف خود را دارد و یک توسعه‌دهنده وب حرفه‌ای باید بداند چگونه صفحات وب را به‌گونه‌ای طراحی کند که در مرورگرهای مختلف به خوبی کار کنند. این شامل مدیریت نمایشگرهای کوچک مانند تلفن همراه و همچنین کاربرانی است که آفلاین هستند.
یک وب‌سایت بسیار مفید که احتمالاً باید در مرورگر مورد علاقه خود نشانک‌گذاری کنید، caniuse.com است. هنگام ساخت صفحات وب، استفاده از لیست‌های فناوری‌های پشتیبانی‌شده این سایت بسیار کمک‌کننده است تا بتوانید بهترین پشتیبانی را برای کاربران خود فراهم کنید.
✅ چگونه می‌توانید بفهمید کدام مرورگرها در میان کاربران وب‌سایت شما محبوب‌تر هستند؟ آنالیتیکس خود را بررسی کنید - می‌توانید بسته‌های مختلف آنالیتیکس را به عنوان بخشی از فرآیند توسعه وب خود نصب کنید و آن‌ها به شما خواهند گفت که کدام مرورگرها بیشتر توسط کاربران استفاده می‌شوند.
افزونه‌های مرورگر
چرا ممکن است بخواهید یک افزونه مرورگر بسازید؟ این یک ابزار مفید است که وقتی نیاز به دسترسی سریع به وظایفی دارید که معمولاً تکرار می‌کنید، به مرورگر شما اضافه می‌شود. برای مثال، اگر نیاز دارید رنگ‌ها را در صفحات وب مختلف بررسی کنید، ممکن است یک افزونه انتخاب رنگ نصب کنید. اگر در به خاطر سپردن رمزهای عبور مشکل دارید، ممکن است از یک افزونه مدیریت رمز عبور استفاده کنید.
ساخت افزونه‌های مرورگر نیز سرگرم‌کننده است. آن‌ها معمولاً تعداد محدودی از وظایف را مدیریت می‌کنند که در انجام آن‌ها بسیار خوب هستند.
✅ افزونه‌های مورد علاقه شما کدامند؟ چه وظایفی را انجام می‌دهند؟
نصب افزونه‌ها
قبل از شروع ساخت، نگاهی به فرآیند ساخت و انتشار یک افزونه مرورگر بیندازید. اگرچه هر مرورگر کمی در نحوه مدیریت این کار متفاوت است، فرآیند در کروم و فایرفاکس مشابه این مثال در اج است:
توجه: مطمئن شوید که حالت توسعه‌دهنده را فعال کرده و اجازه نصب افزونه از فروشگاه‌های دیگر را بدهید.
به طور کلی، فرآیند به این صورت خواهد بود:
- افزونه خود را با استفاده از
npm run buildبسازید - در مرورگر به صفحه افزونه‌ها بروید، با استفاده از دکمه "تنظیمات و بیشتر" (آیکون
...) در بالا سمت راست - اگر نصب جدید است، گزینه
load unpackedرا انتخاب کنید تا یک افزونه جدید از پوشه ساخت آن (در مورد ما/dist) بارگذاری شود - یا، اگر افزونه قبلاً نصب شده است، روی
reloadکلیک کنید تا افزونه مجدداً بارگذاری شود
✅ این دستورالعمل‌ها مربوط به افزونه‌هایی است که خودتان می‌سازید؛ برای نصب افزونه‌هایی که در فروشگاه افزونه مرورگر منتشر شده‌اند، باید به فروشگاه‌های مربوطه بروید و افزونه مورد نظر خود را نصب کنید.
شروع کنید
شما قرار است یک افزونه مرورگر بسازید که ردپای کربنی منطقه شما را نمایش دهد، شامل مصرف انرژی منطقه شما و منبع انرژی. این افزونه یک فرم خواهد داشت که کلید API را برای دسترسی به API سیگنال CO2 جمع‌آوری می‌کند.
شما نیاز دارید به:
- یک کلید API؛ ایمیل خود را در کادر این صفحه وارد کنید و یک کلید برای شما ارسال خواهد شد
- کد منطقه شما که مربوط به نقشه برق است (برای مثال، در بوستون از 'US-NEISO' استفاده می‌کنم).
- کد شروع. پوشه
startرا دانلود کنید؛ شما کد را در این پوشه تکمیل خواهید کرد. - NPM - NPM یک ابزار مدیریت بسته است؛ آن را به صورت محلی نصب کنید و بسته‌های فهرست‌شده در فایل
package.jsonشما برای استفاده در دارایی‌های وب شما نصب خواهند شد
✅ درباره مدیریت بسته‌ها در این ماژول آموزشی عالی بیشتر بیاموزید.
چند دقیقه وقت بگذارید و کدبیس را مرور کنید:
dist
-|manifest.json (تنظیمات پیش‌فرض اینجا قرار دارند)
-|index.html (نشانه‌گذاری HTML فرانت‌اند اینجا قرار دارد)
-|background.js (کد جاوااسکریپت پس‌زمینه اینجا قرار دارد)
-|main.js (کد جاوااسکریپت ساخته‌شده)
src
-|index.js (کد جاوااسکریپت شما اینجا قرار می‌گیرد)
✅ وقتی کلید API و کد منطقه خود را آماده کردید، آن‌ها را در جایی یادداشت کنید تا بعداً استفاده کنید.
ساخت HTML برای افزونه
این افزونه دو نما دارد. یکی برای جمع‌آوری کلید API و کد منطقه:
و دیگری برای نمایش مصرف کربن منطقه:
بیایید با ساخت HTML برای فرم و استایل‌دهی آن با CSS شروع کنیم.
در پوشه /dist، یک فرم و یک بخش نتیجه بسازید. در فایل index.html، بخش فرم مشخص‌شده را پر کنید:
<form class="form-data" autocomplete="on">
<div>
<h2>New? Add your Information</h2>
</div>
<div>
<label for="region">Region Name</label>
<input type="text" id="region" required class="region-name" />
</div>
<div>
<label for="api">Your API Key from tmrow</label>
<input type="text" id="api" required class="api-key" />
</div>
<button class="search-btn">Submit</button>
</form>
این فرم جایی است که اطلاعات ذخیره‌شده شما وارد شده و در حافظه محلی ذخیره می‌شود.
سپس، بخش نتایج را ایجاد کنید؛ زیر تگ نهایی فرم، چند div اضافه کنید:
<div class="result">
<div class="loading">loading...</div>
<div class="errors"></div>
<div class="data"></div>
<div class="result-container">
<p><strong>Region: </strong><span class="my-region"></span></p>
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
</div>
<button class="clear-btn">Change region</button>
</div>
در این مرحله، می‌توانید یک ساخت اولیه انجام دهید. مطمئن شوید که وابستگی‌های بسته این افزونه را نصب کرده‌اید:
npm install
این دستور از npm، مدیر بسته نود، برای نصب وب‌پک برای فرآیند ساخت افزونه شما استفاده می‌کند. می‌توانید خروجی این فرآیند را با نگاه کردن به /dist/main.js ببینید - کد بسته‌بندی شده است.
فعلاً، افزونه باید ساخته شود و اگر آن را به عنوان افزونه در اج نصب کنید، یک فرم مرتب نمایش داده خواهد شد.
تبریک می‌گویم، شما اولین قدم‌ها را برای ساخت یک افزونه مرورگر برداشته‌اید. در درس‌های بعدی، آن را کاربردی‌تر و مفیدتر خواهید کرد.
🚀 چالش
به یک فروشگاه افزونه مرورگر نگاهی بیندازید و یکی را در مرورگر خود نصب کنید. می‌توانید فایل‌های آن را به روش‌های جالبی بررسی کنید. چه چیزی کشف می‌کنید؟
آزمون پس از درس
مرور و مطالعه شخصی
در این درس کمی درباره تاریخچه مرورگر وب یاد گرفتید؛ از این فرصت استفاده کنید تا درباره نحوه تصور مخترعان وب جهانی از استفاده آن بیشتر بخوانید. برخی سایت‌های مفید شامل:
تکلیف
سلب مسئولیت:
این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه انسانی حرفه‌ای استفاده کنید. ما مسئولیتی در قبال سوء تفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.