Javascript yordamida brauzer plaginini qanday qilish mumkin. Google Chrome uchun kengaytmani yozish

iMacros - bu veb-sahifalarni sinab ko'rishda yordam beradigan kengaytma. Sahifada bir xil amallarni bajarish o'rniga, ishlab chiquvchi faqat iMacros-da kerakli harakatlar ketma-ketligini yozib olishi va kerak bo'lganda kengaytmani ishga tushirishi kerak.

Kengaytma Java, Flash, Flex, Ajax va Silverlight texnologiyalaridan foydalangan holda amalga oshirilgan saytlar bilan ishlashga qodir.

"Shriftlar bilan o'ynashni" yaxshi ko'radiganlar uchun kengaytma - bu sizga sahifa kodiga o'zgartirish kiritmasdan Google Fonts kutubxonasidagi shriftlarning barcha diapazoni bilan tajriba o'tkazish imkonini beradi. Siz nafaqat shriftning o'zini, balki uning hajmini, yozish uslubini va hokazolarni o'zgartirishingiz mumkin.

Cretive Bloqning so'zlariga ko'ra, hatto rasmlardan ham matn tanlash va nusxalash imkonini beruvchi Google Chrome kengaytmasi o'z ishida kamida bir marta o'rnatilgan matn bilan shug'ullanishga majbur bo'lgan har bir kishi uchun foydali bo'ladi.

Deyarli hech qanday qo'shimcha amallarni bajarmasdan, ma'lum bir sahifada qaysi shrift ishlatilishini darhol aniqlash imkonini beruvchi kengaytma - sichqoncha kursorini yozuv ustiga olib borish orqali.

YSlow - bu nafaqat ma'lum bir veb-sahifaning yuklanish tezligini tekshiribgina qolmay, balki ishlab chiquvchiga uni nima sekinlashtirayotganini ham aytib beradigan vositadir. Buning uchun kengaytma saytni Yahoo jamoasi tomonidan tuzilgan 34 ta ishlash qoidalaridan 23 tasiga muvofiqligini tekshiradi.

Veb-sayt elementlarini boshqarish uchun foydali vositalar to'plami - masalan, veb-resurslar va maketlarni tahlil qilish, kodni sinab ko'rish va parametrlarni bir zumda o'zgartirish va ko'rinish sahifalar.

Saytning SEO ning asosiy tamoyillariga mos kelishini, uning yetarli darajada ishlashi va foydalanuvchilarga qulayligini avtomatik tekshirish uchun kengaytma. Sinov natijalari bir turdagi nazorat ro'yxati shaklida taqdim etiladi - siz ko'proq ko'rishingiz mumkin batafsil ma'lumot va bajarilmagan elementlarning har biri uchun tavsiyalar, shuningdek, xatolarni darhol tuzatish.

Chrome DevTools yordamida sahifa kodiga kiritilgan har qanday oʻzgarishlarni avtomatik ravishda saqlash imkonini beradi. Material muallifi qayd etganidek, vosita ishlab chiquvchilarga pulni tejashga yordam beradi katta raqam vaqt.

Har qanday sahifani material sxemasining strukturaviy diagrammasiga "aylantirish" mumkin bo'lgan kengaytma - simli ramka. Dasturchilar va veb-dizaynerlarga brauzerdan chiqmasdan Internetdagi istalgan sahifaning tartibi bilan tanishish imkonini beradi.

Ripple Emulator - bu Google Chrome uchun emulyator kengaytmasi bo'lib, u turli xil veb-saytlarni sinab ko'rish imkonini beradi mobil platformalar turli ekran o'lchamlari bilan. Resurslarni tekshirish va tuzatish uchun boshqa kengaytmalar bilan birgalikda ishlatilishi mumkin.

Streak - bu burish imkonini beruvchi kengaytma pochta qutisi CRM tizimida Gmail-ga. Siz davom etayotgan tranzaktsiyalar va muzokaralar holatini kuzatishingiz mumkin elektron pochta kontragentlar bilan mahsulot foydalanuvchilarining so'rovlarini qayta ishlash va yuborilgan xatolarning tuzatishlarini kuzatish uchun Streak-dan foydalaning va hokazo.

uchun kengaytma tezkor qidiruv ishlab chiquvchilar uchun mashhur resursda Stack Overflow.

Brauzeringizdan PHP 5.5 hujjatlariga bir zumda kirish imkonini beradi.

PerfectPixel - bu Google Chrome uchun kengaytma. Bu sizga veb-sahifadagi shaffof panjarani "qo'shish" va unga nisbatan belgilangan masofalarni tekshirish imkonini beradi. Olingan sahifaning unga toʻliq mos kelishini taʼminlash uchun siz boshqa rasmlarni (masalan, asl tartibni) ustiga qoʻyishingiz mumkin:

Sahifalarning manba kodini ko'rish va CSS kodini tahrirlash uchun vosita.

Slayderni sudrab, soyalarni, quti doiralarini va hokazolarni o'zgartirishingiz mumkin. O'zgartirishlar kiritganingizdan so'ng, siz olingan kodni nusxalashingiz va uni sayt kodiga almashtirishingiz mumkin.

Resursda qaysi JavaScript kutubxonalari, ramkalar yoki CMS ishlatilishini aniqlaydigan brauzer kengaytmasi.

User-Agent Switcher - bu Google Chrome brauzerini "maskalash" imkonini beruvchi kengaytma Internet Explorer, Opera yoki boshqa brauzer.

Chrome uchun o'rnatilgan Internet Explorer emulyatori.

Oddiy va bepul onlayn muharriri tasvirlar. Tasvirlarni "qo'lga olish" yoki brauzer skrinshotlarini olish va ularni Chrome kengaytmasi yordamida darhol tahrirlash imkonini beradi.

