Chrome вэб дэлгүүрийн бүх зүйлсийг програмууд болон өргөтгөлүүдэд хуваадаг. Бид хоёуланг нь хийх болно. Бидний үүсгэсэн програм нь шинэ хөтчийн таб дээр дүрс хэлбэрээр гарч ирэх бөгөөд танд сайтаа хурдан эхлүүлэх боломжийг олгоно. Өргөтгөл нь хэрэгслийн самбар дээрх тусгай товчлуур бөгөөд үүн дээр дарснаар сайтын хамгийн сүүлийн үеийн шинэчлэлтүүд бүхий самбар гарч ирнэ.

Google Chrome-д зориулсан програм бүтээх

1. Энэ линкээс өргөтгөлийн загвар бүхий архивыг татаж авна уу.

2. Өөрт тохирох газар руу нь задлаарай. Дотор нь файл байна manifest.jsonболон дүрс icon.png.

3. Файлыг нээнэ үү manifest.jsonтэмдэглэлийн дэвтэрт оруулаад агуулгыг нь засна уу. Та 2-р мөрөнд сайтынхаа нэрийг, 3-р мөрөнд түүний тайлбарыг (132 тэмдэгт хүртэл), 5, 7-р мөрөнд сайтын хаягийг оруулах шаардлагатай. Хийсэн өөрчлөлтүүдийг хадгална уу.

4. Архив дээрх дүрсийг PNG форматын 128*128 хэмжээтэй өөрийн зураг болгон өөрчил.

Google Chrome-д зориулсан өргөтгөл бүтээж байна

Хэдийгээр өргөтгөл нь програмаас функциональ ялгаатай боловч угсрах алгоритм нь тийм ч төвөгтэй биш юм.

1. Энэ линкээс өргөтгөлийн загварыг авна уу.

2. задлах. Manifest.json файлыг Notepad дээр нээж, өөрийн сайтын нэр, түүний товч тайлбар, өргөтгөлийн цонхны гарчгийг (мөр 2, 3, 8) оруулна уу.

3. Файлыг нээнэ үү labnol.jsмөн сайтынхаа RSS мэдээллийн хаягийг зааж өгнө үү.

4. Архив дээрх дүрсийг PNG форматтай 128*128 хэмжээтэй өөрийн зургаар солино.

Хэвлэл

Бидний хийсэн өргөтгөл болон програмыг хоёр янзаар ашиглаж болно. Хэрэв та вэбсайт эзэмшигч бөгөөд түүнд нэмэлт хэрэглэгчдийг татахыг хүсч байвал Chrome Web Store дээр бүтээлээ нийтлэх боломжтой. Үүнийг хийхийн тулд өргөтгөл болон нэмэлт файлуудыг өөрийн архивт хийж, Chrome Dashboard хуудас руу орж Google дэлгүүрт ажлаа байршуулна уу. Энд та дэлгэцийн агшинг байршуулах, өргөтгөсөн тайлбар өгөх, бусад параметрүүдийг зааж өгөхийг хүсэх болно. Энэ хуудас нь орос хэл дээр байгаа тул та үүнийг хялбархан ойлгох боломжтой. Өргөтгөл нийтлэхийн тулд та өргөтгөл хийсэн сайтынхаа баталгаажуулсан эзэмшигч байх ёстой гэдгийг анхаарна уу. Нэмж дурдахад, та нэг хэвлэлд ороход 5 доллар оруулах шаардлагатай болно.

Хэрэв та зөвхөн хувийн хэрэгцээнд зориулж өргөтгөл цуглуулсан бол, жишээлбэл, дуртай сайтынхаа шинэчлэлтийг хялбархан хянахын тулд хөтөч дээрээ өргөтгөлийн хуудсыг нээж, Хөгжүүлэгчийн горимыг идэвхжүүлнэ үү. Дараа нь товчлуур дээр дарна уу Баглаагүй өргөтгөлийг татаж авахфайлуудтай хавтас руу очих замыг зааж өгнө.

Санал болгож буй аргыг ашигласнаар ямар ч вэбсайт эсвэл блог эзэмшигч Google Chrome хөтөчийн өргөтгөлүүдийн лавлах хэсэгт өөрийн нөөцөд зориулж бренд өргөтгөл үүсгэж, байршуулах боломжтой болно. Энэ нь зочдод хамгийн сүүлийн үеийн шинэчлэлтүүдээс байнга мэдээлэлтэй байхад туслах бөгөөд энэ нь танай сайтад нэмэлт зочдыг авчирч, алдар нэрийг нь нэмэгдүүлэх болно.

Би үргэлж хүмүүст одоо хүн бүрт боломжтой байж болох сонирхолтой боломжуудын (технологи) талаар ярихыг үргэлж хүсдэг байсан, гэхдээ зарим шалтгааны улмаас хүн бүрт байдаггүй. Тийм ээ, энэ нь тавтологи байсан ч энэ нь миний хувьд шатаж буй сэдэвт миний дотоод уур хилэнг бүрэн илэрхийлж байна. Гэсэн хэдий ч одоо яриа тэдний хэрхэн хэлэх тухай биш байх болно. Өнөөдөр бид Google Chrome хөтөч (цаашид Chrome гэх) өргөтгөл үүсгэх талаар ярих болно.

