ه عنوان یه برنامه نویس، خوبه که بتونیم ابزارهایی رو توسعه بدیم که کار خودمون و بقیه رو راحت تر و یا جذاب تر بکنه…
خب هممون قاعدتا با مرورگر ها و وب گردی و سایتا سر و کله میزنیم و احتمالا هممون یکی یا چندتا افزونه روی مرورگرامون نصبه تا بتونیم تجربه وب گردی بهتری داشته باشیم یا یه سری ويژگی اضافه تر داشته باشیم تا کارامون خیلی راحت تر بشه😋
مثلا بذارید ببینیم که افزونه Wappalyzer چقد کارمون رو راحت تر میکنه!
نکته: این افزونه برای نمایش تکنولوژی های فنی توی یه وبسایت استفاده میشه😍
خب فرض کنید من بخوام بدونم تکنولوژی های فنی استفاده شده توی وبسایت ایران وبمستر چیه، خب چیکار باید بکنم؟ باید برم توی ایران وبمستر بگردم و ایمیل یا صفحه تماس با ما رو پیدا کنم و ازشون خواهش کنم که بگن برای ساخت پلتفرمشون از چه تکنولوژی هایی استفاده کردن و اونا هم برن با تیم فنی درمیون بذارن و اگر تیم فنی صلاح بدونه اطلاعات رو در اختیارم بذاره!
تازه اگر پیام رو ببینن و توجه کنن!
ولی با افزونه Wappalyzer به سادگی یه کلیک میتونم ببینم که ایران وبمستر از چه تکنولوژی هایی استفاده کرده البته قاعدتا برای همه جا دقیق نیست ولی یه دید کلی به من میده و همین کلی ارزش داره در برابر وقتی که ذخیره میشه😀
پس تیم این افزونه یه ابزار رو نوشتن که کار من رو کلی راحت میکنه، دمشون گرم🤩
این چیزا رو گفتم تا بدونید چقدر یه افزونه کروم و یا به شکل عمومی ترش یه ابزار میتونه خوب و کاربردی و کمک کننده باشه🧐
نکته:مثال های این مقاله با مرورگر کروم انجام شده ولی خودتون میتونید با سرچ مشابهش رو توی مرورگر خودتون پیدا کنید 
بوکمارک‌لِت چیه؟
ما توی مرورگر های مدرن یه قابلیتی داریم به اسم Bookmark که بهمون کمک میکنه یه صفحه رو نشون کنیم، مثلا من از صفحه google.com خوشم اومده و دوست دارم بعدا هم بیام و چکش کنم دوباره! خب اینجا میام یه نشان میذارم و یه اسم میذارم که یادم بیاد این نشان برای چیه، مثلا اسمش میذارم Best WebSite تا یادم بیاد که توش لینک گوگل رو گذاشتم!
توی کروم با زدن کلیدای CTRL + D میتونید صفحه فعلی رو به بوکمارک هاتون اضافه کنید، عنوان بوکمارک هم بر اساس عنوان صفحه گذاشته میشه.
اما بوکمارکلت چیه پس؟! یه بوکمارک که برای آدرسش بجای لینک یه وبسایت یه کد جاوااسکریپت هست! همین و بس😎
جالب شد، نه؟ یعنی یه بوکمارک که وقتی روش کلیک میکنید بجای اینکه بره به یه سایت یه کد جاوااسکریپت رو اجرا میکنه.
پس میتونیم توی ظاهر صفحه یه سری تغییر ایجاد کنیم، یه سری آمار به کاربر بدیم و جلوی یه سری اتفاقات رو بگیریم یا حتی حرکتای خلاقانه بزنیم مثلا بیایم تمام متنای توی صفحه رو وقتی بار اول روی بوکمارکلت کلیک شد پاک کنیم و اگر بار دوم کلیک شد اونا رو نمایش بده تا اگه یکی خواست کنجکاوی کنه مانعش بشیم😃
نکته: از اینجا دیگه بحث تخصصی میشه و لازمه که یه دانش نسبی از جاوااسکریپت داشته باشید ^_~
چطوری یکی از اینا بسازیم؟
برای اجرای کدای جاوااسکریپت توی مرورگر باید از آدرس :javascript اول کدمون استفاده کنیم و بعدش یه IIFE بدیم.
اما IIFE چیه؟
مخفف Immediately Invoked Function Expression هست یعنی یه تابع anonymous که بلافاصله بعد از تعریف فراخوانی میشه😮
1(function(){alert(‘This is our first bookmarklet’);}())
نکته: برای بوکمارکلت لازمه که تمام کدامون توی یه خط باشه اما نگران نباشید، یه سری ابزار هستن که اینکارو برامون میکنن😉
برای اینکه خروجیش رو ببینیم و اولین بوکمارک لتمون رو تست کنیم بایدBookmark اضافه کنیم، برای اینکار باید بریم توی صفحه chrome://bookmarks و روی فضای خالی صفحه راست کلیک کنیم و گزینه Add new bookmark رو بزنیم بعد اسمش رو بزنیم و به عنوان URL اول :javascript و بعد کدامون رو میذاریم، به همین خوشمزگی😋
الان فقط کافیه وارد یه وبسایت بشید و روی اون بوکمارک اون بالا بزنید!
نکته: توجه کنید که بوکمارکلت مثل افزونه هاتوی صفحه های مخصوص کروم مثل chrome://bookmarks اجرا نمیشه!
یخورده باحال تَرِش کنیم!
بیاید یه بوکمارکلت بنویسیم که هروقت روش کلیک شد، هرچی عکس توی صفحست رو قایمشون کنه!
123document.querySelectorAll(‘img’).forEach(img => { img.src = ‘’; });
اما این کد آماده بوکمارکلت شدن نیست، چرا؟ چون چندخطیه و IIFE نیست🙁
اینجاست که این ابزار به کارمون میاد، کافیه وارد سایتش بشیم و کد جاوااسکریپتمون رو بهش بدیم🙂
برای استفاده از بوکمارک‌لتمون هم دوتا راه داریم یا اون لینکی که توی بخش Output هست رو برداریم و خودمون توی bookmark اضافه کنیم یا اون بخش آبی رنگ رو بکشیم و توی Bookmark Bar مرورگر بندازیم…