نوشته های Sohrab Sarabi

با NGINX (بخش دوم - نصب روی سرور)

Sohrab Sarabi — Wed, 04 Dec 2024 18:32:01 +0330

عکس رو از اینترنت کش رفتمبرای هرکسی که توی حوزه وب فعالیت میکنه، واضح و مبرهنه که nginx یه یار جدایی ناپذیره که گاه و بی‌گاه تحت هر عنوانی بهش نیاز پیدا میکنی. یکی واسه وب سرور، یکی reverse proxy و ...میخوام براساس کتابNGINX Cookbook | Advanced Recipes for High-Performance Load Balancingاثر Derek DeJonghe یه مجموعه آموزش‌ها و نکاتی رو راجب nginx بنویسم. البته توصیه میکنم خود کتاب رو بخونید ولی خب در حد توان سعی میکنم نکاتی که ممکنه توی کتاب هم نباشه و مدنظرم هست رو بنویسم(البته به دلایل واضح از نوشتن راجب nginx plus صرف‌نظر میکنم).لیست بخش‌های قبل:با NGINX (بخش اول - معرفی)توی این بخش قصد دارم فرآیند نصب nginx رو توضیح بدم. ترجیح خودم نصب روی ubuntu هست(طبیعتا چون ubuntu دارم و دوستش هم دارم) ولی خب براساس کتاب نصبش روی توزیعایی که دوستدار YUM هستن هم مینویسم.نصب روی Debian/Ubuntuاول مطابق خیلی از فرآیندای نصب و جهت آپدیت بودن رپوهای پکیج منیجر و گرفتن ورژن درست یه آپدیت میزنیم و یه سری برنامه‌های اساسی موردنیاز هم نصب میکنیم:$ apt update $ apt install -y curl gnupg2 ca-certificates lsb-release debian-archive-keyringاون -y هم بخاطر اینه که نپرسه که: میخوای نصبش کنم؟ اگه آره Y رو وارد کن!بعدش signing key (راجبش اینجا بخونید ولی درکل اینجوریه که پیش ubuntu به این منبعی که ازش دانلود میکنید رسمیت میده) مربوط به nginx رو دانلود و ذخیره میکنیم:$ OS=$(lsb_release -is | tr '[:upper:]' '[:lower:]') $ RELEASE=$(lsb_release -cs) $ echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] http://nginx.org/packages/${OS} ${RELEASE} nginx" | tee /etc/apt/sources.list.d/nginx.listاین lsb_release هم یه اطلاعاتی راجب سیستم عاملتون و نسخه‌ش بهتون میده. echo $(lsb_release -a) رو بزنید و نتیجه‌ش رو ببینید، باحاله!یه بار دیگه اطلاعات پکیج منیجرمون (apt عزیز) رو آپدیت میکنیم و بعدش nginx رو نصب میکنیم!$ apt update $ apt install -y nginx $ systemctl enable nginx $ systemctl start nginx همونطور که میبینید بعد از نصب سرویسش رو فعال میکنیم تا اگه سیستم ریستارت هم شد خودش دوباره استارت بخوره و در نهایت هم استارتش رو میزنیم. برای اینکه مطمئن بشید درست درحال اجراست این کامند رو بزنید که استاتوس سرویسش رو چک کنید:$ systemctl start nginxکه منطقا باید چنین خروجی‌ای ببینید:● nginx.service - nginx - high performance web server Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; preset: enabled) Active: active (running) since Tue 2024-11-03 13:20:31 +0330; 6h ago Docs: https://nginx.org/en/docs/ Process: 2086 ExecStart=/usr/sbin/nginx -c /etc/nginx/nginx.conf (code=exited, status=0/SUCCESS) Main PID: 2094 (nginx) Tasks: 9 (limit: 18742) Memory: 6.1M (peak: 10.0M swap: 2.0M swap peak: 2.0M) CPU: 26ms CGroup: /system.slice/nginx.service ├─2094 "nginx: master process /usr/sbin/nginx -c /etc/nginx/nginx.conf" ├─2095 "nginx: worker process" ├─2096 "nginx: worker process" ├─2097 "nginx: worker process" ├─2098 "nginx: worker process" Nov 03 13:20:31 useruser systemd[1]: Starting nginx.service - nginx - high performance web server... Nov 03 13:20:31 useruser systemd[1]: Started nginx.service - nginx - high performance web server.بریم سراغ بخش غیر دوست داشتنی! نصبش با YUMنصب از طریق پکیج منیجر YUMاول یه فایل درست میکنیم تا ریپازیتوری که nginx رو ازش دانلود میکنیم به پکیج منجیر معرفی کنیم:$ nano /etc/yum.repos.d/nginx.repoو با این محتوا پرش میکنیم:[nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/$releasever/$basearch/ gpgcheck=0 enabled=1اون centos رو بنا به توزیعتون تغییر بدید(مثلا به rhel) و بعدش این کامندا رو ران کنید:$ yum -y install nginx $ systemctl enable nginx $ systemctl start nginx $ firewall-cmd --permanent --zone=public --add-port=80/tcp $ firewall-cmd --reloadاولی نصبش میکنه.دومی سرویسش رو فعال میکنه که در صورت ریستارت سیستم خودکار استارت بشه.سومی استارتش میکنه.چهارمی پورت ۸۰ رو باز میکنه(پر واضحه که برای https باید پورت ۴۴۳ هم باز کنید)پنجمی فایروال رو ریلاود میکنه که این آزادسازی پورت اعمال بشه.اینم از این!توی پست بعدی فایل‌های اساسی، دایرکتوری‌ها و کامندهای مربوط به nginx رو توضیح خواهم داد.