Энэ нийтлэлийн туршид бидний хөгжүүлэх өргөтгөлийг Google Chrome вэб дэлгүүрээс олж болно, цорын ганц ялгаа нь дэвшилтэт функцтэй. Нэмж дурдахад GitHub дээр эх код байдаг бөгөөд тэнд бүх зүйл CoffeeScript дээр бичигдсэн байдаг бөгөөд энд түүхийг JavaScript-ээр бичих болно. Дашрамд хэлэхэд би CoffeeScript-ийн шүтэн бишрэгч эсвэл дэмжигч биш, гэхдээ энэ нь маш сонирхолтой бөгөөд хэрэгтэй зүйл юм - би үүнийг туршиж үзэхийг зөвлөж байна.

Хэрэв та Chrome, Firefox, Maxthon болон бусад хөтөч дээр өргөтгөл үүсгэх санааг бодож байсан бол Chrome-д зарцуулах хамгийн бага хүчин чармайлтыг та аль хэдийн анзаарсан байх. Та харгалзах хөтчүүдийн баримт бичгийг үзэх замаар үүнийг шалгаж болно.

Асуудлын томъёолол

Өргөтгөл бичих нь түүний тайлбар, шийдвэрлэх даалгавруудыг тохируулахаас эхэлдэг. Би өөрийнхөө дарга учраас хугацаанаас нь хэд ч удаа хоцорч чаддаг тул техникийн тодорхойлолт бичих шаардлагагүй - үүнийг ойлгоход хангалттай.

• Өргөтгөл нь VK нийгмийн сүлжээн дэх бүх сэтгэгдлийг нуух ёстой;
• Өргөтгөл нь сэтгэгдлийг харуулах боломжтой байх ёстой;
• Өргөтгөл нь тодорхой хуудсан дээрх сэтгэгдлийг харуулах чадвартай байх ёстой;

Эхлээд харахад бүх зүйл энгийн бөгөөд бид үүнийг хийж чадна. Гэсэн хэдий ч, нийтлэлийн хүрээнд бид зөвхөн эхний хоёр зүйлийг хэрэгжүүлэх болно.

"Хэрэв энэ нь нийгмийн сүлжээний гол зорилго юм бол яагаад сэтгэгдлээ нуух ёстой гэж?" гэх мэт агуулгатай асуултуудыг би таамаглаж байна. За, энэ бол дэлгэрэнгүй хариултыг авах ёстой шударга асуулт юм:

Нөхцөл байдал нь сүүлийн үед би VK дээр сэтгэгдлүүдийг хараад тайлбарлагчдад нүүрээ өгөхийг хүсч байна. Би олон тооны олон нийтийн хуудсуудыг захиалж, сэдэвчилсэн (вэб хөгжүүлэлт), тийм ч их биш. Хичнээн хачирхалтай санагдаж байсан ч би муур (миний хувьд панда) биш харин надад сонирхолтой агуулга бүхий бүлгүүдэд хамгийн өгөөмөр хүн болдог. Сэтгэгдэл дээр ийм мэргэжлийн бус, муухай мэдээлэл урсаж байхыг би хэзээ ч харж байгаагүй, маргах тухай хүртэл боддог. Нэмж дурдахад мэдээний тэжээл дэх сэтгэгдэл нь гоо зүйн хувьд тааламжтай харагддаггүй. Ерөнхийдөө хэлсэн, хийсэн.

Өргөтгөх хүрээ

Миний хувьд хамгийн таатай сюрприз бол аяллын эхэнд үйлдлүүдийн дүрслэх шинж чанар биднийг угтсан явдал байв. Энгийнээр хэлбэл, бид програмаа, түүний эрх, чадварыг тайлбарлах хэрэгтэй - үүнд manifest.json файлыг ашигладаг.

Юуны өмнө та шаардлагатай гурван талбарыг бөглөх хэрэгтэй.

