در اینجا چیزی است که من از ساختن یک افزونه کروم یاد گرفتم

Summarize this content to 400 words in Persian Lang

سوووو

اخیراً یک مشتری داشتم که مجبور شدم برای او یک صفحه فرود ایجاد کنم (در این مورد در وبلاگ دیگری صحبت خواهم کرد).

چیزی که من همیشه بیشتر از همه از آن متنفر بودم انتخاب فونت برای یک وب سایت است. من حتی ساعت‌ها ویدیو در تایپوگرافی تماشا کرده‌ام و هنوز انتخاب فونت برایم دشوار است. اوه باور کنید وقتی می‌گویم انواع فونت‌هایی که انتخاب می‌کنید تفاوت زیادی ایجاد می‌کند و به نوعی به یک صفحه شخصیت می‌افزاید. می تواند صفحه شما را از 🤮 به 🤯 ببرد.

به عنوان مثال اجازه می دهد تا 2 فونت مختلف را در صفحه NYT (New York Times) آزمایش کنیم

یکی از سمت چپ، “Cheltenham” و “Georgia” پیش فرض NYT است. مورد سمت راست یک “italiana” است حدس بزنید کدام خواناتر است؟ در کدام صفحه بیشتر خواهید ماند؟

یا

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

در حال رسیدن به ایده

اکنون آزمایش فونت های مختلف در یک وب سایت زمان زیادی می برد، همچنین به این دلیل است که بسیاری از ما پیش نمایش سریعی از فونت در وب سایت خود نداریم. (مخصوصاً وقتی خودتان آن را کدنویسی می کنید)

این زمانی بود که متوجه شدم داشتن یک پیش‌نمایش سریع از فونت‌ها به طور مستقیم در صفحه وب باعث می‌شود ساعت‌ها از حدس زدن من صرفه‌جویی شود.

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

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

چرا با کروم شروع کردم؟

خیلی تعجب نکردم که به دلیل تسلط بر بازار، تصمیم گرفتم با افزونه کروم شروع کنم. کروم دارای سهم بازار 65.41 درصد است و پس از آن سافاری – 18.39 درصد و Edge با 5.24 درصد قرار دارند. (منبع)

علیرغم اینکه مرورگر اصلی من Edge بود، تصمیم گرفتم افزونه را برای Chrome بسازم، بنابراین افراد زیادی می توانند از برنامه افزودنی من استفاده کنند، حالا اشتباه نکنید، من هنوز از کروم استفاده می کنم، اما گاهی اوقات این برنامه بخش بزرگی از حافظه رایانه من را اشغال می کند. به علاوه انتقال یک برنامه افزودنی ساخته شده از کروم به Edge چندان دشوار نیست (حداقل این چیزی است که من خواندم)

تزریق ویجت در مقابل پاپ آپ

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

من روی پنجره بازشو تمرکز می کنم و ویجت را به صفحه تزریق می کنم.

پاپ آپ همان پنجره ای است که مطابق شکل زیر باز می شود.

در یک کانتینر مجزا اجرا می شود، دارای یک زمینه DOM و JS جداگانه است.

در حال حاضر، در حالی که این ممکن است برای اکثر موارد استفاده ایده آل باشد، من نمی خواستم برنامه افزودنی در یک مکان باشد. من می‌خواستم به مردم اجازه دهم ویجت را در صفحه جابه‌جا کنند، بنابراین استفاده از آن آسان‌تر و آزاردهنده‌تر است

به همین دلیل است که من انتخاب کردم که ویجت را مستقیماً به صفحه وب تزریق کنم تا چیزی شبیه به نمایش زیر باشد

استفاده از Vanilla JS VS Library

من توسعه این را در Js ساده شروع کردم، اما به سرعت متوجه شدم که استفاده از این رویکرد، زمان بیشتری را برای توسعه نمونه اولیه از من می‌برد، بنابراین تصمیم گرفتم از React.js استفاده کنم.

