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

خرید ماشین همیشه یکی از دغدغه ها بوده که به لطفا شرایط اقتصادی و تورم و..... هر چقدر پس از انداز می کنیم تا پس اندازمون برای خرید ماشین صفر کافی میشه ، ماشین گرون تر میشه ، و باز دوباره همین چرخه تکرار میشه . پس دیگه باید بیخیال خرید ماشین صفر کیلومتر بشیم و به فکر خرید ماشین کارکرده دست دوم باشیم .

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

دیوار یکی از پر آگهی ترین ( البته نه راحت ترین) نیازمندی های کشور است.

یکی از نکات مهمی که بارها توسط اطرافیان به ما گوشزد می شود ، خرید ماشین با شاسی ها سالم است .

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

ولی ، یا راهی پیدا خواهم کرد یا راهی خواهم ساخت

چون من یک مهندس ، یک توسعه دهنده هستم

حتما پلاگین فونت آرا دیدید ، پلاگینی که با نصب بروی مرورگر کروم ، فونت هر سایتی رو میتونید عوض کنید.

با خودم گفتم همانگونه که فونت آرا فونت سایت ها را تغییر میده ، منم دیوار تغییر بدم ، البته نه صرفا تغییر فونت

پس باید تغییر بدم که بتونم جزئیات آگهی را در همان صفحه ببینم فقط با حرکت موس

برای اینکار لازم بود یه پلاگین برای کروم بنویسیم .

تنها فقط کافیست جاوا اسکریپت ، 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.js

document.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 کلیک کنید و پوشه ای که قبلا ساختیم را انتخاب می کنیم.

و پلاگین را فعال کنید.

حالا سایت دیوار باز کنید و موس رو بروی تصویر آگهی ببرید . تا جزئیات آگهی را در سمت راست صفحه در کادر قرمز مشاهده کنید.

امیدوارم دیوار قابلیت فیلتر وضعیت بدنه و وضعیت شاسی را اضافه کند ، تا همه بتوانند به راحتی استفاده کنند.

سوالی بود در خدمتم.