با NGINX (بخش اول - معرفی)

Sohrab Sarabi — Mon, 02 Dec 2024 18:22:33 +0330

عکس کاور nginx در فیسبوکبرای هرکسی که توی حوزه وب فعالیت میکنه، واضح و مبرهنه که nginx یه یار جدایی ناپذیره که گاه و بی‌گاه تحت هر عنوانی بهش نیاز پیدا میکنی. یکی واسه وب سرور، یکی reverse proxy و ...میخوام براساس کتابNGINX Cookbook | Advanced Recipes for High-Performance Load Balancingاثر Derek DeJonghe یه مجموعه آموزش‌ها و نکاتی رو راجع‌به nginx بنویسم. البته توصیه میکنم خود کتاب رو بخونید ولی خب در حد توان سعی میکنم نکاتی که ممکنه توی کتاب هم نباشه و مدنظرم هست رو بنویسم(البته به دلایل واضح از نوشتن راجب nginx plus صرف‌نظر میکنم).معرفی Nginxسال ۱۹۹۹ بود که Igor Sysoev برای حل مشکل C10K (مساله‌ای که برای هندل کردن همزمان ده هزار کانکشن توسط سرور به‌وجود اومده بود) nginx رو ساخت. nginx با ساختار event‑driven و asynchronous که داشت انقلاب بزرگی توی صنعت وب‌سرورها به‌وجود آورد و تبدیل به سریعترین وب‌سرور دنیا شد!سال ۲۰۰۴ با اوپن سورس کردن nginx سرعت رشدش به شدت افزایش پیدا کرد و ایگور شرکت NGINX, Inc. رو بنیاد نهاد که هم رشد nginx و هم فروش nginx plus (که نسخه تجاری nginx با خیلی قابلیت‌های خفن‌تری هست) رو توسعه بده و در نهایت سال ۲۰۱۹ این شرکت بخشی از شرکت F5, Inc. شد و هنوز خیلی قوی درحال رشده. امروزه nginx میتونه هزاران هزار کانکشن همزمان رو مدیریت کنه و وب‌سایت‌های زیادی توی دنیا متکی بهش هستن.هدف nginx ایجاد سریعترین وب‌سرور موجود بود و حفظ این برتری همچنان یکی از اهداف اصلی این پروژه است. nginx فی کما سابق Apache و بقیه وب‌سرورها رو توی بنچ مارکای عملکرد وب‌سرور شکست میده. با این حال، از زمان انتشار اولیه nginx، وب سایت ها از صفحات ساده HTML به محتوای داینامیک و چندوجهی گسترش پیدا کردن و البته nginx هم همراه باهاشون رشد کرده و الان از تمام اجزای وب مدرن، ازجمله WebSocket، HTTP/2، gRPC، و استریم چندین فرمت ویدیویی (HDS، HLS، RTMP و غیره) پشتیبانی می‌کنه.اگرچه nginx به عنوان سریعترین وب‌سرور دنیا مشهور شد ولی معماری زیربنایی مقیاس‌پذیرش برای خیلی از وظایف حوزه وب که فراتر از ارایه محتواست ایده‌آله. از اونجایی که nginx می‌تونه حجم خیلی بالایی از اتصالات همزمان رو مدیریت کنه، معمولاً به عنوان یک پروکسی معکوس(reverse proxy) و load balancer برای مدیریت ترافیک ورودی و توزیعش به سرورهای بالادستی کندتر(از سرورهای پایگاه‌داده قدیمی گرفته تا میکروسرویس‌ها) استفاده می‌شه.درحال حاضر nginx یکی از پراستفاده‌ترین و پرکاربردترین وب سرورها توی دنیاست. یکی از دلایل محبوبیت nginx بدون شک داشتن قابلیت load balancing و reverse proxy برای پروتکل HTTP و همچنین خیلی دیگه از پروتکل‌های شبکه هست.توی پست‌های بعدی از نصب nginx تا کلی کارای خفن دیگه که میشه باهاش انجام داد رو به مرور می‌نویسم و سعی میکنم از تجارب خودمم با nginx صحبت کنم.