( "manifest_version": 2, // Chrome 18 багц 2-оос эхлэн, үгүй ​​бол 1 (тиймэрхүү хуучин зүйлсийг дэмждэггүй) "нэр": "Миний өргөтгөл", // Өргөтгөлийн нэр "хувилбар": "versionString" // Өргөтгөлийн хувилбар )

Хэрэв нэрээр бүх зүйл тодорхой, манифест хувилбар нь илүү энгийн бол өргөтгөлийн хувилбарыг сайтар судлах хэрэгтэй.

Тиймээс бид бүгдээрээ аливаа зүйлийн хувилбар нь цэгээр тусгаарлагдсан гурван тооноос бүрддэг гэдэгт бид бүгд дассан - Major.Minor.Patch (Тоо гэсэн утгатай). npm, bower болон бусад баяр баясгалантай яриа богино байна: энэ замаар эсвэл огт үгүй. Гэхдээ Google дараахь сонголтыг санал болгодог.

"хувилбар": "1" "хувилбар": "1.0" "хувилбар": "2.10.2" "хувилбар": "3.1.2.4567"

Та баримтаас манифест файлын бүх талбаруудын талаар илүү ихийг мэдэх боломжтой.

Манай тохиолдолд манифест файл дараах байдлаар харагдах болно.

( "манифест_хувилбар": 2, "нэр": "__MSG_app_name__", "богино_нэр": "VKCommentBlocker", "тайлбар": "__MSG_app_description__", "хувилбар": "0.1.0", "анхдагч_локал": "ru", " зөвшөөрөл": [ "activeTab" ], "browser_action": ( "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" ), "дүрс": ( "16": "icon_16.png", "48 ": "icon_48.png", "128": "icon_128.png" ), "арын дэвсгэр": ( "тогтвортой": худал, "хуудас": "background.html" ), "content_scripts": [ ( "тохирох" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "загварууд" /commentblocker_on.css" ] )

Өмнө нь авч үзэж байгаагүй зүйлээс

• __MSG_key__ нь Chrome-ын программыг олон улсын болгох (i18n) юм. Манифест файл болон бусад файлд (бүр CSS) хоёуланг нь ашиглаж болно.
• web_accessible_resources - дараа нь вэб хуудасны контекстэд ашиглагдах нөөцийн замуудын массив. Түүнд замыг зааж өгөөгүй бол ийм үйлдэл хүлээж байгаа бол вэбсайтын хуудсан дээр юу ч ашиглах боломжгүй.

Өргөтгөх нөөц

Chrome үйлийн үрийн маш том давуу тал бол manifest.json-д заасан бүх нөөцийг үүсгэсэн тохиолдолд бид өргөтгөлийг идэвхжүүлэх боломжтой болсон явдал юм.

commentblocker.css болон commentblocker_on.css файлд байгаа зүйлд анхаарлаа хандуулах нь зохисгүй гэж би бодож байна. Би сэтгэгдэл агуулсан бүх сонгогчдыг жагсаасан эхнийхийг л өгөх болно:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link (харагдах байдал: нуугдмал !чухал; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_comments, #mv_comments, #vour_comments, #vour_comment _comment (дэлгэц: байхгүй !импорт шоргоолж; харагдах байдал: далд ! чухал; ) их бие: дараа (байрлал: тогтмол; агуулга: "__MSG_mode_enable__"; дээд: 5px; баруун: 5px; дэвсгэр: 6px 12px; дэвсгэр өнгө: #ffc; хүрээ: 1px хатуу #ddd; z-индекс: 9999 ;)

commentblocker_on.css файлд таны таамаглаж байгаагаар эсрэгээрээ байна. CSS дээр би хэлний түлхүүрийн агуулгатай мөрийг ашиглаж байгааг анхаарна уу: "__MSG_mode_enable__". Эдгээр түлхүүрүүдийг хадгалах файл үүсгэх цаг болжээ.

Өргөтгөлийн үндсэн хэсэгт бид _locales лавлах ба дотор нь байрлуулсан en болон ru лавлахуудыг үүсгэдэг. Дараа нь бид messages.json файлд түлхүүрээ тайлбарлах болно.

( "app_name": ( "мессеж": "VK Comment Blocker" ), "app_description": ( "мессеж": "Мэдээний хангамж болон бүлгүүд дэх сэтгэгдлийг нуух тохиромжтой арга." ), "browser_action": ( "мессеж" ": " Тайлбарын төрлийг сэлгэх" ), "mode_enable": ( "мессеж": "Сэтгэгдэл байхгүй!" ), "mode_disable": ( "мессеж": "Сэтгэгдэлтэй!" ) )

Мессежийн талбараас гадна баримтаас суралцах боломжтой бусад талбарууд байдаг.

Одоо бид background.html файлуудыг үүсгэж эхлээд дараах байдлаар:

Суурь

Энд бүх зүйл ердийн HTML-тэй адил байна - ер бусын зүйл байхгүй. Дашрамд хэлэхэд, manifest.json дахь талбарууд дээр тулгуурлан автоматаар үүсгэгддэг тул background.html файлыг үүсгэх шаардлагагүй.

Өргөтгөлийг эхлүүлж байна

Та JavaScript-ийн нэг мөр бичихгүйгээр өргөтгөлийг ажиллуулж болно. Үүнийг хийхийн тулд та цэс рүү орох хэрэгтэй:

• Google Chrome-г тохируулах, удирдах (Гамбургер)
• Нэмэлт хэрэгслүүд
• Өргөтгөлүүд
• "Хөгжүүлэгчийн горим"-ын хажууд байгаа нүдийг чагтална уу.
• Баглаагүй өргөтгөлийг татаж авах
• Өргөтгөлтэй хавтас сонгоно уу

Өргөтгөл ачаалагдсан бөгөөд цэсэнд гарч ирэв. Тийм ээ, тийм ээ, энэ бол "B".

Бидний саяхан үүсгэсэн өргөтгөл толгойд юу ч байхгүй юм шиг санагдаж байна (ямар ч логик байхгүй), нийгмийн сүлжээн дэх "B" үсэг бүхий бүх сэтгэгдлүүд одоо нуугдаж байна. Хариулт нь manifest.json-д байгаа бөгөөд "content_scripts" хэсэгт: () талбарт commentblocker.css файлыг аль хуудсанд (http://vk.com/* болон https://vk.com/*) зааж өгсөн болно. автоматаар оруулах бөгөөд энэ нь бүх сэтгэгдлийг нуудаг. Би танд математикийн хэв маягийн талаар илүү ихийг уншихыг зөвлөж байна. Гаднах төрхөөрөө энэ нь маш энгийн боловч юүдэн дор бараг л саарал морьтой, бүх хонх, шүгэлтэй.

Тиймээс, нэг мөр код бичихгүйгээр бид түүнд өгсөн үндсэн даалгаврыг гүйцэтгэдэг өргөтгөлтэй болсон.

Өргөтгөлийг сэргээх

Даалгаврын хоёр дахь цэг, тухайлбал сэтгэгдлийг харуулах чадварыг хэрэгжүүлэхэд л үлдэж байна. Товчхондоо бид commentblocker_on.css файлыг түлхэх хэрэгтэй бөгөөд энэ нь commentblocker.css файлын дүрмийг хүчингүй болгоно. Энд бидний төгс хүчит JavaScript тусламж руу яаран ирж байна.

background.html-ийн талаар миний хэлснийг санаж байна уу? Тийм ээ, тийм ээ, үүнийг бүтээх шаардлагагүй гэсэн баримтын талаар. manifest.json-г бага зэрэг өөрчилье:

... "арын дэвсгэр": ( "тогтвортой": худал, "скриптүүд": [ "scripts/commentblocker.js" ] ), ...

Зүгээр л JavaScript файлыг холбосон. Гоц гойд зүйлгүй. Энэ файл руу орцгооё.

Та зүгээр л JS-г хуудсанд оруулах боломжгүй. Үүнтэй ижил асуудал зөвхөн скриптүүдэд ч тохиолддоггүй. Тиймээс бид тусгай executeScript injection ашиглах хэрэгтэй.

Эхлээд та өргөтгөлийн дүрс дээр товшилтын үйл явдал зохицуулагчийг нэмэх хэрэгтэй:

Chrome.browserAction.onClicked.addListener(функц(таб) ( chrome.tabs.executeScript(tab.id, ( код: "(" + toggleComments.toString() + ")();" )); ));

ToggleComments нь манай CSS файлыг хуудсанд оруулах функц юм:

Var toggleComments = function() ( var extensionLink; (document.getElementById("өргөтгөл") == null) ? (extensionLink = document.createElement("холбоос"), extensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), extensionLink.id = "өргөтгөл", extensionLink.type = "текст/css", extensionLink.rel = "загварын хуудас", document.getElementsByTagName("head").appendChild(extensionLink)) : (баримт бичиг. getElementsByTagName("толгой").removeChild(document.getElementById("өргөтгөл"))) );

Энэ код нь манай CSS хуудсан дээр холбогдсон эсэхийг шалгаж, үүнийг идэвхжүүлэх эсвэл идэвхгүй болгох шаардлагатай байгаа талаар дүгнэлт хийсэн үгс хангалттай байх болно гэж би бодож байна.

Дашрамд хэлэхэд, янз бүрийн хэрэгцээг хамарсан олон арга хэмжээ байдаггүй. Жишээлбэл, ийм үйл явдлууд байдаг:

• onCreated - таб үүсгэх.
• onUpdated - табыг шинэчилж байна.
• onRemoved - табыг хаах.

OnUpdated үйл явдлыг хоёр удаа дууддаг гэдгийг тэмдэглэх нь зүйтэй.

• Хуудасны шинэчлэлт;

StackOverflow дээр тэд хуудасны статусыг шалгахыг зөвлөж байна:

Chrome.tabs.onUpdated.addListener(функц(tabId, changeInfo, таб) (хэрэв (changeInfo && changeInfo.status === "бүрэн") ( ... ) ));

Одоо та дүрс дээр дарахад тайлбарыг харуулах загварын файл холбогдож, дүрс дээр дахин дарснаар тэдгээрийг дахин нуух болно.

дүгнэлт

Дашрамд хэлэхэд, энд байгаа VK Comment Blocker өргөтгөлийн бүрэн хувилбарыг дурдах нь зүйтэй болов уу.

Энэ талбарт хамгийн эрх мэдэлтэй хүмүүс бол Владимир Палант (тэр AdBlock Plus гэж бичсэн), ... Chrome-д зориулсан өргөтгөлүүдийг бичихэд Firefox-ээс илүү хялбар байдаг. Сонирхолтой нь, Chrome-ийн хамгийн алдартай өргөтгөл бол "Тюряга ВКонтакте" юм (Яндекс статистикийн дагуу).

Асуудал нь вэб хөтөч дээр нээгдэж буй зарим HTML хуудсуудад хариу үйлдэл үзүүлэх өргөтгөл боловсруулах явдал юм. Жишээлбэл, энэ сайтыг ашиглахад илүү тохиромжтой болгохын тулд сайтын хуудасны HTML кодыг өөрчил.
Уг шийдлийг Google Chrome 24.x болон Chromium 6.x (Debian 6.0.6, amd64) дээр туршсан.

Асуудлын шийдэл

crx өргөтгөлийг бичих явцад гарч ирдэг гол асуултуудын хураангуй.

Өргөтгөл хэрхэн бүртгүүлэх вэ?

Таймерыг хэрхэн тохируулах вэ?

Өргөтгөл хэрхэн бүртгүүлэх вэ?

Хамгийн бага өргөтгөлийн хувьд 4 файл хангалттай:

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

manifest.json хаана байна:

( "манифест_хувилбар": 2, "нэр": "DomainCheck өргөтгөл", "хувилбар": "0.1", "арын дэвсгэр": ( "скриптүүд": ["background.js"]), "контент_скрипт": [ ( "тохирох" ": [ "*://*/*" ], "js": [ "content..png" ) // вэб_хандах_нөөц байхгүй )

background.js файл нь хөтчийг эхлүүлэх үед гүйцэтгэх кодыг агуулдаг. Энэ скрипт дээр та баримт бичгийн контент ачаалах зохицуулагчийг (document.location.href) "өлгөх" боломжтой.

Chrome өөрөө _generated_background_page.html үүсгэдэг:

background.js болон агуулгын скрипт хооронд холбогдохын тулд та мессеж (хүсэлт/мессеж) болон chrome.extension.getBackgroundPage() ашиглаж болно. Chrome өргөтгөлүүдийн архитектурын тоймыг мөн үзнэ үү. Энэ нь "Агуулгын скрипт нь хөтөч рүү ачаалагдсан хуудасны контекст дээр ажилладаг JavaScript юм" гэж хэлдэг.

Тайлбар: Харгалзах хуудас байхгүй тул Chromium-д арын хуудас (background.js) дибаг хийхэд хэцүү. хөгжүүлэгч горим дахь "Өргөтгөлүүд" хуудасны таб.

Одоогийн URL-г хэрхэн шалгаж, тайрч, хэшийг тооцоолох вэ?

DOMContentLoaded дээр зохицуулагчийг хэрхэн суулгах талаар developer.chrome.com дээр тайлбарласан болно. Мөн Background Pages (background.js)-ийн талаарх баримт бичгийг үзнэ үү.

HTML кодыг хуудсанд оруулахын тулд бид Habré-ийн нийтлэлийн зөвлөгөөг ашиглаж болно (дэлхийн хувьсагчийн баримт бичгийг эндээс үзнэ үү) гэхдээ бид одоогийн URL-г жагсаалттай харьцуулах хэрэгтэй.

document.location.href хуучирсан уу?

Бүрэн мэргэшсэн домэйн нэрийг авах stackoverflow.com-ийн жишээ:

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; буцах l; ); var l = getLocation(url); анхааруулга(l.hostname)

Та дараах байдлаар 2-р түвшний дэд домайныг сонгож болно:

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

(stackoverflow.com дээрх зөвлөмжийг үзнэ үү).

sha1.js тарилга ...

Таймерыг хэрхэн тохируулах вэ? Жишээ өргөтгөлүүдийг үзнэ үү: Үйл явдлын хуудасны жишээ, background.js:

chrome.alarms.create((delayInMinutes: 0.1)); chrome.alarms.onAlarm.addListener(function() ( alert("Цаг дуусч байна!"); ));

Chromium дээрх энэ алдаа 2013 оны 1-р сарын 9-нд хаагдсан боловч Windows-д зориулсан хамгийн сүүлийн хувилбаруудад хараахан гараагүй байна.

Хэрэв та "орчин үеийн" сэрүүлгийг ашиглахаар шийдсэн хэвээр байгаа бол дурын хугацаа/хугацаатай дохиоллын таймерыг хэрхэн зөв тохируулах талаар stackoverflow.com дээр тайлбарласан болно.

Хуучин хөтчүүдтэй нийцтэй байхын тулд background.js дээр window.setInterval()-г ашиглах нь дээр.

var i = 0; window.setInterval(функц() ( alert(i); i++), 2*1000); // миллисекундэд

setTimeout() функц нь ганц "сэрүүлэг" юм.

Хром өргөтгөлүүдийг идэвхгүй болгох-Идэвхжүүлэх нь background.js-г шинэ аргаар эхлүүлнэ. *) горимд орохын тулд би ижил зүйлийг шалгах шаардлагатай юу? мөн унт.

config.xml/time.txt-г хэрхэн татаж авах, тэдгээрийг хэрхэн задлах вэ?

Хэрэв та зүгээр л XMLHttpRequest-ээр татаж авбал танд дараах мессеж гарч ирж магадгүй: "XMLHttpRequest-ийг http://site/config.xml ачаалах боломжгүй. http://www.google.ru-н гарал үүслийг Access-Control-Allow-Origin зөвшөөрөхгүй. ”. Энэ нь та домайн хоорондын хүсэлт гаргахдаа CORS, .htaccess-ийн сонголтыг идэвхжүүлээгүй гэсэн үг юм:

Гарчиг багц Хандалт-Хяналт-Зөвшөөрөх-Гарал үүслийг "*"

Та Chrome өргөтгөл болон manifest.json дээрх зөвшөөрлөөр дамжуулан домэйн хоорондын хүсэлтийг зөвшөөрөх боломжтой:

( "манифест_хувилбар": 2, ... "зөвшөөрөл": [ "http://site/" ],

Гэсэн хэдий ч, эдгээр хоёр тохиолдол нь задлаагүй Chromium өргөтгөлүүдэд тохирохгүй. Савласан өргөтгөлүүдийн хувьд Chromium-ын 6.0-7.0 хувилбар нь заримдаа "Муу шидэт дугаар" харуулдаг (цэвэр Chrome-д энэ алдаа ажиглагддаггүй).
Тайлбар: --disable-web-security сонголтоор дамжуулан CORS хамгаалалтыг Chromium-д тойрч болно:

$ Chromium-browser --web-security-ийг идэвхгүй болгох http://domain/path

Нэмэлт: Chromium-ийн хувьд та manifest.json доторх мөрүүдийг дараах байдлаар өөрчлөх шаардлагатай (домэйныг тодорхой зааж, замд од нэмэх):

("зөвшөөрөл": [ "http://site/*" ],

Интернет унтарсан үед Chrome дахь вэб байцаагч (?) XMLHttpRequest()-ийн талаар гомдоллохоос сэргийлэхийн тулд та дараах зүйлийг хийж болно.

var req = null; оролдоорой ( req = new XMLHttpRequest(); ) catch(err) () // stackoverflow.com дээрээс зөвлөгөөг үзнэ үү

(энэ нь stackoverflow.com-ийн зөвлөгөөн дээр бичигдсэн). ...

Шинжилгээний дибаг хийхийн тулд та console.log("шугам") ашиглаж болно. Мөрүүд "\n"-г ашиглан цувааны буцаалтыг хүлээн авдаг.

Chrome өргөтгөл дэх XML-г JavaScript руу задлах нь дараах байдлаар хийгддэг.

var xml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("цаг хугацаа"); var timeout = ts.textContent; if (ts) (console.log("timeout="+timeout);) var ds = xml.getElementsByTagName("domain"); if (ds) ( for (var i = 0; i< ds.length; i++) { console.log("domain: "+ds[i].textContent); } }

Хром өргөтгөл дэх дэлхийн атомын хувьсагч болон хүснэгтийн өгөгдлийг хэрхэн ашиглах вэ?

Storage API ашиглан өргөтгөлийн өгөгдлийг синхрончлохын тулд танд Chrome хувилбар >= 20 байх шаардлагатай. Манифест (manifest.json) дээр та дараах зүйлийг бичих хэрэгтэй:

"premissions": ["storage" ]

Тэд Google-ийн "Chromium HTML5" бүлэгт "Би Вэб SQL мэдээллийн санд анхаарлаа хандуулсан боловч Web SQL нь "идэвхтэй засвар үйлчилгээ"-д байхаа больсон бололтой, энэ нь HTML spec-ээс хасагдах болно гэдэгт итгэхэд хүргэж байна." Дэлгэрэнгүй мэдээллийг W3C Web SQL мэдээллийн сангаас үзнэ үү. Та үндсэн ойлголтуудыг ашиглахыг оролдож болно - өгөгдлийн сангийн зайг өргөжүүлэхийн тулд manifest.json дахь unlimitedStorage зөвшөөрлийг ашиглаж болно. "Хязгааргүй хадгалах сан"-г ашиглахын тулд дараах офлайн API-ууд байна: 1) Апп кэш; 2) Файлын систем; 3) IndexedDB; 4) WebSQL (хуучирсан). Chrome дээр IndexedDB ашиглах жишээг үзнэ үү. IndexedDB-тэй ажиллах жишээг gist.github.com сайтаас үзнэ үү:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("миний db") req.onerror = function() ( console.log("алдаа"); )

IndexedDB файлын байршил,
Windows: C:\Users\\AppData\Local\Google\Chrome\User Data\Default\IndexedDB,
Линукс: /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/ нийт 24 drwx------ 2 нэргүй нэргүй :63b040. drwx------ 3 нэргүй 4096 2 сарын 7 03:08 .. -rw-r--r-- 1 нэргүй 285 2 сарын 7 03:08 000003.log -rw-r--r-- 1 нэргүй нэргүй 16 2 сарын 7 03:08 ОДОО -rw------- 1 нэргүй 0 2 сарын 7 03:08 LOCK -rw-r--r-- 1 нэргүй 46 2 сарын 7 03:08 LOG -rw-r --r-- 1 нэргүй нэргүй 32 2 сарын 7 03:08 МАНИФЕСТ-000002

Та Mozilla Developer Network дээр IndexedDB ашиглах жишээг харж болно.

IndexedDB-д олон тооны бичлэг оруулахыг stackoverflow.com дээр тусгасан болно.

IndexedDB-д зүйл нэмэхийн тулд та ашиглах хэрэгтэй

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

IndexedDB мэдээллийн сангийн хавтсанд хуучин мэдээллийн сангууд нь .sst файлууд, шинэ (одоогийн) нь .log файлууд хэлбэрээр хадгалагддаг.

setVersion() нь хуучирсан. Гэхдээ энд нэг заль мэх бий [onupgradeneeded()-ийн тухай]: ...

Парашурам Нарасимханы блогт дурдсанчлан, "Chrome-ийн хувьд: Chrome-ын хувьд шинэчлэгдсэн функцийг дууддаггүй. Өгөгдлийн сангийн амжилтын функцийг дууддаг. Энд setVersion арга байгаа эсэхийг шалгана. Хэрэв арга байгаа бөгөөд заасан хувилбар нь өгөгдлийн сангийн хувилбараас их байвал setVersion аргыг дуудна. SetVersion-ийн хүсэлтийн дуудлагыг амжилттай гүйцэтгэснээр хэрэглэгчийн хувилбарын гүйлгээний шаардлагатай шинэчлэгдсэн аргыг дууддаг. Арга дууссаны дараа өгөгдлийн санг хааснаар versionTransaction хийгддэг. Өгөгдлийн санг хамгийн сүүлийн хувилбараар дахин нээж, хэрэглэгчийн тодорхойлсон амжилтад шилжүүлнэ." (Тиймээс onupgradeneeded(), би db.setVersion("3") гэж нэрлэдэг).

content.js доторх өгөгдлийг хэрхэн татах вэ:

dbreq.onupgradeneeded = функц(үйл явдал) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["test_db"], "зөвхөн унших"); var store = tx.objectStore("todo");

Өгөгдлийн санг нээхийн тулд axemclion+jepp (openReqShim функц) кодыг ашиглана уу.

Бид байхгүй IndexedDB мэдээллийн санг нээхэд энэ нь хувилбарын дугаараар үүсгэгдэх болно, хувилбар = 0. Энэ тохиолдолд onupgradeneeded() болон onsuccess()-г дараалан дууддаг. Эхний удаа бид onupgradeneeded() гэж дуудах үед хувилбар нь аль хэдийн = 1 байна. [Одоо байгаа мэдээллийн санг] хоёр дахь удаагаа нээхэд onupgradeneeded() дуудагдахаа больж, хувилбарын дугаар = 1. (?Өсөхгүй) Зөвхөн dbreq .onsuccess() гэж нэрлэдэг.

Дахиад нэг юм. Энэ нь "23-аас өмнөх Chrome-ийн хувьд та спецификацияас хасагдсан API-г setVersion() руу залгаж ийм гүйлгээг гараар үүсгэх хэрэгтэй. Хуучин үзүүлэлтийг: http://www.w3. org-аас олж болно. /TR/2011/WD-IndexedDB-20110419/", өөрөөр хэлбэл, Chrome-ын бүртгэлд "NotFoundError: DOM IDBDatabase Exception 8" алдаа гарахаас зайлсхийхийн тулд та setVersion() руу залгах хэрэгтэй.

Chromium 6.0.472.63 (59945) дээр IndexedDB хэрэгжилт тогтвортой биш тул идэвхгүй болсон бөгөөд ажиллахгүй байна =)

Ерөнхийдөө та background.js + iframe + мессежээр контент скрипттэй солилцох хэрэгтэй

Хуудас нээх үйл явдлыг хэрхэн зохицуулах вэ?

"content_scripts": [ ( "тохирох": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_start" ) ], ...

Content.js:

document.addEventListener("DOMContentLoaded", функц () ( alert("Abc "+document.location.href); ));

Хуудасны HTML кодыг хэрхэн форматлах вэ? Firefox өргөтгөлүүдийг бичихийг үзнэ үү. Өргөтгөлийг хэрхэн багцалж, хаана байрлуулах вэ?

Chrome WebStore дээр өргөтгөл байрлуулахын тулд та Google-д 5 доллар төлөх шаардлагатай (дараа нь та хэдэн ч өргөтгөл байршуулах боломжтой). Та VISA, MasterCard, AMEX эсвэл DISCOVER-ээр төлбөр хийх боломжтой (мөн төлбөр хийхдээ шуудангийн хаяг, овог нэрээ бүрэн зааж өгөх ёстой).

Өргөтгөлийг байрлуулахын тулд танд Google данс хэрэгтэй гэх мэт. Танд дэлгэцийн агшин болон сурталчилгааны зураг хэрэгтэй болно. Та өргөтгөлийн кодыг ижил Chrome WebStore-ээр дамжуулан гараар шинэчлэх шаардлагатай болно (миний ойлгож байгаагаар Firefox-той адил URL хаягаар автоматаар шинэчлэлт байхгүй). Manifest.json файлд та өргөтгөлийн хувилбарыг шинэчлэх шаардлагатай. Нэмсэнээс хэдхэн минутын дараа уг өргөтгөл нь Chrome өргөтгөлүүдийг хайхад боломжтой болно.

Linux-д зориулсан өргөтгөлийн багц:

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

Түлхүүр үг: Windows-д зориулсан Chromium бүтээцүүд ХЭРХЭН, Google Chrome татаж авах хуудас, Google Chrome өргөтгөлүүдийн жишээ.

Хулгана, гүйлгэх самбар ашиглахгүйгээр хуудсыг дээш гүйлгэх боломжийг олгодог интернетэд олон сайтууд байдаг. Гэхдээ үүнтэй зэрэгцэн ийм хэрэгжилт байхгүй сайтууд байсаар байна. "Яагаад бүх сайтад ийм товчлуур нэмэх скрипт бичиж болохгүй гэж?" - Бодож, хэрэгжүүлэхээр шийдсэн. Ийм скриптүүдийг хэрэглэгчийн скрипт гэж нэрлэдэг ба *.user.js өргөтгөлтэй. Жишээлбэл, та үүнийг Habré дээрээс уншиж болно. Харамсалтай нь үүнийг бэрхшээлгүйгээр хийх боломжгүй юм. Өөр өөр хөтчүүдэд зориулсан userjs-ийг хэрэгжүүлэхэд зарим ялгаа байдаг. Би манай userjs скриптийн хэрэгжилтийг Google Chrome хөтчийн өргөтгөл болгон тайлбарлахад анхаарлаа хандуулах болно.

manifest.json

Google Chrome өргөтгөлд шаардлагатай файл нь manifest.jsonпараметрүүд, гадаад файлуудын зам (*.js, *.css гэх мэт), хувилбарын дэмжлэг гэх мэтийг тайлбарладаг. өргөтгөлийн хувьд. Та файлын талаар илүү ихийг уншиж болно. Манай тохиолдолд manifest.json файл дараах байдалтай байна.

( "манифест_хувилбар": 2, "контент_скрипт": [ ( "глобуудыг оруулахгүй": , "глобуудыг оруулах": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "тохирох": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script" ": үнэн, "тайлбар": "Google Chrome-д зориулсан арын дээд хэрэглэгчийн скрипт өргөтгөл", "нэр": "backTopUserJS", "хувилбар": "1" )

Тохиромжтой болгох үүднээс бид manifest.json файл болон үндсэн скрипт файлын (бидний тохиолдолд backTopUserJS.user.js) хажууд байрлуулсан JQuery номын санг ашигладаг. Түүний агуулга дараах байдалтай байна.

// ==UserScript== // @name backTopUserJS // @зохиогч Александр Филатов // @license MIT // @version 1.0 // ==/UserScript== функц main() ( var disp = $(window).scrollTop () > 400 ? "блок" : "байхгүй"; var $upButton = $("

"); $(баримт бичиг).find("body").append($upButton); $upButton.click(функц () ( $("html, бие").animate(( scrollTop: 0 ), "удаан" ); )); $(цонх).scroll(функц () (хэрэв ($(цонх).scrollTop() > 400) $upButton.fadeIn("удаан"); else $upButton.fadeOut("удаан"); )); ); var скрипт = document.createElement("скрипт"); script.appendChild(document.createTextNode("("+ үндсэн +"))();")); (баримт бичиг.бие || баримт.head | | баримт бичиг.documentElement).appendChild(скрипт);

Би скриптийг нарийвчлан авч үзэхэд хангалттай ойлгомжтой гэж бодож байна. Зөвхөн сүүлийн 3 мөрийг тайлбарлах нь зүйтэй. Үнэн хэрэгтээ энэ нь сайтын хуудасны код руу манай скриптийг оруулдаг жижиг хакерууд юм. Хэрэв та нарын хэн нэг нь илүү сайн арга олвол коммент хэсэгт засвараа бичиж болно :)

Хөтөч дээр өргөтгөлийг суулгаж байна

Та бусад хөтчүүдийн адил Google Chrome-д захиалгат скриптүүдийг суулгаж болно, гэхдээ Google нь бидний аюулгүй байдлын талаар санаа тавьдаг тул тэдгээрийг хөтчийн өргөтгөлүүдэд оруулах ёстой. Суулгацыг алхам алхмаар авч үзье.

Манай өргөтгөлд зориулж дараах хавтас үүсгэ: C:\MyChromeExtensionUserJS

Өргөтгөл бүрийн хувьд бид өөрсдийн лавлах санг үүсгэдэг, жишээ нь бид үүнийг C:\MyChromeExtensionUserJS\backTopUserJS гэж нэрлэх болно. Энэ директорт өргөтгөл файлуудыг нэмнэ үү.

"Google Chrome хөтчийн тухай" -> "Өргөтгөлүүд" таб руу очих эсвэл хаягийн мөрөнд chrome://extensions/ гэж бичнэ үү.

"Хөгжүүлэгчийн горим" гэсэн нүдийг шалгана уу.

"Баглаагүй өргөтгөлийг ачаалах" товчийг дараад манай өргөтгөлийн лавлахыг сонгоно уу. "OK" дээр дарна уу.

Өргөтгөл суулгасан бөгөөд ашиглахад бэлэн байна. Өөрчлөлт хийснийхээ дараа өргөтгөлүүдийг шинэчлэхийн тулд "Өргөтгөлийг шинэчлэх" товчийг дарах эсвэл хөгжүүлэгчийн горимд Ctrl+R товчлуурыг дарна уу.

Доод шугам

Та github дээрх скриптийн эх сурвалжийг үзэх боломжтой. Скрипт нь хамгийн тохиромжтой гэж хэлэхгүй бөгөөд зөвхөн Google Chrome-д зориулж өөрийн захиалгат скрипт бичихэд үлгэр жишээ, түлхэц болдог.