Rang ko'rligidan aziyat chekadigan foydalanuvchilar uchun veb-xizmatlarni moslashtirishga yordam beradigan kengaytma - dasturchiga ushbu kasallikdan aziyat chekadiganlar saytni qanday ko'rishini ko'rsatadi. Veb-dizaynerlar va ishlab chiquvchilarga qulayroq xizmatlarni yaratishga imkon beradi.

Sahifadagi istalgan elementning balandligi, kengligi va o'rnini aniqlashga yordam beradigan oddiy vosita.

Veb-sahifani buzilgan yoki noto'g'ri havolalarni tekshiradigan kengaytma.

Rivojlanishda emas, balki ilhom va yaxshi fotosuratlarni topishda yordam beradigan kengaytma. Google Chrome brauzeridagi har bir yangi tabda Flickr-dan bitta rasmni ko'rsatadi. Uni bosganingizda, foydalanuvchi muallifning sahifasiga o'tadi, u erda u boshqa asarlari bilan tanishishi mumkin.

Ushbu ro'yxatdagi oldingi plaginga o'xshash brauzer kengaytmasi - faqat yangi yorliqda Flickr-dan olingan fotosuratlar o'rniga foydalanuvchi taniqli san'at asarlarini ko'radi - masalan, Van Gog yoki Manet rasmlari.

Google Chrome brauzerida trafikni tejash imkonini beruvchi trafikni siqish uchun Google-dan rasmiy kengaytma.

Kengaytmalar va plaginlar saytdagi va brauzerdagi mavjud funktsiyalarga foydali qo'shimchalardir. Ularning yordami bilan siz ekrandan audio va video yozishingiz, xatolarni aniqlashni yoqishingiz va yana ko'p narsalarni qilishingiz mumkin.
Ushbu maqolada biz eng oddiy kengaytmani - sevimli saytlarni ishga tushirishni yaratishni ko'rib chiqamiz. Ilova ibtidoiy bo'lishiga qaramay, u Google Chrome uchun kengaytmani yaratish va yuklab olish jarayonini ochib beradi.

Materialni yaxshiroq tushunish uchun HTML, CSS va JS (funktsiyalar to'plamini kengaytirish kerak bo'lsa) juda oddiy darajada bilish tavsiya etiladi, ammo har qanday holatda biz kodni tushuntiramiz.

Har bir Chrome kengaytmasi manifest.json fayliga ega bo'lishi kerak. U faqat ilovaning xususiyatlarini, umumiy tavsifini, versiya raqamini va ruxsatlarini tavsiflash uchun xizmat qiladi. Ushbu fayl haqida koʻproq Chrome jamoasining blogida oʻqishingiz mumkin.

Bu erda hamma narsa juda oddiy:

( "manifest_version": 2, "nom": "Tproger Launcher", "tavsif": "Tproger Launcher", "versiya": "1.0.0", "belgilar": ("128": "icon_128.png" ) , "browser_action": ( "default_icon": "icon.png", "default_popup": "popup.html" ), "ruxsatlar": ["activeTab"] )

Manifest.json faylida kengaytmamizni tasvirlab berganimizdan so'ng, keyingi bosqichga, ya'ni belgilashga xavfsiz o'tishimiz mumkin.

Birinchidan, bir nechta asosiy HTML kodini yozamiz:

Yuqorida biz plagin uchun ramka yozdik, endi u butunlay bo'sh va siz nom, piktogramma va shriftga havolalarni ko'rsatishingiz kerak. Buni havola yorlig'i yordamida amalga oshirish mumkin, u yopiq emasligiga e'tibor bering:

Tproger Media Tez ishga tushirish dasturi

Kodlashni belgilashni unutmang, aks holda kirill harflari ko'rsatilmaydi.

Keling, kodning ikkinchi blokiga, ya'ni tana tegi va uning mazmuniga o'tamiz.

Kengaytmani hozirgidan ko'ra chiroyli va qulayroq qilish uchun siz CSS uslublarini qo'shishingiz kerak.

