Chrome internet-do'konidagi barcha elementlar ilovalar va kengaytmalarga bo'lingan. Biz ikkalasini ham qilamiz. Biz yaratgan dastur yangi brauzer yorlig'ida belgi sifatida paydo bo'ladi va saytingizni tezda ishga tushirishga imkon beradi. Kengaytma asboblar panelidagi maxsus tugma bo'lib, uni bosish saytning so'nggi yangilanishlari bilan panel paydo bo'lishiga olib keladi.

Google Chrome uchun dastur yaratish

1. Kengaytma shablonli arxivni ushbu havoladan yuklab oling.

2. Uni siz uchun qulay bo'lgan joyga oching. Ichkarida fayl bor manifest.json va ikona icon.png.

3. Faylni oching manifest.json bloknotda va uning mazmunini tahrirlang. 2-qatorda saytingiz nomini, 3-qatorda uning tavsifini (132 belgigacha) va 5 va 7-qatorlarda sayt manzilini kiritishingiz kerak. Kiritilgan o'zgarishlarni saqlang.

4. Belgini arxivdan o'zingizning PNG formatidagi rasmingizga o'zgartiring, o'lchami 128*128.

Google Chrome uchun kengaytma yaratish

Kengaytma funktsional jihatdan dasturdan sezilarli darajada farq qilsa-da, uni yig'ish algoritmi unchalik murakkab emas.

1. Kengaytma shablonini ushbu havoladan oling.

2. Zip. Manifest.json faylini bloknotda oching va saytingiz nomini, uning qisqacha tavsifini va kengaytma oynasining sarlavhasini (2, 3 va 8-qatorlar) joylashtiring.

3. Faylni oching labnol.js va saytingizning RSS tasmasi manzilini ko'rsating.

4. Arxivdagi belgini PNG formatidagi 128*128 o'lchamdagi o'zingizning rasmingiz bilan almashtiring.

Nashr

Biz yaratgan kengaytma va dastur ikki xil usulda ishlatilishi mumkin. Agar siz veb-sayt egasi bo'lsangiz va unga qo'shimcha foydalanuvchilarni jalb qilmoqchi bo'lsangiz, o'z ishingizni Chrome internet-do'konida nashr qilishingiz mumkin. Buning uchun kengaytma va qo'shimcha fayllarni o'z arxiviga joylashtiring, Chrome Dashboard sahifasiga o'ting va ishingizni Google do'koniga yuklang. Bu erda sizdan skrinshotni yuklashingiz, kengaytirilgan tavsifni berishingiz va boshqa parametrlarni ko'rsatishingiz so'raladi. Sahifa rus tilida, shuning uchun uni osongina tushunishingiz mumkin. Shuni yodda tutingki, kengaytmani nashr qilish uchun siz kengaytmani yaratgan saytning tasdiqlangan egasi bo'lishingiz kerak. Bundan tashqari, har bir nashr uchun 5 AQSh dollari miqdorida kirish to'lovini kiritishingiz talab qilinadi.

Agar siz kengaytmalarni faqat shaxsiy foydalanish uchun to'plagan bo'lsangiz, masalan, sevimli saytingizdagi yangilanishlarni qulay kuzatish uchun, brauzeringizda kengaytmalar sahifasini oching va Dasturchi rejimini yoqing. Keyin tugmani bosing Ochilmagan kengaytmani yuklab oling va fayllar bilan jildga yo'lni belgilang.

Taklif etilgan usuldan foydalanib, har qanday veb-sayt yoki blog egasi Google Chrome brauzeri kengaytmalari katalogida o'z resursi uchun brend kengaytmasini yaratishi va joylashtirishi mumkin. Bu tashrif buyuruvchilarga so'nggi yangilanishlardan xabardor bo'lishga yordam beradi, bu sizning saytingizga qo'shimcha tashrif buyuruvchilarni olib keladi va uning mashhurligini oshiradi.