تنظیم اولیه چیزها با React.js برای برنامه افزودنی مدتی طول کشید (بیشتر به این دلیل که نتوانستم کمک زیادی با افزونه React+chrome پیدا کنم)، با این حال، من توانستم در مرحله توسعه سریعتر حرکت کنم.

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

بنابراین اگر از راه‌اندازی React + Webpack برای برنامه افزودنی خود استفاده می‌کنید، به راحتی از Github مرجع بگیرید

ShadowDOM 🦇

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

این زمانی بود که با ShadowDOM روبرو شدم، این یک مفهوم کاملاً جدید برای من بود، قبلاً هرگز در مورد آن نشنیده بودم.

بنابراین، اگر آن را در ShadowDOM اضافه کنید، اساساً هر استایل یا JS در صفحه بر استایل افزونه شما تأثیری نخواهد گذاشت.

بنابراین، وقتی فهمیدم چیست، قسمت‌هایی از کدم را بازنویسی کردم تا به جای DOM صفحه وب، به shadowDOM متصل شود. به این ترتیب استایل ویجت تحت تأثیر استایل صفحه قرار نمی گیرد.

در حال انتشار در فروشگاه کروم.

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

انتشار در فروشگاه کروم کمی متفاوت است، تعدادی سؤال امنیتی برای اطمینان از اینکه شما بدافزار منتشر نمی کنید، تنظیم شده است. پس از انتشار، به دلایل خوب، احساس کردم انتشار در کروم استانداردهای امنیتی بالاتری نسبت به انتشار در فروشگاه Play دارد.

حالا بسته به مجوزهای موجود در شما manifest.json شما باید دلیل نیاز به مجوز را در فرم آنها توجیه کنید.

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

و نوشتن اولین افزونه کروم من اینگونه پیش رفت.

من کی هستم؟

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

اگر می‌خواهید منبع باز بیشتری ببینید، می‌توانید من را در Github و Twitter دنبال کنید

اوه و فراموش نکنید که افزونه را بررسی کنید و نظرات خود را به من بگویید 🙃

سوووو

اخیراً یک مشتری داشتم که مجبور شدم برای او یک صفحه فرود ایجاد کنم (در این مورد در وبلاگ دیگری صحبت خواهم کرد).

چیزی که من همیشه بیشتر از همه از آن متنفر بودم انتخاب فونت برای یک وب سایت است. من حتی ساعت‌ها ویدیو در تایپوگرافی تماشا کرده‌ام و هنوز انتخاب فونت برایم دشوار است. اوه باور کنید وقتی می‌گویم انواع فونت‌هایی که انتخاب می‌کنید تفاوت زیادی ایجاد می‌کند و به نوعی به یک صفحه شخصیت می‌افزاید. می تواند صفحه شما را از 🤮 به 🤯 ببرد.

به عنوان مثال اجازه می دهد تا 2 فونت مختلف را در صفحه NYT (New York Times) آزمایش کنیم

یکی از سمت چپ، “Cheltenham” و “Georgia” پیش فرض NYT است. مورد سمت راست یک “italiana” است حدس بزنید کدام خواناتر است؟ در کدام صفحه بیشتر خواهید ماند؟

یا

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

در حال رسیدن به ایده

اکنون آزمایش فونت های مختلف در یک وب سایت زمان زیادی می برد، همچنین به این دلیل است که بسیاری از ما پیش نمایش سریعی از فونت در وب سایت خود نداریم. (مخصوصاً وقتی خودتان آن را کدنویسی می کنید)

این زمانی بود که متوجه شدم داشتن یک پیش‌نمایش سریع از فونت‌ها به طور مستقیم در صفحه وب باعث می‌شود ساعت‌ها از حدس زدن من صرفه‌جویی شود.

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

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

چرا با کروم شروع کردم؟

خیلی تعجب نکردم که به دلیل تسلط بر بازار، تصمیم گرفتم با افزونه کروم شروع کنم. کروم دارای سهم بازار 65.41 درصد است و پس از آن سافاری – 18.39 درصد و Edge با 5.24 درصد قرار دارند. (منبع)

