هرسایتی رو تغییر بده برای خودت، حتی دیوار

خرید ماشین همیشه یکی از دغدغه ها بوده که به لطفا شرایط اقتصادی و تورم و..... هر چقدر پس از انداز می کنیم تا پس اندازمون برای خرید ماشین صفر کافی میشه ، ماشین گرون تر میشه ، و باز دوباره همین چرخه تکرار میشه . پس دیگه باید بیخیال خرید ماشین صفر کیلومتر بشیم و به فکر خرید ماشین کارکرده دست دوم باشیم .حالا باید به دنبال یه ماشین دست دوم بگردیم .از حق نگذریم یکی از محبوب ترین راهای پیدا کردن ماشین کارکرده همین سایت دیوار است.دیوار یکی از پر آگهی ترین ( البته نه راحت ترین) نیازمندی های کشور است.یکی از نکات مهمی که بارها توسط اطرافیان به ما گوشزد می شود ، خرید ماشین با شاسی ها سالم است .اما چطور ماشین های با شاسی سالم پیدا کنیم. درحال حاضر ،سایت دیوار باز کنیم بریم براساس قیمت و سال ساخت با استفاده از فیلتر جستجو کنیم . و با توجه به اینکه هیچ امکانی برای فیلتر وضعیت بدنه ، وضعیت شاسی ها وجود ندارد. باید تک به تک سایت آگهی را باز کنیم و بررسی کنیم .ولی ، یا راهی پیدا خواهم کرد یا راهی خواهم ساختچون من یک مهندس ، یک توسعه دهنده هستمحتما پلاگین فونت آرا دیدید ، پلاگینی که با نصب بروی مرورگر کروم ، فونت هر سایتی رو میتونید عوض کنید.با خودم گفتم همانگونه که فونت آرا فونت سایت ها را تغییر میده ، منم دیوار تغییر بدم ، البته نه صرفا تغییر فونتپس باید تغییر بدم که بتونم جزئیات آگهی را در همان صفحه ببینم فقط با حرکت موسبرای اینکار لازم بود یه پلاگین برای کروم بنویسیم .تنها فقط کافیست جاوا اسکریپت ، css ، html بلد باشیم ...مراحل کار :ابتدا یک پوشه با نام divar درست میکنیم و فایل های زیر در داخل آن ایجاد و محتوا را داخل فایل کپی می کنیم..manifest.json{ &quotmanifest_version&quot: 2, &quotname&quot: &quotنمایش سریع آگهی دیوار&quot, &quotdescription&quot: &quotنمایش سریع آگهی دیوار این پلاگین توسط دیوار توسعه داده نشده ، غیر رسمی می باشد.&quot, &quotversion&quot: &quot0.0.0.1&quot, &quotbrowser_action&quot: { &quotdefault_icon&quot: &quoticon.png&quot }, &quotcontent_scripts&quot: [ { &quotall_frames&quot: true, &quotjs&quot: [ &quotcontent.js&quot ], &quotmatches&quot: [ &quothttp://divar.ir/*&quot, &quothttps://divar.ir/*&quot ] } ], &quotpermissions&quot: [ &quothttp://divar.ir/*&quot, &quothttps://divar.ir/*&quot ]content.jsdocument.addEventListener('mouseover', function(e){ if(e.target && e.target.classList.contains('kt-image-block__image')){ document.querySelector(&quot.sticky-outer-wrapper&quot).style.display=&quotblock&quot var ida =(e.target.parentElement.parentElement.parentElement.parentElement.getAttribute('href').split(&quot/&quot).pop()); fetch('https://api.divar.ir/v5/posts/'+ida) .then(response => response.json()) .then(data => addtable(&quoti&quot,data.widgets)); } }); document.addEventListener('mouseout', function(e){ console.log(e.target.className); if(e.target && e.target.classList.contains('kt-image-block__image')){ document.querySelector(&quot.sticky-outer-wrapper&quot).style.display=&quotnone&quot } }); function addtable(t,j) { var str=&quot&quot j.list_data.forEach( function (item, index,t) { console.log(item); if(item.value) { if(item.title==&quotوضعیت شاسی جلو&quot || item.title== &quotوضعیت شاسی‌ها&quot) { if(item.value==&quotسالم و پلمپ&quot) { item.value= item.value + &quot✅ &quot ; } else { item.value= item.value + &quot❌ &quot ; } str=str +(&quot&quot + item.title +&quot:&quot + item.value + &quot<br>&quot); } else { str=str +(&quot&quot + item.title +&quot:&quot + item.value + &quot<br>&quot); } } } ); j.description=j.description.replace( &quotخوردگی&quot, &quotخوردگی ❌ &quot ) str = str + &quot &quot + j.description; document.querySelector(&quot.sticky-outer-wrapper&quot)=str; } var div = document.createElement(&quotdiv&quot); div.classList.add (&quotsticky-outer-wrapper&quot); div.style.position=&quotfixed&quot div.style.width=&quot300px&quot div.style.height=&quotauto&quot div.style.top=&quot70px&quot div.style.lineHeight=&quot28px&quot div.style.right=0; div.style.background=&quot#f00&quot div.style.color=&quot#fff&quot div.style.padding=&quot5px 10px&quot document.body(div);icon.pngتصویر دلخواه با پسوند pngخب حالا کافیه لینک زیر در مرورگر کپی کنیم .chrome://extensions/از گوشه بالا سمت راست Developer Mode فعال میکنیم . از سمت چپ بروی یک گزینه Load Unpacked کلیک کنید و پوشه ای که قبلا ساختیم را انتخاب می کنیم.و پلاگین را فعال کنید.حالا سایت دیوار باز کنید و موس رو بروی تصویر آگهی ببرید . تا جزئیات آگهی را در سمت راست صفحه در کادر قرمز مشاهده کنید.خروجی نهاییامیدوارم دیوار قابلیت فیلتر وضعیت بدنه و وضعیت شاسی را اضافه کند ، تا همه بتوانند به راحتی استفاده کنند.سوالی بود در خدمتم.