Men har doim odamlarga hozir hamma uchun mavjud bo'lishi mumkin bo'lgan qiziqarli imkoniyatlar (texnologiyalar) haqida aytib berishni xohlaganman, lekin negadir hamma uchun ham 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 Google Chrome brauzeri (keyingi o'rinlarda Chrome deb yuritiladi) uchun kengaytmalar yaratish haqida gaplashamiz.

Ushbu maqola davomida biz ishlab chiqadigan kengaytmani Google Chrome Internet-do'konida topish mumkin, yagona farq shundaki, u rivojlangan funksiyalarga ega. Bundan tashqari, GitHub-da manba kodi bor, yana bir bor ogohlantirish bilan, u erda hamma narsa CoffeeScript-da yozilgan va bu erda hikoya JavaScript-da yoziladi. 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.

Muammoni shakllantirish

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 VK ijtimoiy tarmog'idagi barcha sharhlarni yashirishi kerak;
• 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:

Vaziyat ma'lum bo'ldiki, men so'nggi paytlarda VK-da sharhlarni ko'rganimda, sharhlovchilarga tog'larimni 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, yangiliklar lentasidagi sharhlar estetik jihatdan yoqimli ko'rinmaydi. Umuman olganda, aytilgan va bajarilgan.

Kengaytirish ramkasi

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 ko'proq ma'lumotni hujjatlardan olishingiz 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.

Kengaytirish manbalari

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, #mv_comments, #vv_comments, #mv_comments,your_vvperpy. _comment ( displey: none !import chumoli; ko'rinish: yashirin ! muhim; ) tana: keyin (pozitsiya: sobit; kontent: "__MSG_mode_enable__"; tepa: 5px; oʻng: 5px; toʻldirish: 6px 12px; fon rangi: #ffc; chegara: 1px qattiq #ddd; z-indeks: 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.

Kengaytma ishga tushirilmoqda

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, "content_scripts" da: () 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.

Kengayishni jonlantirish

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.

xulosalar

Aytgancha, VK Comment Blocker kengaytmasining to'liq versiyasini eslatib o'tish joiz.

Bu sohadagi eng obro'li odamlar Vladimir Palant (u AdBlock Plus yozgan), ... Chrome uchun kengaytmalarni yozish Firefox-ga qaraganda osonroq. Qizig'i shundaki, Chrome uchun eng mashhur kengaytma "Tyuryaga VKontakte" (Yandex statistikasiga ko'ra).

Muammo brauzerda ochilgan ba'zi HTML sahifalariga javob beradigan kengaytmani ishlab chiqishdir. Masalan, ushbu saytdan foydalanishni qulayroq qilish uchun sayt sahifasining HTML kodini o'zgartiring.
Yechim Google Chrome 24.x va Chromium 6.x (Debian 6.0.6, amd64) da sinovdan o‘tkazildi.

Muammoning yechimi

crx kengaytmasini yozishda yuzaga keladigan asosiy savollarning qisqacha mazmuni.

Kengaytmani qanday ro'yxatdan o'tkazish kerak?

Taymerni qanday sozlash kerak?

Kengaytmani qanday ro'yxatdan o'tkazish kerak?

Minimal kengaytma uchun 4 ta fayl kifoya qiladi:

128.png background.js content.js manifest.json

Manifest.json qayerda:

( "manifest_version": 2, "nom": "DomainCheck kengaytmasi", "versiya": "0.1", "fon": ( "skriptlar": ["background.js"]), "content_scripts": [ ( "mos keladi" ": [ "*://*/*" ], "js": [ "content..png" ) // web_accessible_resources )

background.js faylida brauzer ishga tushirilganda bajariladigan kod mavjud. Ushbu skriptda siz hujjat mazmunini yuklash moslamasini (document.location.href) "osib qo'yishingiz" mumkin.

Chrome o'zi _generated_background_page.html ni yaratadi:

background.js va kontent skripti o'rtasida aloqa o'rnatish uchun siz xabarlar (so'rov/xabar) va chrome.extension.getBackgroundPage() dan foydalanishingiz mumkin. Shuningdek, Chrome kengaytmalari arxitekturasini koʻring. Unda aytilishicha, "Kontent skripti - bu brauzerga yuklangan sahifa kontekstida bajariladigan ba'zi JavaScript".

Eslatma: Chromium’da fon sahifasini (background.js) disk raskadrovka qilish qiyin, chunki mos keladigan sahifa yo‘q. dasturchi rejimida "Kengaytmalar" sahifasidagi yorliqlar.

Joriy URLni qanday tekshirish, uni kesish va xeshni hisoblash mumkin?

DOMContentLoaded-ga ishlov beruvchini qanday o'rnatish haqida developer.chrome.com sahifasida tasvirlangan. Shuningdek, Background Pages (background.js) haqidagi hujjatlarga qarang.

HTML kodini sahifaga joylashtirish uchun biz Habré haqidagi maqoladagi maslahatlardan foydalanishimiz mumkin (global o'zgaruvchi hujjatni eslatib o'tish uchun u yerga qarang), lekin biz joriy URLni ro'yxat bilan solishtirishimiz kerak.

document.location.href eskirganmi?

To'liq malakali domen nomini olish uchun stackoverflow.com misoli:

var url = "http://www.domain.ru/tmp/file.txt?abc=1&cde=2#123" var getLocation = function(href) ( var l = document.createElement("a"); l. href = href; qaytish l; ); var l = getLocation(url); ogohlantirish (l.hostname)

Quyidagi kabi 2-darajali subdomenni tanlashingiz mumkin:

var l = getLocation(url); var d = l.hostname; function cutd(str) ( var re = /.*?\.([\w\d-\u0100-\uffff-\.]+\.[\w\d-\u0100-\uffff-\.]+ )/; return str.replace(re,"$1"); ) alert(cutd(d));

(stackoverflow.com dagi maslahatga qarang).

sha1.js in'ektsiyasi ...

Taymerni qanday sozlash kerak? Namuna kengaytmalariga qarang: Voqealar sahifasi misoli, background.js:

chrome.alarms.create((delayIn Minutes: 0.1)); chrome.alarms.onAlarm.addListener(function() ( alert("Vaqt tugadi!"); ));

Chromium’dagi bu xato 2013-yil 9-yanvarda yopilgan, ammo Windows uchun so‘nggi versiyalarda hali paydo bo‘lmagan.

Agar siz hali ham "zamonaviy" signallardan foydalanishga qaror qilsangiz, stackoverflow.com saytida ixtiyoriy davomiylik/davrdagi signal taymerini qanday to'g'ri o'rnatish tasvirlangan.

Eski brauzerlar bilan moslik uchun background.js da window.setInterval() dan foydalanish yaxshidir:

var i = 0; window.setInterval(function() ( alert(i); i++), 2*1000); // millisekundlarda

setTimeout() funksiyasi bitta "budilnik" dir.

Chrome kengaytmalarini Disable-Enable fon.js-ni yangi usulda ishga tushiradi. *) rejimga kirish uchun xuddi shu narsani tekshirishim kerakmi? va uxlang.

config.xml/time.txt-ni qanday yuklab olish va ularni qanday tahlil qilish kerak?

Agar siz shunchaki XMLHttpRequest orqali yuklab olsangiz, quyidagi xabarni olishingiz mumkin: “XMLHttpRequest http://site/config.xml yuklana olmaydi. http://www.google.ru manbasiga Access-Control-Allow-Origin ruxsat bermaydi. ”. Bu shuni anglatadiki, oʻzaro domen soʻrovini yuborishda siz CORS, .htaccess uchun opsiyani yoqmagansiz:

Sarlavhalar to'plami Kirish-Boshqaruv-Ruxsat berish-Origin "*"

Chrome kengaytmasi va manifest.json ruxsatnomalari orqali domenlararo soʻrovlarga ruxsat berishingiz mumkin:

( "manifest_version": 2, ... "ruxsatlar": [ "http://site/" ],

Biroq, bu ikkala holat ham paketdan chiqarilgan Chromium kengaytmalari uchun ishlamaydi. Paketli kengaytmalar uchun Chromium 6.0-7.0 versiyalarida ba'zida "Yomon sehrli raqam" ko'rsatiladi (sof Chrome uchun bu xato kuzatilmaydi).
Eslatma: CORS himoyasini Chromium-da --disable-web-security opsiyasi orqali chetlab o'tish mumkin:

$ Chromium-brauzer --veb-xavfsizlikni o'chirish http://domain/path

Qo'shimcha: Chromium uchun manifest.jsondagi qatorlarni quyidagiga o'zgartirishingiz kerak (domenni aniq ko'rsatib, yo'lga yulduzcha qo'shing):

("ruxsatlar": [ "http://site/*" ],

Internet o'chirilgan bo'lsa, Chrome brauzeridagi veb-inspektor(?) XMLHttpRequest() haqida shikoyat qilishiga yo'l qo'ymaslik uchun buni qilishingiz mumkin:

var req = null; urinib ko'ring ( req = new XMLHttpRequest(); ) catch(err) () // stackoverflow.com da maslahatga qarang

(bu stackoverflow.com maslahati asosida yozilgan). ...

Tahlilni disk raskadrovka qilish uchun console.log("line") dan foydalanishingiz mumkin. Stringlar “\n” yordamida vagon qaytishlarini qabul qiladi.

Chrome kengaytmasida XML-ni JavaScript-ga ajratish quyidagicha amalga oshiriladi:

var xml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("vaqt tugashi"); var timeout = ts.textContent; if (ts) (console.log("timeout="+timeout);) var ds = xml.getElementsByTagName("domen"); agar (ds) ( uchun (var i = 0; i< ds.length; i++) { console.log("domain: "+ds[i].textContent); } }

Chrome kengaytmasida global atom o'zgaruvchilari va jadval ma'lumotlaridan qanday foydalanish kerak?

Storage API yordamida kengaytma maʼlumotlarini sinxronlashtirish uchun Chrome versiyasi >= 20 boʻlishi kerak. Manifestda (manifest.json) quyidagilarni yozishingiz kerak:

"premissions": ["saqlash" ]

Ular "Chromium HTML5" google guruhida yozganidek, "Men e'tiborimni Web SQL ma'lumotlar bazasiga qaratdim, lekin Web SQL endi "faol texnik xizmat ko'rsatishda" emasga o'xshaydi, bu meni uni HTML spetsifikatsiyasidan olib tashlashga ishontirishga olib keladi." Batafsil ma'lumot uchun W3C Web SQL ma'lumotlar bazasiga qarang. Siz asosiy tushunchalardan foydalanishga urinib ko'rishingiz mumkin - ma'lumotlar bazasi uchun bo'sh joyni kengaytirish uchun siz ruxsatlardan foydalanishingiz mumkin: manifest.json'da unlimitedStorage. “Cheksiz saqlash”dan foydalanish uchun quyidagi oflayn API mavjud: 1) Ilova keshi; 2) Fayl tizimi; 3) IndexedDB; 4) WebSQL (eskirgan). Chrome'da IndexedDB dan foydalanish misoli uchun qarang. IndexedDB bilan ishlash misoli uchun gist.github.com saytiga qarang:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("mening db") req.onerror = function() ( console.log("xato"); )

IndexedDB fayl manzillari,
Windows: C:\Users\\AppData\Local\Google\Chrome\User Data\Default\IndexedDB,
Linux: /home//.config/google-chrome/Default/IndexedDB/chrome-xxx.indexeddb.leveldb/:

$ sudo ls -la /home/anonymous/.config/google-chrome/Default/IndexedDB/chrome-extension_ojeihbjghbabiocoglbfhdebhhckdnol_0.indexeddb.leveldb/ jami 24 drwx------ 2 anonim anonim 963b40.0. drwx------ 3 anonim anonim 4096 7 fevral 03:08 .. -rw-r--r-- 1 anonim anonim 285 7 fevral 03:08 000003.log -rw-r--r-- 1 ta anonim anonim 16 7 fevral 03:08 JORIY -rw------- 1 anonim anonim 0 7 fevral 03:08 LOCK -rw-r--r-- 1 anonim anonim 46 7 fevral 03:08 LOG -rw-r --r-- 1 ta anonim anonim 32 fevral 7-fevral 03:08 MANIFEST-000002

Mozilla Developer Network-da IndexedDB-dan foydalanish misollarini ko'rishingiz mumkin.

IndexedDB-ga ko'p sonli yozuvlarni kiritish stackoverflow.com saytida ko'rib chiqilgan.

IndexedDB-ga elementlar qo'shish uchun siz foydalanishingiz kerak

indexedDB.db.transaction().objectStore().put())

IndexedDB ma'lumotlar bazasi papkasida eski ma'lumotlar bazalari .sst fayllari, yangilari (joriy)lari esa .log fayllari sifatida saqlanadi.

setVersion() eskirgan. Ammo bu erda bir hiyla bor [onupgradeneeded() haqida]: ...

Parashuram Narasimxonning blogida ta'kidlanganidek, "Chrome uchun: Chrome bo'lsa, uning yangilanishi kerak bo'lgan funksiya chaqirilmaydi. Ma'lumotlar bazasining muvaffaqiyatli funksiyasi chaqiriladi. Bu yerda setVersion usulining mavjudligi tekshiriladi. Agar usul mavjud bo'lsa va belgilangan versiya ma'lumotlar bazasi versiyasidan kattaroq bo'lsa, setVersion usuli chaqiriladi. SetVersion so'rovining muvaffaqiyati foydalanuvchining versiya tranzaksiyasi bilan yangilanishi kerak bo'lgan usulini chaqiradi. Usul tugallangandan so'ng, versionTransaction ma'lumotlar bazasini yopish orqali amalga oshiriladi. Ma'lumotlar bazasi so'nggi versiya bilan yana ochiladi va bu foydalanuvchi tomonidan belgilangan muvaffaqiyatga o'tadi." (shunday qilib, onupgradeneeded() deb chaqirish uchun men db.setVersion("3") qilaman).

Content.js da ma'lumotlarni qanday olish mumkin:

dbreq.onupgradeneeded = funktsiya(voqea) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["test_db"], "faqat o'qish"); var store = tx.objectStore("todo");

Ma'lumotlar bazasini ochish uchun axemclion+jepp kodidan foydalaning (openReqShim funktsiyasi).

Mavjud bo'lmagan IndexedDB ma'lumotlar bazasini ochganimizda, u versiya raqami bilan yaratiladi, versiya = 0. Bu holda, onupgradeneeded() va onsuccess() ketma-ket chaqiriladi. Biz unipgradeneeded() ni birinchi marta chaqirganimizda, versiya allaqachon = 1. [mavjud ma'lumotlar bazasini] ikkinchi marta ochganimizda, onupgradeneeded() endi chaqirilmaydi va versiya raqami = 1. (?o'smaydi) Faqat dbreq .onsuccess() chaqiriladi.

Yana bir narsa. Unda aytilishicha, "Chrome 23-dan oldin siz bunday tranzaksiyani setVersion() ga qo'ng'iroq qilish orqali qo'lda yaratishingiz kerak - bu spetsifikatsiyadan olib tashlangan API. Eski spetsifikatsiyani quyidagi manzilda topishingiz mumkin: http://www.w3. org /TR/2011/WD-IndexedDB-20110419/", ya'ni Chrome jurnallarida "NotFoundError: DOM IDBDatabase Exception 8" xatosini oldini olish uchun setVersion() ga qo'ng'iroq qilishingiz kerak.

Chromium 6.0.472.63 (59945) da IndexedDB ilovasi barqaror emas, shuning uchun u o'chirilgan va ishlamaydi =)

Umuman olganda, siz xabarlar orqali kontent skriptlari bilan background.js + iframe + almashinuvidan foydalanishingiz kerak

Sahifani ochish hodisasini qanday boshqarish kerak?

"content_scripts": [ ( "mos keladi": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_start" ) ], ...

Content.js:

document.addEventListener("DOMContentLoaded", funksiya () ( alert("Abc "+document.location.href); ));

Sahifaning HTML kodini qanday formatlash mumkin? Firefox kengaytmalarini yozishga qarang. Kengaytmani qanday qadoqlash va uni qaerga joylashtirish kerak?

Kengaytmani Chrome WebStore-ga joylashtirish uchun siz Google-ga 5 AQSh dollari miqdoridagi kirish to'lovini to'lashingiz kerak (keyin istalgan miqdordagi kengaytmalarni joylashtirishingiz mumkin). Siz VISA, MasterCard, AMEX yoki DISCOVER orqali toʻlashingiz mumkin (bundan tashqari, toʻlovni amalga oshirishda siz toʻliq pochta manzilingizni hamda familiyangizni koʻrsatishingiz kerak).

Kengaytmani joylashtirish uchun sizga Google hisobi kerak va hokazo. Sizga skrinshot va reklama tasviri kerak bo'ladi. Kengaytma kodini qo'lda, xuddi shu Chrome WebStore orqali yangilashingiz kerak bo'ladi (men tushunganimdek, Firefox-dagi kabi URL bo'yicha avtomatik yangilanish yo'q). Manifest.json faylida kengaytma versiyasini yangilashingiz kerak. Qo'shilgandan bir necha daqiqa o'tgach, kengaytma Chrome kengaytmalarini qidirishda mavjud bo'ladi.

Linux uchun kengaytmalar paketi:

#!/bin/bash 7z a -tzip ../domainck-chromium.zip ./* mv ../domainck-chromium.zip ../domainck-chromium.crx

Kalit so‘zlar: Windows uchun Chromium tuzilmalari HOWTO, Google Chrome yuklab olish sahifasi, Google Chrome kengaytmalari namunasi.

Internetda sichqonchani yoki aylantirish panelini ishlatmasdan sahifani yuqoriga aylantirish imkoniyatini beruvchi ko'plab saytlar mavjud. Ammo shu bilan birga, hali ham bunday amalga oshirilmagan saytlar mavjud. "Nega barcha saytlarga shunday tugma qo'shadigan skript yozishga harakat qilmaysiz?" - O'yladim va amalga oshirishga kirishdim. Bunday skriptlar foydalanuvchi skriptlari deb ataladi va *.user.js kengaytmasiga ega. Masalan, siz uni Habré-da o'qishingiz mumkin. Afsuski, bu tuzoqlarsiz amalga oshirilmaydi. Turli xil brauzerlar uchun userjsni amalga oshirishda ba'zi farqlar mavjud. Men Google Chrome brauzeri uchun kengaytma sifatida userjs skriptimizni amalga oshirishni tavsiflashga e'tibor qarataman.

manifest.json

Google Chrome kengaytmasi uchun kerakli fayl manifest.json parametrlarni, tashqi fayllarga yo'llarni (*.js, *.css va boshqalar), versiyani qo'llab-quvvatlashni va hokazolarni tavsiflaydi. kengaytirish uchun. Fayl haqida ko'proq o'qishingiz mumkin. Bizning holatda, manifest.json fayli quyidagicha ko'rinadi:

( "manifest_versiya": 2, "content_scripts": [ ( "globlarni istisno qilish": , "globlarni kiritish": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css" ": [ "css/style.css" ], "mos keladi": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true, "description": "Google Chrome uchun orqa yuqori foydalanuvchi skripti kengaytmasi", "name": "backTopUserJS", "versiya": "1" )

Qulaylik uchun biz manifest.json fayli va asosiy skript fayli (bizning holimizda, backTopUserJS.user.js) yoniga joylashtirgan JQuery kutubxonasidan foydalanamiz. Uning mazmuni quyidagicha:

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @license MIT // @version 1.0 // ==/UserScript== funktsiya main() ( var disp = $(window).scrollTop () > 400 ? "blok" : "yo'q"; var $upButton = $("

"); $(hujjat).find("tana").append($upButton); $upButton.click(funksiya () ( $("html, tana").animate(( scrollTop: 0 ), "sekin" ); )); $(oyna).scroll(funksiya () ( agar ($(oyna).scrollTop() > 400) $upButton.fadeIn("sekin"); else $upButton.fadeOut("sekin"); )); ); var skript = document.createElement("skript"); script.appendChild(document.createTextNode("("+ main +"))();")); (document.body || document.head) | | document.documentElement).appendChild(skript);

Menimcha, skript batafsil ko'rib chiqish uchun etarlicha aniq. Faqat oxirgi 3 qatorni tushuntirishga arziydi. Aslida, bu bizning skriptimizni sayt sahifasi kodiga kiritadigan kichik hack. Agar sizlardan kimdir yaxshiroq yo'lni topsa, izohlarda tuzatishlaringizni yozishingiz mumkin :)

Kengaytmani brauzerda o'rnatish

Siz Google Chrome brauzerida boshqa brauzerlarga o'xshash maxsus skriptlarni o'rnatishingiz mumkin, ammo Google bizning xavfsizligimiz haqida qayg'urganligi sababli, ular brauzer kengaytmalari bilan o'ralgan bo'lishi kerak. Keling, o'rnatishni bosqichma-bosqich ko'rib chiqaylik.

Kengaytmamiz uchun quyidagi papka yarating: C:\MyChromeExtensionUserJS

Har bir kengaytma uchun biz o'z katalogimizni yaratamiz, masalan, biz uni C:\MyChromeExtensionUserJS\backTopUserJS deb ataymiz. Ushbu katalogga kengaytmali fayllarni qo'shing.

"Google Chrome brauzeri haqida" -> "Kengaytmalar" yorlig'iga o'ting yoki manzil satriga chrome://extensions/ yozing.

"Ishlab chiquvchi rejimi" katagiga belgi qo'ying.

"Ochilmagan kengaytmani yuklash" tugmasini bosing va kengaytmamiz katalogini tanlang. "OK" tugmasini bosing.

Kengaytma o'rnatildi va foydalanishga tayyor. Kengaytmalarga o'zgartirish kiritganingizdan so'ng yangilash uchun "Kengaytmani yangilash" tugmasini bosing yoki dasturchi rejimida Ctrl+R klaviatura yorliqlarini bosing.

Pastki chiziq

Siz github-da skript manbalarini ko'rishingiz mumkin. Skript ideal deb da'vo qilmaydi, lekin faqat Google Chrome uchun o'zingizning shaxsiy skriptlaringizni yozish uchun namuna va turtki bo'lib xizmat qiladi.