علیرغم اینکه مرورگر اصلی من Edge بود، تصمیم گرفتم افزونه را برای Chrome بسازم، بنابراین افراد زیادی می توانند از برنامه افزودنی من استفاده کنند، حالا اشتباه نکنید، من هنوز از کروم استفاده می کنم، اما گاهی اوقات این برنامه بخش بزرگی از حافظه رایانه من را اشغال می کند. به علاوه انتقال یک برنامه افزودنی ساخته شده از کروم به Edge چندان دشوار نیست (حداقل این چیزی است که من خواندم)

تزریق ویجت در مقابل پاپ آپ

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

من روی پنجره بازشو تمرکز می کنم و ویجت را به صفحه تزریق می کنم.

پاپ آپ همان پنجره ای است که مطابق شکل زیر باز می شود.

در یک کانتینر مجزا اجرا می شود، دارای یک زمینه DOM و JS جداگانه است.

در حال حاضر، در حالی که این ممکن است برای اکثر موارد استفاده ایده آل باشد، من نمی خواستم برنامه افزودنی در یک مکان باشد. من می‌خواستم به مردم اجازه دهم ویجت را در صفحه جابه‌جا کنند، بنابراین استفاده از آن آسان‌تر و آزاردهنده‌تر است

به همین دلیل است که من انتخاب کردم که ویجت را مستقیماً به صفحه وب تزریق کنم تا چیزی شبیه به نمایش زیر باشد

استفاده از Vanilla JS VS Library

من توسعه این را در Js ساده شروع کردم، اما به سرعت متوجه شدم که استفاده از این رویکرد، زمان بیشتری را برای توسعه نمونه اولیه از من می‌برد، بنابراین تصمیم گرفتم از React.js استفاده کنم.

تنظیم اولیه چیزها با React.js برای برنامه افزودنی مدتی طول کشید (بیشتر به این دلیل که نتوانستم کمک زیادی با افزونه React+chrome پیدا کنم)، با این حال، من توانستم در مرحله توسعه سریعتر حرکت کنم.

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

بنابراین اگر از راه‌اندازی React + Webpack برای برنامه افزودنی خود استفاده می‌کنید، به راحتی از Github مرجع بگیرید

ShadowDOM 🦇

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

این زمانی بود که با ShadowDOM روبرو شدم، این یک مفهوم کاملاً جدید برای من بود، قبلاً هرگز در مورد آن نشنیده بودم.

بنابراین، اگر آن را در ShadowDOM اضافه کنید، اساساً هر استایل یا JS در صفحه بر استایل افزونه شما تأثیری نخواهد گذاشت.

بنابراین، وقتی فهمیدم چیست، قسمت‌هایی از کدم را بازنویسی کردم تا به جای DOM صفحه وب، به shadowDOM متصل شود. به این ترتیب استایل ویجت تحت تأثیر استایل صفحه قرار نمی گیرد.

در حال انتشار در فروشگاه کروم.

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

انتشار در فروشگاه کروم کمی متفاوت است، تعدادی سؤال امنیتی برای اطمینان از اینکه شما بدافزار منتشر نمی کنید، تنظیم شده است. پس از انتشار، به دلایل خوب، احساس کردم انتشار در کروم استانداردهای امنیتی بالاتری نسبت به انتشار در فروشگاه Play دارد.

حالا بسته به مجوزهای موجود در شما manifest.json شما باید دلیل نیاز به مجوز را در فرم آنها توجیه کنید.

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

و نوشتن اولین افزونه کروم من اینگونه پیش رفت.

من کی هستم؟

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

اگر می‌خواهید منبع باز بیشتری ببینید، می‌توانید من را در Github و Twitter دنبال کنید

اوه و فراموش نکنید که افزونه را بررسی کنید و نظرات خود را به من بگویید 🙃