/* Hujjatning modal tuzilishi */ /*butun hujjat uchun umumiy sozlamalar*/ html, tana ( font-family: “Open Sans”, sans-serif; font-size: 14px; margin: 0; min-height: 180px; padding : 0; width: 380px ) /*birinchi darajali sarlavhalar uchun sozlamalarni oʻrnating*/ h1 (shrift-family: “Menlo”, monospace; shrift-size: 22px; shrift-weight: 400; chekka: 0; rang; : #2f5876 ; ) a:link, a:visited (rang: #000000; kontur: 0; text-decoration: none; ) /*tasvir kengligini belgilash*/ img (kenglik: 30px; /*tasvir kengligi*/ ) .modal-header ( align-elementlar: markaz; /*elementlarni markazga tekislang*/ border-bottom: 0,5px qattiq #dadada; /*pastki boʻlinuvchi chiziq xususiyatlari*/ balandligi: 50px; ) .modal-content ( toʻldirish: 0 22px; /* toʻldirish yuqori va pastki, yuqori va chap*/ .modal-belgilar (chegara-yuqori: 0,5px qattiq #dadada; /*yuqori boʻlinuvchi chiziq xususiyatlari*/ balandligi: 50px; eni: 100%; ) .logo ( to'ldirish: 16px ; /*barcha tomondan to'ldirish*/ ) .logo-icon ( vertikal tekislash: matn-pastki; /*matnning pastki qismiga tekislang*/ margin-right: 12px; /*tasvirdagi elementlarning chekinishini belgilaydi*/ ) .version (rang: #444; shrift hajmi: 18px; )

Hujjatning asosiy sozlamalari o'rnatildi, keling, maqolaning boshida muhokama qilingan Flexbox-dan foydalaniladigan keyingi kod qismiga o'tamiz.

Flex-konteyner ( displey: flex; /*konteynerni blok elementi sifatida ko'rsatadi*/ justify-content: bo'sh joy; /*elementlarning bir xil tekislanishi*/ to'ldirish: 10px 22px; ) /*piktogrammali konteynerlar uchun sozlamalarni o'rnatish* / .flex ( shaffoflik: 1; /*belgining shaffofligi parametri*/ kengligi: 120px; ) .flex:hover ( shaffoflik: 0,4; /*element ustida turganda shaffoflik darajasi*/ ) .flex .fa ( shrift o‘lchami: 40px rang: #2f5876;

Biz izohlarda nisbatan murakkab masalalarni imkon qadar batafsil tushuntirishga harakat qildik. Endi biz kengaytmani yuklashimiz kerak Chrome brauzeri va u ishlaydi va agar u moderatsiyadan o'tsa, u kengaytma (plagin) do'konida paydo bo'ladi.

Endi to'satdan brauzer plaginining funksiyasini kengaytirish kerak bo'lsa, .js kengaytmali faylni qo'shamiz.

Tproger Media Quick Launcher /*bu yerda biz uslublar qo‘shdik*/

Tproger launcher /* Modal hujjat tuzilishi */ /*butun hujjat uchun umumiy sozlamalar*/ html, tana ( shrift-family: “Open Sans”, sans-serif; shrift o‘lchami: 14px; chekka: 0; min-balandlik: 180px ; padding: 0; width: 380px ) /*birinchi darajali sarlavhalar uchun sozlamalarni oʻrnating*/ h1 ( font-family: “Menlo”, monospace; font-weight: 400; margin: 0; ; color: #2f5876; ) a:link, a:visited (rang: #000000; kontur: 0; text-decoration: none; ) /*tasvirning kengligini belgilang*/ img ( width: 30px; /*tasvir kengligi* / ) .modal -header ( align-elementlar: markaz; /*elementlarni markazga tekislang*/ border-bottom: 0,5px qattiq #dadada; /*pastki boʻlinuvchi chiziq xususiyatlari*/ balandligi: 50px; ) .modal-kontent ( to'ldirish: 0 22px; /*yuqorida va pastda to'ldirish, yuqorida va chapda*/ .modal-piktogramma (chegara-yuqori: 0,5px qattiq #dadada; /*yuqori bo'linuvchi chiziq xususiyatlari*/ balandligi: 50px; eni: 100%; ) .logo ( to'ldirish : 16px; /*barcha tomondan to'ldirish*/ ) .logo-icon ( vertikal tekislash: matn-pastki; /*matnning pastki qismiga tekislang*/ margin-right: 12px; /*tasvirdagi elementlarning chekinishini o‘rnatadi*/ .versiya ( rang: #444; shrift o‘lchami: 18px; ) .flex-container ( displey: flex; /*konteynerni blok element sifatida ko‘rsatadi*/ justify-content : bo'sh joy- orasida; /*elementlarning bir xil tekislanishi*/ to'ldirish: 10px 22px ) /*piktogrammali konteynerlar uchun sozlamalarni o'rnatish*/ .flex ( shaffoflik: 1; /* belgining shaffofligi parametri */ kengligi: 120px; ) .flex :hover ( shaffoflik : 0,4; /*element ustiga kursorni o‘tkazishda shaffoflik darajasi*/ ) .flex .fa (shrift o‘lchami: 40px; rang: #2f5876; ) Tproger Launcher (1.0.0)

Tez kirish Oddiy dasturchining kontent saytlariga

Tekshiruvdan so'ng siz kengaytmani nashr qilishni boshlashingiz mumkin. Buning uchun sizda quyidagi fayl va papkalar bo'lishi kerak:

Kengaytmani do'konga yuklab olish uchun biz menyuga o'tishimiz kerak, sichqonchani ustiga olib boring " qo'shimcha sozlamalar", va keyin "kengaytmalar" ni tanlang yoki manzil satriga chrome://extensions/ kiriting.

Men har doim odamlarga aytib berishni xohlardim qiziqarli imkoniyatlar(texnologiyalar) hozir hamma uchun mavjud bo'lishi mumkin, lekin negadir hamma uchun mavjud emas. Ha, bu tavtologiya bo'lib chiqdi, lekin bu men uchun bu yonayotgan mavzudagi ichki g'azabimni to'liq aks ettiradi. Qanday bo'lmasin, endi gap ular qanday gapirayotgani haqida bo'lmaydi. Bugun biz kengaytmalarni yaratish haqida gaplashamiz Google brauzeri Chrome (keyingi o'rinlarda Chrome deb yuritiladi).

Ushbu maqola davomida biz ishlab chiqadigan kengaytmani Google Chrome Internet-do'konida topish mumkin, yagona farq shundaki, u rivojlangan funksiyalarga ega. Bunga qo'shimcha ravishda, mavjud manba kodi GitHub-da yana bir bor ogohlantirish bilan, u erda hamma narsa CoffeeScript-da yozilgan va bu erda voqea JavaScript-da aytib o'tiladi. Aytgancha, men CoffeeScript-ning muxlisi yoki tarafdori emasman, lekin bu juda qiziqarli va foydali narsa - sinab ko'rishingizni maslahat beraman.

Agar siz Chrome, Firefox, Maxthon va boshqa brauzerlar uchun kengaytma yaratish g'oyasini ilgari o'ylab ko'rgan bo'lsangiz, ehtimol siz Chrome uchun minimal kuch sarflashingiz kerakligini allaqachon payqagansiz. Buni tegishli brauzerlar uchun hujjatlarni ko'rib chiqish orqali tekshirishingiz mumkin.

Kengaytmani yozish uning tavsifi va u hal qiladigan vazifalarni belgilashdan boshlanadi. Men o'zimning xo'jayinim bo'lganim uchun va muddatlarni xohlagancha o'tkazib yuborishim mumkin, texnik xususiyatlarni yozishim shart emas - buni tushunish kifoya:

• Kengaytma barcha izohlarni yashirishi kerak ijtimoiy tarmoq"VK";
• Kengaytma sharhlarni ko'rsata olishi kerak;
• Kengaytma muayyan sahifalarda sharhlarni ko'rsatish imkoniyatiga ega bo'lishi kerak;

Bir qarashda hamma narsa oddiy va biz buni qila olamiz. Biroq, maqola doirasida biz faqat birinchi ikkita fikrni amalga oshiramiz.

Men mazmuni shunday bo'lishi mumkin bo'lgan savollarni oldindan ko'raman: "Agar bu ijtimoiy tarmoqning maqsadi bo'lsa, nega izohlarni yashirish kerak?!" Xo'sh, bu batafsil javobga loyiq bo'lgan adolatli savol:

Vaziyatlar shunday bo'ldi yaqinda, VK-da sharhlarni ko'rganimda, sharhlovchilarga yuz palma tog'larini bermoqchiman. Men juda ko'p turli xil ommaviy sahifalarga obuna bo'laman, tematik (veb-ishlab chiqish) va unchalik emas. Va bu qanchalik g'alati tuyulmasin, men mushuklar emas (mening holimda pandalar) emas, balki o'zim uchun qiziqarli bo'lgan tarkibga ega guruhlarda eng saxiy bo'laman. Komentariyalarda bunchalik noprofessional va xunuk ma'lumotlar oqimini hech qachon ko'rmaganman va ular hatto bahslashishni ham o'ylashadi. Bundan tashqari, sharhlar yangiliklar tasmasi Ular estetik jihatdan yoqimli ko'rinmaydi. Umuman olganda, aytilgan va bajarilgan.

Men uchun eng yoqimli ajablanib, sayohatning boshida bizni harakatlarning tavsiflovchi tabiati kutib olishi edi. Oddiy qilib aytganda, biz ilovamizni, uning huquqlari va imkoniyatlarini tasvirlashimiz kerak - buning uchun manifest.json faylidan foydalaniladi.

Avvalo, siz uchta majburiy maydonni to'ldirishingiz kerak:

( "manifest_version": 2, // Chrome 18-dan boshlab 2-to'plam, aks holda 1 ta (bunday eski narsalar qo'llab-quvvatlanmaydi) "nom": "Mening kengaytmam", // Kengaytma nomi "versiya": "versionString" // Kengaytma versiyasi )

Agar nom bilan hamma narsa aniq bo'lsa va manifest versiyasi yanada sodda bo'lsa, siz kengaytma versiyasini diqqat bilan ko'rib chiqishingiz kerak.

Demak, biz hammamiz bir narsaning versiyasi nuqta bilan ajratilgan uchta raqamdan iborat bo'lishiga o'rganib qolganmiz - Major.Minor.Patch (son ma'nosi). Npm, bower va boshqa lazzatlar bilan suhbat qisqa: bu tarzda yoki umuman yo'q. Ammo Google quyidagi variantlarni taklif qiladi:

"versiya": "1" "versiya": "1.0" "versiya": "2.10.2" "versiya": "3.1.2.4567"

Manifest faylidagi barcha maydonlar haqida batafsil ma'lumotni hujjatlarda topishingiz mumkin.

Bizning holatda, manifest fayli quyidagicha ko'rinadi:

( "manifest_versiya": 2, "nom": "__MSG_ilova_nomi__", "short_name": "VKCommentBlocker", "ta'rif": "__MSG_app_description__", "versiya": "0.1.0", "default_locale": "ru", " ruxsatlar": [ "activeTab" ], "browser_action": ( "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" ), "belgilar": ( "16": "icon_16.png", "48 ": "icon_48.png", "128": "icon_128.png" ), "fon": ( "doimiy": noto'g'ri, "sahifa": "background.html" ), "content_scripts": [ ( "mos keladi" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "uslublar" /commentblocker_on.css" ])

Ilgari ko'rib chiqilmagan narsalardan

• __MSG_key__ - bu Chrome ilovalarni xalqarolashtirish (i18n) bo'yicha qabul qilingan. Manifest faylida ham, boshqa fayllarda ham (hatto CSS) ham foydalanish mumkin.
• web_accessible_resources - keyinchalik veb-sahifalar kontekstida foydalaniladigan resurs yo'llari to'plami. Undagi yo'lni ko'rsatmasdan, agar bunday xatti-harakatlar kutilsa, veb-sayt sahifalarida hech narsa ishlatib bo'lmaydi.

Chrome karma uchun katta afzallik shundaki, biz endi kengaytmani yoqishimiz mumkin, albatta, agar manifest.json da ko'rsatilgan barcha resurslar yaratilgan bo'lsa.

Menimcha, commentblocker.css va commentblocker_on.css fayllaridagi narsalarga e'tibor qaratishning hojati yo'q. Men faqat birinchisini beraman, unda sharhlarni o'z ichiga olgan barcha tanlovchilar ro'yxati keltirilgan:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link (koʻrinishi: yashirin !muhim; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_comments, #vour_comments,your_compy our_comment ( displey: none !im muhim; ko'rinish: yashirin ! muhim; ) tana: keyin (pozitsiya: belgilangan; kontent: "__MSG_mode_enable__"; yuqori: 5px; oʻng: 5px; toʻldirish: 6px 12px; fon rangi: #ffc; chegara: 1px qattiq #ddd; z-index: 9999 )

commentblocker_on.css faylida, siz taxmin qilganingizdek, aksincha. E'tibor bering, CSS-da men til kaliti tarkibiga ega qatordan foydalanmoqdaman: "__MSG_mode_enable__" . Ushbu kalitlar saqlanadigan faylni yaratish vaqti keldi.

Kengaytmamizning ildizida biz _locales katalogini va uning ichida joylashgan en va ru kataloglarini yaratamiz. Keyin, biz messages.json faylida kalitlarimizni tasvirlaymiz.

( "app_name": ( "xabar": "VK Comment Blocker" ), "app_description": ( "xabar": "Yangiliklar tasmasi va guruhlardagi sharhlarni yashirishning qulay usuli." ), "brauzer_action": ( "xabar" ": " Sharh turini almashtirish" ), "mode_enable": ( "xabar": "Izohlar yo'q!" ), "mode_disable": ( "xabar": "Izohlar bilan!" ) )

Xabar maydoniga qo'shimcha ravishda siz hujjatlardan bilib olishingiz mumkin bo'lgan boshqa sohalar ham mavjud.

Endi biz background.html fayllarini yaratamiz, birinchi navbatda:

Fon

Bu erda hamma narsa oddiy HTML bilan bir xil - g'ayrioddiy narsa yo'q. Aytgancha, fon.html faylini yaratishingiz shart emas, chunki u manifest.json maydonlari asosida avtomatik ravishda yaratiladi.

Kengaytmani bitta qator JavaScript yozmasdan ishga tushirishingiz mumkin. Buning uchun siz menyudan o'tishingiz kerak:

• Google Chrome (Gamburger)ni sozlash va boshqarish
• Qo'shimcha vositalar
• Kengaytmalar
• "Ishlab chiquvchi rejimi" yonidagi katakchani belgilang
• Ochilmagan kengaytmani yuklab oling
• Kengaytmali jildni tanlang

Kengaytma yuklandi va menyuda paydo bo'ldi. Ha, ha, bu "B".

Biz yaratgan kengaytmaning boshida hech narsa yo'qdek tuyuladi (hech qanday mantiq yo'q) va "B" harfi bilan ijtimoiy tarmoq sahifalaridagi barcha sharhlar endi yashiringan. Javob manifest.json da joylashgan, bu erda "content_scripts": () maydonida biz commentblocker.css fayli qaysi sahifalarda (http://vk.com/* va https://vk.com/*) ko'rsatilishini ko'rsatdik. avtomatik ravishda kiritiladi, bu esa barcha izohlarni yashiradi. Men sizga matematika naqshlari haqida ko'proq o'qishni maslahat beraman. Bu shunchaki tashqi ko'rinishda juda oddiy, lekin kaput ostida u deyarli kulrang kelin, barcha qo'ng'iroqlar va hushtaklar bilan.

Shunday qilib, bitta kod satrini yozmasdan, bizda allaqachon unga tayinlangan asosiy vazifani bajaradigan kengaytma mavjud.

Vazifaning ikkinchi nuqtasini bajarish, ya'ni sharhlarni ko'rsatish qobiliyatini amalga oshirish uchun qoladi. Qisqasi, commentblocker.css fayli qoidalarini bekor qiladigan commentblocker_on.css faylini surishimiz kerak. Va bu erda bizning qudratli JavaScript yordamimizga shoshilmoqda.

background.html haqida aytganlarimni eslaysizmi? Ha, ha, uni yaratish shart emasligi haqida. Manifest.json faylini biroz o'zgartiramiz:

... "fon": ( "doimiy": noto'g'ri, "skriptlar": [ "scripts/commentblocker.js" ] ), ...

Hozirgina JavaScript fayli ulandi. Hech qanday maxsus narsa yo'q. Keling, ushbu faylga o'tamiz.

Siz shunchaki JS ni sahifaga joylay olmaysiz. Xuddi shu muammo nafaqat skriptlar bilan. Shuning uchun biz maxsus executeScript inyeksiyasidan foydalanishimiz kerak.

Avval kengaytma belgisiga bosish hodisasi ishlov beruvchisini qo'shishingiz kerak:

Chrome.browserAction.onClicked.addListener(funksiya(tab) ( chrome.tabs.executeScript(tab.id, (kod: "(" + toggleComments.toString() + ")();" )); ));

Bu erda toggleComments bu bizning CSS faylimizni sahifaga kiritadigan funksiya:

Var toggleComments = function() ( var extensionLink; (document.getElementById("kengaytma") == null) ? (extensionLink = document.createElement("link"), extensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), extensionLink.id = "kengaytma", extensionLink.type = "text/css", extensionLink.rel = "stylesheet", document.getElementsByTagName("head").appendChild(extensionLink)) : (hujjat. getElementsByTagName("head").removeChild(document.getElementById("kengaytma"))) );

O'ylaymanki, ushbu kod qismi bizning CSS sahifamizga ulanganligini tekshiradi va uni yoqish yoki o'chirish zarurligi haqida xulosa chiqaradi.

Aytgancha, turli xil ehtiyojlarni qamrab oladigan ko'plab tadbirlar mavjud emas. Masalan, bunday hodisalar mavjud:

• onCreated - yorliq yaratish.
• onUpdated - yorliqni yangilash.
• onRemoved - varaqni yopish.

Ta'kidlash joizki, onUpdated hodisasi ikki marta chaqiriladi:

• Sahifani yangilash;

StackOverflow-da ular sahifa holatini tekshirishni maslahat berishadi:

Chrome.tabs.onUpdated.addListener(funksiya(tabId, changeInfo, tab) ( agar (changeInfo && changeInfo.status === "to'liq") ( ... ) ));

Endi siz ikonachani bosganingizda sharhlarni aks ettiruvchi uslub fayli ulanadi va yana belgini bosish ularni yana yashiradi.

Aytgancha, mening ham aytib o'tish joiz to'liq versiya VK Comment Blocker kengaytmasi mavjud

uchun kengaytmani yozing google chrome qiyin emas. Ammo birinchi kengaytmani yozishda savollar paydo bo'lishi mumkin (va qiladi). Birinchi kengaytmani yozish bo'yicha qo'llanmalarning aksariyati birinchi versiyaning manifestidan foydalanishga mo'ljallangan bo'lib, u yaqin kelajakda qo'llab-quvvatlanmaydi.

Ushbu maqola quyidagilarni qamrab oladi:

• Manifestni qanday yaratish kerak v.2
• Masofaviy resurslar bilan qanday ishlash kerak
• Cookie fayllari bilan qanday ishlash kerak
• Mahalliy saqlash bilan qanday ishlash kerak
• Bildirishnomalar bilan qanday ishlash kerak

Maqolaning oxiriga kelib, bizda yangi vazifani qo'shish uchun maydon, shuningdek, joriy kun uchun vazifalar ro'yxati bo'lgan tayyor tashkilotchi kengaytmasi bo'ladi. Keling, tashkilotchiga qo'yiladigan barcha talablarni sanab o'tamiz:

• Tadbir qo‘shish uchun maydon bo‘lishi kerak (sana, vaqt, voqea)
• Joriy kun uchun barcha vazifalar vaqt bo'yicha tartiblangan holda ko'rsatilishi kerak
• O'tgan barcha voqealar chizilgan holda ko'rsatilishi kerak
• Unda bildirishnoma qancha vaqt ko'rsatilishi kerakligini kiritish uchun maydon, shuningdek bildirishnomalarni ko'rsatishga ruxsat beruvchi va taqiqlovchi katakcha bo'lishi kerak.
• Bo'lajak voqea haqida bildirishnomani tadbirdan ma'lum vaqt oldin ko'rsatishi kerak

Keling, kengaytmani yaratishni boshidan, ya'ni manifestdan boshlaylik. Manifest - bu barcha kengaytma parametrlari yozilgan bir xil fayl. Ism, tavsif, versiya, saytlarga kirish ruxsati, cookie-fayllardan foydalanishga ruxsat, bildirishnomalar, mahalliy xotira. Umuman olganda, manifest - bu kengayish miyasi. manifest.json faylini yarating. Manifest - bu oldindan belgilangan nomga ega bo'lishi kerak bo'lgan yagona fayl. Ushbu faylda uchta majburiy maydon mavjud:

manifest.json

(“nom”: “Organizer kengaytmasi”, // Kengaytma nomi “versiya”: “1.0”, // Kengaytma versiyasi. “manifest_versiya”: 2 // Manifest versiyasi)

Bu erda bir nechta qoidalar mavjud:

• Manifest versiyasi butun son bo'lishi kerak, ya'ni "2" emas, 2 sifatida yozilishi kerak.
• Kengaytma versiyasi satr bo'lishi kerak, lekin faqat raqamlar va nuqtalardan iborat bo'lishi kerak, ya'ni "1.0" yaxshi, lekin 1.0 va "0.9 beta" yomon.

Kerakli maydonlar bilan - tamom, keling, kengaytma qalqib chiquvchi oynasini yaratishga o'tamiz. Belgini bosganingizda oyna ochilishi uchun manifestga "browser_action" maydonini qo'shishingiz kerak.

manifest.json

( ... "browser_action": ( "default_title": "Open organizer", // Sarlavha. Agar kursorni brauzerda "default_icon" belgisi ustiga olib kelsangiz ko'rinadi: "icon_small.png", // Kengaytmaga yo'l "default_popup" belgisi: " popup.html" // Qalqib chiquvchi oynali sahifaga yo'l ) )

Endi qalqib chiquvchi oyna yaratamiz. Bu normal holat html sahifasi, har qanday o'lcham va rang bo'lishi mumkin, hech qanday hiyla-nayrang yo'q. Faylni “popup.html” deb ataymiz. Ushbu faylni yaratishning o'zi etarli emas - u manifestda ko'rsatilishi kerak. Biz shunday qildik: "default_popup": "popup.html".

popup.html

Ishlamoqda!

Endi kengaytmamizning funksionalligini sinab ko'rish vaqti keldi. Buning uchun kengaytmani brauzerga yuklab oling. Chrome brauzerida kengaytmalar menyusini oching. Biz qushni "Tuzuvchi rejimi" ga qo'yamiz.

Shundan so'ng uchta tugma paydo bo'ladi. "Ochilmagan kengaytmani yuklash ..." tugmasini bosing. Kengaytma fayllari bo'lgan jildni tanlang. Shundan so'ng bizning kengaytmamiz paydo bo'ladi. Agar hamma narsa to'g'ri bo'lsa, belgini bosganingizda oyna paydo bo'ladi:

Endi biz qiziqarli narsalarga kirishimiz mumkin. Keling, ikkita JavaScript faylini ulaymiz. Birinchisi popup.js, ikkinchisi jquery. Birinchisi bilan hech qanday muammo bo'lmaydi, lekin biz mahalliy jQuery-ni emas, balki ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js manzilidan olingan masofaviy jquery-ni ulaymiz. Muammolar sukut bo'yicha kengaytma uchinchi tomon resurslariga kirish imkoniga ega emasligidan kelib chiqadi. Kirish uchun uni manifestda ko'rsatishingiz kerak. Biror narsaga kirish "ruxsatnomalar" maydonida ko'rsatilgan. Shuningdek, masofaviy skriptlar va CSS uchun mavjud masofaviy resurslarni ko'rsatishingiz kerak.

manifest.json

( ... "ruxsatlar": [ "https://ajax.googleapis.com/*" ], "content_security_policy": "script-src "self" https://ajax.googleapis.com; object-src "self" "")

Endi bu skriptlarni popup.html ga ulaymiz

popup.html

Chrome xotirasidan foydalanib, foydalanuvchi ma'lumotlarini saqlashingiz mumkin. Va bizning kengaytmamiz kelajakdagi voqealarni saqlaydigan omborda. Buning ikkita sababi bor. Birinchidan, agar siz brauzerga kirsangiz, xotirada saqlangan ma'lumotlar sinxronlashtirilishi mumkin. Ikkinchidan, ma'lumotlar cookie-fayllardagi kabi faqat satr sifatida emas, balki har qanday shaklda saqlanishi mumkin, ya'ni massivlar ham, ob'ektlar ham saqlanishi mumkin. Buni amalga oshirish uchun keling, manifestdagi xotiraga kirishni ochaylik.

manifest.json

(... "ruxsatlar": [ ... "saqlash" ] ... )

Endi qalqib chiquvchi oynani qayta loyihalashtiramiz. Qalqib chiquvchi oynada bugungi sana, yangi voqea sanasi, vaqti va tavsifi uchun uchta kiritish, yangi voqea qo'shish tugmasi, shuningdek, bugungi kun uchun barcha voqealar ro'yxati bilan maydon bo'ladi.

popup.html

Sana

Va darhol #today_date blokiga sana ko'rinishini qo'shing.

popup.js

$(function())( var bugun = new Date(); $("#today_date").html(today.getDate()+"."+(parseInt(today.getMonth())+1)+". " + today.getFullYear());

Bu shunday ko'rinishi kerak:

Shunday qilib, biz "+" tugmasini bosganimizda, voqea qo'shilishi kerak. Faylning boshida biz global saqlash o'zgaruvchisini e'lon qilamiz - saqlash bilan ishlash ob'ekti, shuningdek, voqealarni saqlash uchun global vazifalar qatori.

popup.js

Var saqlash = chrome.storage.sync; var tasks = new Array(); $(function())( … $("#add_task").click(function())( var new_task = new Object(); new_task.date = validateField($("#new_date").val(), " sana" ); new_task.time = validateField($("#new_time").val(), "vaqt"); new_task.task = $("#new_task").val(); if(!new_task.task | |. new_task.date ||.

Tasdiqlash funksiyasi sana dd.a.yyyy formatida, vaqt esa hs:mm formatida yozilganligini, shuningdek, hodisa tavsifida kamida uchta belgi mavjudligini tekshiradi.

popup.js

Var validateField = function(val, type)( if(type == "sana")( var date = val.split("."); var year = new Date(); year = year.getFullYear(); if( date.length == 3 && parseInt(sana) == sana && sana = 3)( qaytish val; ) null qaytish )

Biz qo'shimchani saralab oldik, keling, bugungi kun uchun tadbirlarni qabul qilishga o'tamiz. Buning uchun biz ma'lumotlar bazasidan barcha hodisalarni olishimiz, ularning barchasidan faqat bugungi voqealarni tanlashimiz va vaqt bo'yicha o'sish tartibida saralashimiz kerak.

popup.js

$(function())( … var now_hours = today.getHours()< 10 ? "0" + today.getHours() : today.getHours(); var now_minutes = today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes(); var now_time = now_hours + "" + now_minutes; storage.get("tasks",function(items){ if(items.tasks){ tasks = items.tasks; var today_tasks = getTodayTasks(tasks); if(today_tasks.length >0)( for(var i in today_tasks)( var this_time = today_tasks[i].time.replace(":", ""); var add = this_time > now_time ? "" : " class="done""; var add_html = ""+today_tasks[i].time+" "+today_tasks[i].task+""; $("ul").apppend(add_html); ) ) ))) … ));

getTodayTasks() funksiyasi umumiy roʻyxatdan faqat bugungi sanaga ega voqealarni qaytaradi.

popup.js

Var getTodayTasks = function(tasks)(var today_tasks = new Array(); var today = new Date(); var today_date = today.getDate()+"."+(today.getMonth() + 1)+ "." + today.getFullYear(); for(var i in tasks)( if(tasks[i].date == today_date)( today_tasks = tasks[i]; ) ) if(today_tasks.length > 0)( today_tasks = sortTasks( bugungi_vazifalar);

sortTasks() funksiyasi voqealarni vaqt o'sishi bo'yicha tartiblaydi.

popup.js

Var sortTasks = function(tasks)( if(tasks.length > 0)( var swapped = true; while (almashtirilgan) ( almashtirildi = false; for (var i=0; i)< tasks.length-1; i++) { var this_time = tasks[i].time.replace(":", ""); var next_time = tasks.time.replace(":", ""); if (this_time >next_time) ( var temp = tasks[i]; tasks[i] = tasks; tasks = temp; swapped = true; ) ) ) vazifalarni qaytarish; )

Ekranda bildirishnomalar ko'rinishini sozlash vaqti keldi. Qalqib chiquvchi oynaga maxsus belgilash katakchasini qo'shamiz. Agar bu belgi belgilansa, bildirishnomalar ko'rsatiladi, agar belgilanmagan bo'lsa, ular ko'rsatilmaydi; Biz matn kiritishni ham qo'shamiz. Ushbu kiritishdagi raqam bildirishnoma voqeadan qancha vaqt oldin ko'rsatilishini ko'rsatadi. Ya'ni, agar bizda 19:00 ga rejalashtirilgan tadbir bo'lsa, bu matn kiritish 5 ni o'z ichiga oladi, ya'ni 18:55 da bildirishnoma paydo bo'ladi. Keling, popup.html ga ushbu kirishlar bilan kod qo'shamiz

popup.html

Bildirishnomalarni ko'rsatish

Endi bu qanday ishlashini aniqlaymiz. Belgilangan katakchani bosganingizda, uning belgilangan atributi tekshiriladi va atribut qiymati “show_notifications” cookie fayliga yoziladi. Keling, matn kiritishga o'tamiz. Uning qiymati o'zgarganda, agar u butun son bo'lsa va 120 dan oshmasa, yangi qiymat tasdiqlanadi, biz yangi qiymatni "when_to_notify" cookie fayliga yozamiz.

Ammo bu biz uchun ishlashi uchun biz cookie-fayllarga kirishni ochishimiz kerak. Buni amalga oshirish uchun manifest.json saytiga o'ting va uni "ruxsat" ga qo'shing.

manifest.json

( ... "ruxsatlar": [ ... "cookie" ] ... )

Endi siz skriptni boshlashingiz mumkin. Keling, popup.js ga o'tamiz. Birinchidan, kirishlarda boshlang'ich qiymatlarni o'rnatamiz. Odatiy bo'lib, katakcha belgilanmagan, ya'ni bildirishnomalar ko'rsatilmaydi va vaqt 0 ga teng. Belgilangan katakchani bosganingizda "show_notifications" cookie faylining qiymati o'zgaradi. Matn maydonidagi qiymatni o'zgartirganda, "when_to_to_notify" cookie faylining qiymati o'zgaradi.

popup.js

$(function())( setCheckbox(); setWhenToNotify(getCookie("when_to_notify")); ... $("#show_notifications").click(function())(setCookie("show_notifications", document.getElementById(" show_notifications" ).checked); $("#when_to_notify").change(function())( setWhenToNotify($(this).val()); ));

Keling, funktsiyalarni batafsil ko'rib chiqaylik. Keling, cookie-fayllar bilan ishlash funktsiyalaridan boshlaylik. IN Ushbu holatda tayyor funksiyalar w3schools.com saytidan olingan.

popup.js

Var setCookie = function(c_name,value,exdays)( /* *http://www.w3schools.com/js/js_cookies.asp dan olingan */ var exdate=new Date(); exdate.setDate(exdate.getDate() ) + exdays var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); getCookie = function(c_name)(Vasya P.ga qoʻngʻiroq qiling. /* *http://www.w3schools.com/js/js_cookies.asp dan olingan */ var i,x,y,ARRcookies=document.cookie.split(" ; "); uchun (i=0;i

Buni aniqroq qilish uchun men HTML-ning o'zida kodning tavsifini kiritdim. Menyuni oddiygina tashkil qilaman: rasmga ichki kengaytma havolasini qo'yaman.

Men popup.html haqida boshlaganimdan beri sizga popup.js haqida darhol aytib beraman

Menga juda oddiy ko'rinadi:

popup.js
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], rost); // bu erda ko'rsatilgan sahifaga GET so'rovi bor xhr.onreadystatechange = function() ( agar (xhr.readyState == 4) // agar hamma narsa yaxshi bo'lsa, qavs ichidagi narsani bajaring ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // qabul qilingan kodni blokga id=dannie bilan qo'shing ) ) xhr.send();

Men kodning tavsifini ham qo'shdim.

Aynan yuqorida tavsiflangan dizayn sizning saytingizdan tarkibni tortib olish va ko'rsatish imkonini beradi, yoki ehtimol sizning saytingizdan emas. Ammo nimani bilish muhim:
- Manifest faylida ruxsatlar maydoniga ma'lumot olinadigan sayt manzilini yozishni unutmang.
- popup.js fayl fon skript background.js bilan bog'langan, chunki background.js da mahalliy xotiraga kiritilgan ma'lumotlar popup.js da ko'rinadi.

background.js fon skript faylini ko'rib chiqishdan oldin, keling, har bir sahifada alohida ishlaydigan skript faylini ko'rib chiqaylik: content.js

Men uchun bu shunday ko'rinadi:

content.js
funksiya onBlur() ( // oyna fokusni yo'qotadi chrome.runtime.sendMessage((sayt:sait,time:localStorage)); // background.js ga xabar yuboradi localStorage = "0"; ) window.onblur = onBlur; // agar oyna fokus funksiyasini yo'qotsa sec() // har soniyada bajariladi ( if(document.webkitVisibilityState == "visible") // agar sahifa faol bo'lsa ( localStorage = parseInt(localStorage,10) +1; // yangilash sayt ma'lumotlari mahalliy xotirada ) ) var sait=location.hostname; // skript qaysi saytda joylashgan localStorage = "0";

setInterval(sek, 1000); // funktsiyani har soniyada ishga tushiring
Mening skriptimdagi eng qiziqarli nuqta, menimcha, shunday bo'lishi kerak:
chrome.runtime.sendMessage((sayt:sait,vaqt:localStorage));
Bu erda fon skriptiga xabar yuboriladi, ya'ni ikkita o'zgaruvchi: site:sait - skript joylashgan sayt manzilini o'z ichiga oladi.

time:localStorage - bu skriptga sarflangan vaqt miqdori.
background.js

Mana, aslida u. Men hech narsa haqida batafsil gapirmayman, chunki ... printsipial jihatdan bu kerak emas. Rejalaringizni amalga oshirish uchun aniq misolni bilish kifoya. Agar siz fon.js skriptida (shuningdek, cookie-fayllar, web sql) mahalliy xotiraga biron-bir maʼlumot qoʻshsangiz, xuddi shu maʼlumotlardan popup.js skriptida foydalanish mumkin.

Men sizga kengaytmani yaratish haqida aytmoqchi bo'lgan narsam shu edi, lekin men qiyinchiliklarga duch kelgan yana bir nuqtaga to'xtalib o'taman.

Sozlamalar sahifasida men saytlarni turli ustunlarga sudrab olib tashlashni tashkil qilishim kerak edi.

Chunki Agar ma'lumotlar InnerHtml yordamida kiritilsa, bu xususiyat xuddi shunday ko'rinmaydi. Mana nima tashkil qilishimiz kerak edi:

$("#dannie").on("sichqonchani bosish", ".sait", function() ( $(bu).css(("chegara":"3px qattiq #ffffff")); )); $("#dannie").on("mouseout", ".sait", function() ( $(this).css(("border":"3px qattiq qora")); )); $("#dannie").on("mousedown", ".sait", function() ( $(this).css(("border":"3px qattiq qora")); )); $("#dannie").on("sichqonchani bosish", ".sait", function() ( $(".sait").draggable((yordamchi:"clone" )); ));
odatdagi o'rniga:
$(".sait").sichqonchani suring(funksiya())( $("#"+this.id).css(("chegara":"3px qattiq #ffffff")); )); $(".sait").mouseout(function())( $("#"+this.id).css(("chegara":"3px qattiq qora")); )); $(".sait").mousedown(function())( $("#"+this.id).css(("chegara":"0px qattiq qora")); ));