فرار از Github/Gitlab ! سلام به Gitea ! (بخش ۱)

Sohrab Sarabi — Sun, 24 Nov 2024 19:14:27 +0330

pاز اینجاهنوز خاطره تلخ بن شدن ایرانیا از طرف گیت‌هاب رو یادم هست! نه مقصر بودیم و نه کاری از دستمون برمیومد ولی خب به‌هرحال قربانی شده بودیم! تصمیم گرفتم یه چیز self-hosted دست و پا کنم و دیگه ریسک بودن کارای غیر شخصیم روی پلتفرمایی که خطری هستن رو به جون نخرم! یه کم بعدترش بود که با Gitea آشنا شدم. یه پلتفرم محشر که تا به امروز هم همراهم هست(شایدم همراهش هستم!) و خداییش خجالت‌زده‌م نکرده. سراغ گیت‌لب هم رفتم اما خب از اونجایی که بازی‌های سیاسی‌ای که ما توش اسیریم هیچ ثباتی نداره تصمیم گرفتم یه چیزی استفاده کنم که هم کارم رو کامل راه بندازه و اذیتم هم نکنه.فرآیند نصب Gitlab و دردسرایی که داره خیلی به‌نظرم اذیت کننده بود و جدای از اون خیلی اضافات و چیزای به‌دردنخوری داره که مطمئنم سراغشون نمیرفتم. توی سایت Gitea راجبش نوشته:Gitea is a painless, self-hosted, all-in-one software development service. It includes Git hosting, code review, team collaboration, package registry, and CI/CD. It is similar to GitHub, Bitbucket and GitLab.اون واژه painless واقعیه! و اگر به مقایسه‌اش با بقیه پلتفرما نگاه کنید(اینم نگاه کنید باحاله) میبینید که ارزشش رو داره!به قول خارجیا: First things first!نصب Giteaمن آموزش نصبش روی Ubuntu 22.04 رو اینجا براتون میذارم:اولش همون کارای روتین مثل آپدیت و آپگرید و اینا: (میدونید که، اون # یعنی با یوزر root لاگین کردید به سرور)# apt-get update # apt-get upgradeبعدش اگر git رو نصب ندارید نصبش میکنید:# apt install gitو بعدش ورژنش رو میگیریم که مطمئن بشیم درست نصب شده:# git --versionکه باید یه همچین خروجی‌ای بده:# git version 2.43.0من از پایگاه‌داده MariaDB استفاده میکنم. اگر نصب نداریدش پس:(توقف کوتاه!) نصب MariaDB# apt install mariadb-serverو برای یه کانفیگ اولیه این دستور رو اجرا کنید:# mysql_secure_installationبعدش این پیغام رو میبینید:NOTE: RUNNING ALL PARTS OF THIS SCRIPT IS RECOMMENDED FOR ALL MariaDB SERVERS IN PRODUCTION USE! PLEASE READ EACH STEP CAREFULLY!In order to log into MariaDB to secure it, you'll need the current password for the root user. If you've just installed MariaDB, and you haven't set the root password yet, the password will be blank, so you should just press enter here.Enter current password for root (enter for none):و چون یوزر root تون پسوورد نداره یه اینتر بزنید بره که این پیغام میاد:Setting the root password or using the unix_socket ensures that nobody can log into the MariaDB root user without the proper authorisation.You already have your root account protected, so you can safely answer 'n'.Switch to unix_socket authentication [Y/n] همونطور که خودش گفته میتونید با خیال راحت n بزنید.مورد بعدی:OK, successfully used password, moving on...Setting the root password ensures that nobody can log into the MariaDB root user without the proper authorisation.Set root password? [Y/n]که اینجا هم n بزنید.برای سوالات بعدی هم Y بزنید تا دیتابیس تست و یوزرای ناشناس حذف بشن و دسترسی ریموت به یوزر روت هم بسته بشه.(برای مشاهده توضیحات مفصل‌تر نصب پایگاه داده به این پست مراجعه کنید. شاید خودمم یه پست راجب نصب مفصل MariaDB نوشتم).ادامه نصب Giteaحالا وارد محیط دیتابیس بشید:# mariadb -u root -pو اینتر بزنید(اگر طبق آموزش نصب دیتابیس بالاتر همین پست پیش رفتید اون -p رو هم لازم نیست بنویسید).بعد از اینکه واردش شدید میخوایم برای Gitea یه دیتابیس و یه یوزر با دسترسی مناسب بسازیم و بعدش فلاش رو بکشیم(به معنای واقعی کلمه!) و خارج بشیم:MariaDB [(none)]>CREATE DATABASE gitea;MariaDB [(none)]>GRANT ALL PRIVILEGES ON gitea.* to 'gitea'@'localhost' IDENTIFIED BY 'Passworde-Taraz';MariaDB [(none)]>FLUSH PRIVILEGES; -- کشیدن فلاشMariaDB [(none)]>exit;حالا بریم سروقت ساختن یه دایرکتوری و دانلود فایلش و بقیه کارا:# adduser --system --shell /bin/bash --group --disabled-password gitاین --system یعنی یه یوزر سیستمی میسازید و مثلا توی لیست یوزرایی که موقع لاگین نمایششون میده این رو نمایش نمیده و به‌طور خودکار هم براشون دایرکتوری home نمیسازه. بهتره که یوزرای اینشکلی که خودمون نمیخوایم به‌طور مستقیم ازشون استفاده کنیم و رو به‌عنوان یوزر سیستمی تعریف کنیم.این --shell /bin/bash یعنی یوزرش دیفالت روی bash باشه(و نه روی sh).این --group یعنی توی گروه خودشه.این --disabled-password یعنی پسوورد برای این یوزر ست نمیشه(ولی خب کماکان میشه با کلید ssh به این یوزر ssh زد)این --home /home/git یعنی دایرکتوری homeاش توی این مسیر باشه.و درنهایت git هم اسم یوزرمون هست! هوف!خب! فایلش رو(که یه دونه فایل باینری هست که با go نوشته شده) رو دانلود میکنیم و بهش دسترسی مناسب میدیم و میفرستیمش توی دایرکتوی /usr/bin که مخصوص فایلای اجراییه:# wget -O gitea https://dl.gitea.com/gitea/1.22.3/gitea-1.22.3-linux-amd64 # chmod 755 gitea # cp gitea /usr/bin/به wget هم گفتیم که اسمش رو بذاره gitea و در ادامه دایرکتوری‌های مورد نیاز رو برای gitea میسازیم و سطح دسترسیشون رو هم تنظیم میکنیم:# mkdir -p /etc/gitea /var/lib/gitea/{custom,data,indexers,public,log}# chown git:git /etc/gitea /var/lib/gitea/{custom,data,indexers,public,log}# chmod 750 /var/lib/gitea/{data,indexers,log}# chmod 770 /etc/giteaبعدش یه سرویس systemd براش میسازیم که مجبور نباشیم هربار دستی اجراش کنیم:# nano /etc/systemd/system/gitea.serviceمحتوای فایل سرویس:[Unit] Description=Gitea After=syslog.target After=network.target [Service] RestartSec=3s Type=simple User=git Group=git WorkingDirectory=/var/lib/gitea/ ExecStart=/usr/bin/gitea web --config /etc/gitea/app.ini Restart=always Environment=USER=git HOME=/home/git GITEA_WORK_DIR=/var/lib/gitea [Install] WantedBy=multi-user.targetو Ctrl+S میزنیم که ذخیره بشه و Ctrl+X میزنیم که خارج بشیم از ادیتور.بعد systemd رو ریلاود میکنیم که فایل سرویس جدیدی که ساختیم رو بشناسه:# systemctl daemon-reloadو Gitea رو از طریق سرویسش اجرا میکنیم و فعالش هم میکنیم که وقتی سرور ریستارت شد به‌طور خودکار استارت بخوره:# systemctl start gitea # systemctl enable giteaیه استاتوس هم از سرویسش میگیریم که مطمئن شیم سالم و سرحال درحال اجراست:# systemctl status giteaکه باید یه همچین خروجی‌ای داشته باشه:● gitea.service - Gitea (Git with a cup of tea) Loaded: loaded (/etc/systemd/system/gitea.service; enabled; vendor preset: enabled) Active: active (running) since Sat 2024-11-09 14:31:51 UTC; 2 week 3 days ago Main PID: 111 (gitea) Tasks: 11 (limit: 11111) Memory: 1.1G CPU: 1h 11min 1.165s CGroup: /system.slice/gitea.service └─2377 /usr/bin/gitea web --config /etc/gitea/app.iniبه‌طور پیش‌فرض Gitea روی پورت 3000 اجرا میشه که میتونید از طریق:http://server-ip:3000بهش دسترسی داشته باشید. واسه اینکه فایروال جلوتون رو نگیره:# ufw allow 3000/tcpاز اونجایی که خیلی جالب نیست که یه همچین چیز خفنی همینجوری روی یه پورت ران باشه و زیردامنه مخصوص خودشو نداشته باشه چیکار میکنیم؟ آفرین! nginx رو نصب میکنیم و Gitea رو میبریم پشت reverse proxy و شیک و پیک و تر و تمیزش میکنیم مثل:http://git.example.irنصب nginx آسونه(البته اگه واسه کارای دیگه هم نیازش داشته باشید کمی دنگ و فنگ داره ولی خب نصب ابتداییش دقیقا همینقدر آسونه):# apt install nginxیه فایل کانفیگ واسه زیردامنه Giteaمون میسازیم:# nano /etc/nginx/conf.d/git.example.ir.confو به شرح زیر پرش میکنیم:server { listen 80 http2; server_name git.example.ir; proxy_read_timeout 720s; proxy_connect_timeout 720s; proxy_send_timeout 720s; client_max_body_size 50m; # Proxy headers proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Real-IP $remote_addr; # log files access_log /var/log/nginx/git.example.com.access.log; error_log /var/log/nginx/git.example.com.error.log; # Handle / requests location / { proxy_redirect off; proxy_pass http://127.0.0.1:3000; } }بعدا یه پست مفصل راجب نصب و بالا آوردن وبسایت روی nginx مینویسم ولی خب این باید کار کنه. دقت کنید که https فعال نیست و یه چیز ابتداییه.خب nginx رو ریلاود میکنیم تا فایل کانفیگ جدید رو بشناسه:# nginx -s reloadمیریم توی فایل کانفیگ Gitea و دامنه رو بهش معرفی میکنیم:# nano /etc/gitea/app.iniاینا رو وارد میکنیم:[server] DOMAIN = git.example.ir ROOT_URL = https://git.example.ir/و در نهایت سرویس Gitea رو ریستارت میکنیم تا فایل کانفیگ جدید رو بشناسه:# systemctl restart giteaو تادااااااا!!!!! Gitea شما روی دامنه‌ای که ست کردید بالا اومده!بار اولی که وارد میشید با یه همچین صحنه‌ای روبرو میشید.اطلاعات دیتابیس رو بهش بدید و اگر میخواید چیز دیگه‌ای مثل پورت خود Gitea یا پورت ssh و ... هم تغییر بدید انجام بدید.بعدش از قسمت Signup یه حساب کاربری بسازید. دقت کنید اولین اکانتی که میسازید میشه ادمین سیستم!البته همیشه میتونید با این دستور:# gitea admin user create --username --admin --password --email -c /etc/gitea/app.iniیوزر ادمین جدید بسازید.توی بخش بعدی راجب کانفیگای مفصل‌تر Gitea صحبت میکنم و بعدش راجب Gitea actions که میتونید باهاش به‌راحتی فرآیندای CI/CD مدنظرتونو پیاده‌سازی کنید.امیدوارم به‌دردتون بخوره!

Starlight Song by Starset

Sohrab Sarabi — Tue, 31 May 2022 14:07:38 +0430

https://i0.hdslb.com/bfs/archive/31b854f308571e56b0de4e0eec27064009b4182c.jpg منبعگروه موسیقی Starset یک گروه موسیقی راک آمریکاییه که سال ۲۰۱۴ توسط Dustin Bates توی شهر Salem ایالت Ohio آمریکا شکل گرفته و فعالیت خودش رو شروع کرده. اولین آلبوم خودشون رو سال ۲۰۱۴ به اسم Transmissions منتشر کردن. سال ۲۰۱۷ آلبوم دیگه‌ای به اسم Vessels منتشر کردن که آهنگ Starlight که در ادامه متن‌اش (و طی روزهای آتی ترجمه‌اش) رو میذارم جزو همین آلبوم هست. (صفحه ویکی پدیا مربوطه)این آهنگ توی سبک‌های Alternative/Indie, Dance/Electronic, Rock, Metal هست. من متن آهنگ رو از سایت LyricFind گرفتم. میتونید خود آهنگ رو از اینجا گوش بدید. ترانه‌سراهای این آهنگ Daniel Ticotin و Dustin Paul Bates هستن و این آهنگ تحت کپی‌رایت Starlight lyrics © Concord Music Publishing LLC منتشر شده.StardustIn you and in meFuse usInto unityPrimevalWe're coupledBorn from the universeFarewellThe void is callingDon't fearFor futures and dreamsThey're fleeting, retreatingIt's okI promiseI don't know what to sayBut I'm going to want you till the stars evaporateWe're only here for just a moment in the lightOne day it shines for us the next we're in the nightSo say the word and I'll be running back to find youA thousand armies won't stop me I'll break throughI'll soar the endless skies for only one sightOf your starlightTell meJust tell me to stayI'll turnI won't look awayI'll stay hereI'll never go but you don't feel the sameFarewellFarewell and godspeedLight yearsBetween you and meI'm fadingYour beauty conquers the darknessAt night the earth will riseAnd I'll think of you each time I watch from distant skiesWhenever stars go down and galaxies igniteI'll think of you each time they wash me in their lightAnd I'll fall in love with you againI will find youA thousand armies won't stop me I'll break throughI'll soar the endless skies for only one sight of your starlightDon't leave me lost here foreverShow me your starlight and pull me throughDon't leave me lost here foreverI need your starlight and pull me throughBring me back to you

ساخت یک Firefox Extension

Sohrab Sarabi — Fri, 13 Mar 2020 08:47:47 +0330

سلام. میخوام ساخت یه Extension (که البته بهش addon هم گفته میشه) برای مرورگر Firefox رو توضیح بدم.من خودم تازه شروع به توسعه Extension کردم و هنوز تجربه آنچنانی ندارم و این نوشته هم چیز تازه‌ای نیست، بلکه یه ترجمه (صدالبته بعلاوه یه سری نکات از طرف خودم) برای مقاله Your first extension شرکت موزیلا هست. مطمئنا در آینده تجربه‌های بیشتری که کسب میکنم رو قرار میدم.سعی میکنم این متن رو طوری بنویسم که کسانی که تجربه‌ای توی برنامه‌نویسی ندارند بتونند راهی برای ورود به این دنیای قشنگ و اعجاب انگیز پیدا کنند?.یک Firefox Add-on چیست؟لینک عکساگر بخوام ساده توضیح بدم، یه Extension (افرونه) یه افزونه(?!) هست که برروی یه سیستم اصلی قرار میگیره تا بتونه قابلیت‌های بیشتری به اون سیستم اضافه کنه یا برخی قابلیت‌هاش رو بهبود ببخشه.در مورد مرورگر‌ها هم موضوع به همین شکل هست. یه افزونه روی مرورگر نصب میشه تا بتونه به کاربر کمک کنه که با مرورگرش اونجوری که راحت‌تره و دلش میخواد کار کنه.حالا یه نگاهی هم به توضیح علمی‌ترش که توسط خود شرکت موزیلا منتشره شده (که اتفاقا خیلی ساده و شیک هم توضیح داده شده!) بندازیم:یه Extension یه سری ویژگی‌ها و عملکردها رو به مرورگر اضافه میکنه. یه Extension از طریق تکنولوژی‌ها آشنای تحت وب (HTML - CSS - JavaScript) ساخته میشه که میتونه از یه سری APIهای JavaScript داخل صفحه وب برای کارش بهره ببره و در عین حال به مجموعه APIهای خودش هم دسترسی داره!یه کم از سادگی خارج شد?! ولی توی مقاله‌های بعدی توضیحات بهتر و بیشتری میدم که همه‌چی راحت‌تر بشه. اگه گیج کننده شده به خوندن دوتا جمله اول پاراگراف اکتفا کنید.توصیه میکنم برای شروع برنامه‌نویسی یه سری به سایت w3schools بزنید.برای درک بهتر برنامه‌نویسی جاوااسکریپت هم، باحال‌ترین منبعی که دیدم کتاب JavaScript and JQuery: Interactive Front-End Web Development اثر Jon Duckett هست. فوق‌العاده‌ست این بشر!شروع ساخت اولین افزونه: Borderifyبه کادر قرمز دور صفحه نگاه کنیداین افزونه قراره که یه کادر قرمز به دور صفحاتی که براش مشخص خواهیم کرد(که البته میتونه شامل تمام صفحات وب بشه) اضافه میکنه. شاید براتون سوال پیش بیاد که چرا کادر قرمز؟ گمونم جوابش این باشه که طراحای فرانت‌اند برای تشخیص محل و چگونگی قرار گرفتن یه ماژول توی صفحه دورش یه کادر قرمز میکشن (و شاید میکشیدن! چون الان مرورگرا امکانات دیباگ خیلی خفن و باحالی دارن) چون کادر قرمز معمولا توی صفحه داد میزنه. پس یه موضوع باحال و با اصالت? برای ساخت اولین افزونه‌ست!از همین الان: سورس کد این افزونه رو شرکت موزیلا توی گیتهاب قرار داده. البته من یه ذره کوچولو دستکاریش میکنم پس دقیقا یکی نیست.و اینکه برای تستش به فایرفاکس نسخه ۴۵ یا بالاتر نیاز دارید.خب دیگه بریم سر اصل مطلب:اول باید یه دایرکتوری جدید برای افزونه‌مون ایجاد کنیم و میریم داخل اون دایرکتوری تا بتونیم افزونه‌مون رو به صورت مستقل و راحت توسعه بدیم. من دستورات ترمینالی مربوطه رو اینجا مینویسم(برای ترمینال‌های غیر ویندوزی! توی ویندوز یه فولدر درست کنید و برید داخلش?(نکته اینکه زیاد با ویندوز حال نمیکنم? پس گاهی راجبش شوخی میکنم)):mkdir borderify cd borderifyفایل اول: manifest.jsonیه فایل به اسم manifest.json توی دایرکتوری borderify بسازید (با دستور touch manifest.json میتونید اینکار رو انجام بدید) و کدایی که پایین نوشتیم داخلش قرار بدید:/* This comment is for fix direction in virgool.io inline code editor */ { "manifest_version": 2, "name": "Borderify", "version": "1.0", "description": "Adds a red border to all webpages matching mozilla.org.", "icons": { "48": "icons/border-48.png" }, "content_scripts": [ { "matches": ["*://*.mozilla.org/*"], "js": ["borderify.js"] } ] }کد بالاعکس کد رو هم گذاشتم تا ابهامی توش نباشه.اول یه توضیح راجب فرمت json بدم: json مخفف JavaScript Object Notation (نوشتار شی جاوااسکریپت) هست و در حقیقت توی زبان برنامه‌نویسی javascript اشیاه با این نوشتار نوشته و تعریف میشن. چون نوشتار خیلی منظم و قابل فهم و ساده‌ای داره خوبه که ازش برای تعریف ساختارهای پیکره‌بندی‌ها استفاده میشه و یه جورایی به یه استاندارد تبدیل شده (چیزای مشابهی که میشه استفاده کرد، چیزایی مثل XML هستند که واقعا گریه آدم رو درمیارن!)خب حالا توضیحات کد بالا:سه تا کلید اول داخل این کد: manifest_version و name و version تنها چیزای اجباری هستن که حتما باید توی فایل manifest.json ذکر بشن (و جالب اینکه خود فایل manifest.json هم تنها فایل اجباری برای ساخت یه افزونه فایرفاکس هست! حالا خودتون ببینید مینیمال‌ترین حالت یه افزونه چی میتونه باشه?!).کلید description اختیاری هست اما چون توی صفحه مدیریت افزونه‌ها (توی مرورگر) مستقیما نمایش داده میشه، توصیه میشه پرش کنید و حداقل یه توضیح نسبتا مختصر راجب افزونه‌تون بنویسید.کلید icons هم اختیاری هست ولی خب افزونه‌تون اگه یه آیکونی داشته باشه بهتره، پس بهتره اینم پر کنید. جلوتر بیشتر راجبش توضیح میدیم.و اما باحال‌ترین کلیدی که داخل این فایل هست کلید content_scripts هست که به فایرفاکسمون میگه که یه اسکریپت (یه تیکه کد، خواه کوچیک با بزرگ که با کلید js داخلش آدرس‌دهی میشه) رو توی صفحاتی که با مقدار کلید matches مطابق هست بارگذاری و اجرا کنه. اینجا ما میخوایم که اسکریپتی به اسم "borderify.js" رو توی تمام صفحات و زیردامنه‌های "mozilla.org" اعم از HTTP و HTTPS بارگذاری(load) و اجرا کنه.توضیحات اضافه راجب icon:اگه میخواید افزونه‌تون یه آیکون داشته باشه (که بازم میگم: زشت میشه اگه نداشته باشه) و این آیکون توی مرورگرتون نمایش داده بشه باید کلیدش رو داخل فایل manifest.json تعریف کنید. کلیدی که اینجا تعریف شده به مرورگرمون میگه توی دایرکتوری icons (که داخل دایرکتوری borderify باید ایجادش کنیم) دنبال یه آیکون به اسم "border-48.png" بگرده. میتونید از همین آیکونی که توی آموزش استفاده شده استفاده کنید یا اگه میخواید یه آیکون دیگه استفاده کنید توجه کنید که اسمش رو داخل فایل manifest.json درست تعریف کنید و سایزش هم همون سایزی باشه که تعریف کردید (که اینجا 48 پیکسل در 48 پیکسل هست). اگه دلتون میخواد میتونید آیکون‌هایی با سایزای دیگه هم تعریف کنید. یه عکس میزارم و فکر نمیکنم نیاز به توضیح بیشتری داشته باشه:به سایز تعریف شده به عنوان کلید و اسم آیکون به عنوان مقدارش دقت کنیدو در نهایت برسیم به قسمت کد موضوع که البته یه خط هست(?) و خیلی ساده‌ست:اول توی دایرکتوری borderify یه فایل به اسم borderify.js میسازیم و کدی که پایین ذکر میکنیم توش قرار میدیم:document.body.style.border = "5px solid red"عکس خط کد بالاو البته عکسش رو هم گذاشتیم هرچند نیازی بهش نیست.این اسکریپتی که نوشتیم توی تمام صفحاتی که الگوش رو توی بخش "content_scripts" فایل manifest.json تعریف کردیم (همون صفحات سایت mozilla.org) بارگذاری و مشابه اسکریپت‌هایی که داخل یه صفحه وب قرار دارن اجرا میشه.نوشتن افزونه تموم شد. در نهایت دقت کنید که ساختار فایل دایرکتوری borderify به شکل زیر باشه:ساختار دایرکتوری borderifyو اما بخش آخر که تست افزونه هست.برای تست افزونه‌تون میتونید خیلی راحت فایلای داخل دایرکتوری zip کنید و فرمتش فایل zip شده رو به xpi تغییر بدید.بعدش برید داخل صفحهabout:debugging#/runtime/this-firefoxتوی مرورگرتون:و گزینهLoad Temporary Add-on...رو بزنید و فایلی که با فرمت xpi ساختیم رو بارگذاری میکنیم.و در نهایت میبینید که افزونه توی بخش افزونه‌های مرورگرتون نمایش داده میشه:من اینجا افزونه رو ندارم ولی خب به همینجا اضافه میشهو نتیجه کار یه چیزی مثل شکل پایین میشه:و اتمام کار!خوشحال میشم اگه نظراتتون رو باهام در میون بذارید و سعی میکنم این نوشته و نوشته‌های بیشتری رو توی وبسایتم قرار بدم و خوشحال میشم بهش سر بزنید.