Chrome Web Mağazası'ndaki tüm öğeler uygulamalara ve uzantılara bölünmüştür. İkisini de yapacağız. Oluşturduğumuz uygulama yeni bir tarayıcı sekmesinde simge olarak görünecek ve sitenizi hızlı bir şekilde başlatmanıza olanak tanıyacaktır. Uzantı, araç çubuğundaki özel bir düğmedir ve tıklandığında en son site güncellemelerini içeren bir panelin görünmesine neden olur.

Google Chrome için bir uygulama oluşturma

1. Uzantı şablonunu içeren arşivi bu bağlantıdan indirin.

2. Sıkıştırılmış dosyayı sizin için uygun olan herhangi bir yere açın. İçinde bir dosya var manifest.json ve simge icon.png.

3. Dosyayı açın manifest.json bir not defterinde ve içeriğini düzenleyin. 2. satıra sitenizin adını, 3. satıra açıklamasını (132 karaktere kadar), 5. ve 7. satırlara ise site adresini girmeniz gerekmektedir. Yapılan değişiklikleri kaydedin.

4. Arşivdeki simgeyi PNG formatında 128*128 boyutunda kendi resminizle değiştirin.

Google Chrome için bir uzantı oluşturma

Uzantı işlevsel olarak uygulamadan önemli ölçüde farklı olmasına rağmen montaj algoritması çok daha karmaşık değildir.

1. Uzantı şablonunu bu bağlantıdan alın.

2. Sıkıştırılmış dosyayı açın. Manifest.json dosyasını Not Defteri'nde açın ve sitenizin adını, kısa açıklamasını ve uzantı penceresinin başlığını (2, 3 ve 8. satırlar) yapıştırın.

3. Dosyayı açın labnol.js ve sitenizin RSS beslemesinin adresini belirtin.

4. Arşivdeki simgeyi PNG formatında, 128*128 boyutunda kendi görselinizle değiştirin.

Yayın

Yaptığımız eklenti ve uygulama iki şekilde kullanılabilir. Bir web sitesinin sahibiyseniz ve siteye daha fazla kullanıcı çekmek istiyorsanız çalışmanızı Chrome Web Mağazası'nda yayınlayabilirsiniz. Bunu yapmak için uzantıyı ve eklenti dosyalarını kendi arşivlerine paketleyin, Chrome Kontrol Paneli sayfasına gidin ve çalışmanızı Google mağazasına yükleyin. Burada sizden bir ekran görüntüsü yüklemeniz, genişletilmiş bir açıklama sağlamanız ve diğer bazı parametreleri belirtmeniz istenecektir. Sayfa Rusça olduğundan kolaylıkla anlayabilirsiniz. Bir uzantı yayınlamak için, uzantıyı yaptığınız sitenin doğrulanmış sahibi olmanız gerektiğini unutmayın. Ayrıca yayın başına 5$ giriş ücreti girmeniz gerekecektir.

Uzantıları yalnızca kişisel kullanım için (örneğin favori sitenizdeki güncellemeleri rahatça izlemek için) topladıysanız, tarayıcınızda uzantılar sayfasını açmanız ve Geliştirici Modunu etkinleştirmeniz yeterlidir. Daha sonra düğmeye tıklayın Paketlenmemiş uzantıyı indirin ve dosyaların bulunduğu klasörün yolunu belirtin.

Önerilen yöntemi kullanarak herhangi bir web sitesi veya blog sahibi, kaynakları için markalı bir uzantı oluşturup Google Chrome tarayıcı uzantıları dizinine yerleştirebilecek. Bu, ziyaretçilerin en son güncellemelerden haberdar olmasına yardımcı olacak, bu da sitenize ek ziyaretçiler getirecek ve popülerliğini artıracaktır.

İnsanlara her zaman şu anda herkesin erişebileceği, ancak bazı nedenlerden dolayı herkesin erişemediği ilginç fırsatlardan (teknolojilerden) bahsetmek istedim. Evet, bir totoloji olduğu ortaya çıktı, ancak benim için bu yakıcı konuya olan içsel öfkemi tamamen yansıtıyor. Öyle olsa bile, şimdi konuşma onların nasıl söylediğiyle ilgili olmayacak. Bugün Google Chrome tarayıcısı (bundan sonra Chrome olarak anılacaktır) için uzantılar oluşturma hakkında konuşacağız.

Bu yazı boyunca geliştireceğimiz uzantıyı Google Chrome Web Mağazası'nda bulabilirsiniz, tek farkı gelişmiş işlevselliğe sahip olmasıdır. Ek olarak GitHub'da kaynak kodu var, yine oradaki her şeyin CoffeeScript'te yazıldığı uyarısıyla birlikte ve burada hikaye JavaScript ile yazılacak. Bu arada, CoffeeScript'in hayranı ya da destekçisi değilim, ancak oldukça ilginç ve faydalı bir şey - denemenizi tavsiye ederim.

Chrome, Firefox, Maxthon ve diğer tarayıcılar için bir uzantı oluşturma fikrini hiç düşündüyseniz, muhtemelen harcamanız gereken minimum çabanın Chrome için olduğunu fark etmişsinizdir. İlgili tarayıcıların belgelerine bakarak bunu doğrulayabilirsiniz.

Sorunun formülasyonu

Bir uzantı yazmak, açıklamasıyla ve çözeceği görevleri belirlemekle başlar. Kendi işimin patronu olduğum ve teslim tarihlerini istediğim kadar kaçırabildiğim için teknik şartname yazmama gerek yok; şunu anlamam yeterli:

• Uzantı, VK sosyal ağındaki tüm yorumları gizlemelidir;
• Uzantının yorumları görüntüleyebilmesi gerekir;
• Uzantının belirli sayfalardaki yorumları görüntüleyebilmesi gerekir;

İlk bakışta her şey basit ve biz bunu yapabiliriz. Ancak yazı çerçevesinde sadece ilk iki noktayı uygulayacağız.

İçeriği şuna benzer sorular öngörüyorum: "Bir sosyal ağın asıl amacı buysa neden yorumları gizleyesiniz ki?" Ayrıntılı bir cevabı hak eden adil bir soru:

Koşullar şunu ortaya çıkardı ki, son zamanlarda VK ile ilgili yorumları gördüğümde, yorumculara dağlar kadar yüz maskesi vermek istiyorum. Çok sayıda farklı genel sayfaya, tematik (web geliştirme) aboneyim ve pek fazla abone değilim. Ve ne kadar tuhaf görünse de, kedilere (benim durumumda pandalar) değil, benim için ilginç olan içeriğe sahip gruplarda en cömert oluyorum. Yorumlarda bu kadar profesyonellikten uzak ve çirkin bilgi akışını başka hiçbir yerde görmemiştim ve hatta tartışmayı bile düşünüyorlar. Ayrıca haber akışındaki yorumlar da estetik açıdan pek hoş görünmüyor. Genel olarak söylendi ve yapıldı.

Genişletme çerçevesi

Benim için en hoş sürpriz, yolculuğun başında eylemlerin tanımlayıcı doğasıyla karşılanmamızdı. Basitçe söylemek gerekirse, uygulamamızı, haklarını ve yeteneklerini açıklamamız gerekiyor - bunun için manifest.json dosyası kullanılıyor.

Öncelikle üç zorunlu alanı doldurmanız gerekiyor:

("manifest_version": 2, // Chrome 18 set 2 ile başlayarak, aksi takdirde 1 (bu tür eski şeyler desteklenmiyor) "name": "Uzantım", // Uzantı adı "version": "versionString" // Uzantı sürümü )

Adıyla ilgili her şey açıksa ve bildirim sürümü daha da basitse, uzantı sürümüne daha yakından bakmanız gerekir.

Yani hepimiz bir şeyin versiyonunun noktalarla ayrılmış üç sayıdan oluştuğu gerçeğine alışığız - Major.Minor.Patch (Anlam numarası). Npm, bower ve diğer zevklerle konuşma kısadır: ya bu şekilde ya da hiç. Ancak Google aşağıdaki seçenekleri sunar:

"sürüm": "1" "sürüm": "1.0" "sürüm": "2.10.2" "sürüm": "3.1.2.4567"

Bildirim dosyasındaki tüm alanlar hakkında daha fazla bilgiyi belgelerde bulabilirsiniz.

Bizim durumumuzda manifest dosyası şöyle görünecek:

( "manifest_version": 2, "name": "__MSG_app_name__", "short_name": "VKCommentBlocker", "description": "__MSG_app_description__", "version": "0.1.0", "default_locale": "ru", " izinler": [ "activeTab" ], "browser_action": ( "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" ), "icons": ( "16": "icon_16.png", "48 ": "icon_48.png", "128": "icon_128.png" ), "background": ( "persistent": false, "page": "background.html" ), "content_scripts": [ ( "eşleşir" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "styles /commentblocker_on.css" ] )

Daha önce düşünülmemiş olanlardan

• __MSG_key__, Chrome'un uygulamaların uluslararası hale getirilmesi (i18n) konusundaki yaklaşımıdır. Hem manifest dosyasında hem de diğer dosyalarda (hatta CSS'de) kullanılabilir.
• web_accessible_resources - daha sonra web sayfaları bağlamında kullanılacak bir dizi kaynak yolu. İçinde yol belirtilmeden, böyle bir davranış bekleniyorsa web sitesi sayfalarında hiçbir şey kullanılamaz.

Genişletme Kaynakları

Chrome karması için büyük bir artı, manifest.json'da belirtilen tüm kaynaklar oluşturulduysa elbette artık uzantıyı etkinleştirebilmemizdir.

Commentblocker.css ve commentblocker_on.css dosyalarında ne olduğuna odaklanmaya değeceğini düşünmüyorum. Yorum içeren tüm seçicileri listeleyen yalnızca ilkini vereceğim:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link ( görünürlük: gizli !önemli; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_yorumunuz, #pv_comments, #pv_comments_header, #pv_your_comment ( ekran: yok !import karınca; görünürlük: gizli ! önemli; ) body:after ( konum: sabit; içerik: "__MSG_mode_enable__"; üst: 5 piksel; sağ: 5 piksel; dolgu: 6 piksel 12 piksel; arka plan rengi: #ffc; kenarlık: 1 piksel katı #ddd; z-index: 9999 ;)

Commentblocker_on.css dosyasında tahmin edebileceğiniz gibi tam tersi geçerli. Doğrudan CSS'de dil anahtarı içeriğine sahip bir satır kullandığımı unutmayın: "__MSG_mode_enable__" . Bu anahtarların saklanacağı bir dosya oluşturmanın zamanı geldi.

Uzantımızın root kısmında _locales dizini ve onun içine yuvalanmış en ve ru dizinlerini oluşturuyoruz. Daha sonra, message.json dosyasında anahtarlarımızı açıklıyoruz.

( "app_name": ( "message": "VK Yorum Engelleyici" ), "app_description": ( "message": "Haber akışında ve gruplarda yorumları gizlemenin kolay bir yolu." ), "browser_action": ( "message ": " Yorum türünü değiştir" ), "mode_enable": ( "message": "Yorum yok!" ), "mode_disable": ( "message": "Yorumlarla!" ))

Mesaj alanına ek olarak dokümanlardan öğrenebileceğiniz başka alanlar da vardır.

Şimdi, arka plan.html dosyalarını ilk olarak şu şekilde oluşturuyoruz:

Arka plan

Buradaki her şey normal HTML'dekiyle aynı; sıra dışı bir şey yok. Bu arada, manifest.json dosyasındaki alanlara göre otomatik olarak oluşturulduğu için arka plan.html dosyasını oluşturmanıza gerek yoktur.

Uzantıyı başlatma

Uzantıyı tek bir JavaScript satırı yazmadan çalıştırabilirsiniz. Bunu yapmak için menüden geçmeniz gerekir:

• Google Chrome'u (Hamburger) kurma ve yönetme
• Ek araçlar
• Uzantılar
• "Geliştirici modu"nun yanındaki kutuyu işaretleyin
• Paketlenmemiş uzantıyı indirin
• Uzantısı olan klasörü seçin

Uzantı yüklendi ve menüde göründü. Evet evet bu “B”.

Görünüşe göre az önce oluşturduğumuz uzantının kafasında hiçbir şey yok (mantık yok) ve sosyal ağın sayfalarındaki "B" harfli tüm yorumlar artık gizlenmiş durumda. Cevap manifest.json'da yatıyor; burada "content_scripts": () alanında commentblocker.css dosyasının hangi sayfalarda (http://vk.com/* ve https://vk.com/*) olacağını belirttik. tüm yorumları gizleyen otomatik olarak dahil edilecektir. Matematik kalıpları hakkında daha fazla okumanızı tavsiye ederim. Görünüş olarak çok basit ama kaputun altında tüm çan ve ıslıklarıyla neredeyse gri bir iğdiş balığı var.

Yani tek bir satır kod yazmadan, kendisine atanan ana görevi yerine getiren bir uzantıya zaten sahibiz.

Genişlemeyi canlandırmak

Görevin ikinci noktasını, yani yorumları görüntüleme yeteneğini uygulamaya koymaya devam ediyor. Kısacası, commentblocker.css dosyasının kurallarını geçersiz kılacak bir commentblocker_on.css dosyası göndermemiz gerekiyor. Ve burada yüce JavaScript'imiz yardımımıza koşuyor.

background.html hakkında söylediklerimi hatırlıyor musun? Evet, evet, yaratılması gerekmediği gerçeğiyle ilgili. Manifest.json dosyasını biraz değiştirelim:

... "arka plan": ( "kalıcı": false, "scripts": [ "scripts/commentblocker.js" ] ), ...

Az önce JavaScript dosyasını bağladım. Özel birşey yok. Bu dosyaya geçelim.

JS'yi bir sayfaya öylece dolduramazsınız. Ve aynı sorun yalnızca komut dosyalarında da mevcut değil. Bu nedenle özel bir executiveScript enjeksiyonu kullanmamız gerekiyor.

Öncelikle uzantı simgesine bir tıklama olayı işleyicisi eklemeniz gerekir:

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

toggleComments, CSS dosyamızı sayfaya enjekte edecek bir fonksiyondur:

Var toggleComments = function() ( var extensionLink; (document.getElementById("extension") == null) ? (extensionLink = document.createElement("bağlantı"), extensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), extensionLink.id = "uzantı", extensionLink.type = "metin/css", extensionLink.rel = "stil sayfası", document.getElementsByTagName("head").appendChild(extensionLink)) : (document. getElementsByTagName("kafa").removeChild(document.getElementById("uzantı"))) );

Bu kod parçasının CSS'mizin sayfaya bağlı olup olmadığını kontrol ettiği ve onu etkinleştirme veya devre dışı bırakmanın gerekliliği hakkında çıkarımlar yaptığı kelimelerinin yeterli olacağını düşünüyorum.

Bu arada, farklı ihtiyaç aralıklarını kapsayan çok fazla etkinlik mevcut değil. Örneğin, şu tür olaylar var:

• onCreated - bir sekme oluşturma.
• onUpdated - sekme güncelleniyor.
• onRemoved - bir sekmeyi kapatma.

onUpdated olayının iki kez çağrıldığını belirtmekte fayda var:

• Sayfa güncellemesi;

StackOverflow'ta sayfa durumunun kontrol edilmesini tavsiye ediyorlar:

Chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) ( if (changeInfo && changeInfo.status === "tamamlandı") ( ... ) ));

Artık simgeye tıkladığınızda yorumları görüntüleyecek bir stil dosyası bağlanacak ve simgeye tekrar tıkladığınızda yorumlar tekrar gizlenecektir.

sonuçlar

Bu arada, VK Comment Blocker uzantısının tam sürümünden bahsetmeye değer.

Bu alandaki en yetkili kişiler Wladimir Palant'tır (AdBlock Plus'ı yazdı), ... Chrome için uzantıların yazılması Firefox'tan daha kolaydır. İlginç bir şekilde Chrome için en popüler uzantının “Tyuryaga VKontakte” olması (Yandex istatistiklerine göre).

Buradaki zorluk, tarayıcıda açılan belirli HTML sayfalarına yanıt verecek bir uzantı geliştirmektir. Örneğin, bu sitenin kullanımını daha kolay hale getirmek için bir site sayfasının HTML kodunu değiştirin.
Çözüm, Google Chrome 24.x ve Chromium 6.x (Debian 6.0.6, amd64) üzerinde test edildi.

Sorunun çözümü

Crx uzantısının yazılması sırasında ortaya çıkan ana soruların özeti.

Bir uzantı nasıl kaydedilir?

Zamanlayıcı nasıl ayarlanır?

Bir uzantı nasıl kaydedilir?

Minimum uzantı için 4 dosya yeterlidir:

128.png arka plan.js content.js manifest.json

manifest.json nerede:

( "manifest_version": 2, "name": "DomainCheck extension", "version": "0.1", "background": ( "scripts": ["background.js"]), "content_scripts": [ ( "eşleşir ": [ "*://*/*" ], "js": [ "content..png" ) // web_accessible_resources yok )

background.js dosyası, tarayıcı başlatıldığında yürütülen kodu içerir. Bu komut dosyasında, belge içeriği yükleme işleyicisini (document.location.href) "asabilirsiniz".

Chrome'un kendisi _generate_background_page.html dosyasını oluşturur:

arka plan.js ile içerik komut dosyası arasında iletişim kurmak için mesajları (istek/mesaj) ve chrome.extension.getBackgroundPage()'ı kullanabilirsiniz. Ayrıca Chrome uzantılarının mimariye genel bakışına da bakın. "İçerik komut dosyası, tarayıcıya yüklenen bir sayfanın bağlamında yürütülen bir tür JavaScript'tir" diyor.

Not: Karşılık gelen bir sayfa olmadığından Chromium'daki arka plan sayfasında (background.js) hata ayıklamak zordur. geliştirici modunda "Uzantılar" sayfasındaki sekmeler.

Mevcut URL nasıl kontrol edilir, kırpılır ve hash nasıl hesaplanır?

DOMContentLoaded'a bir işleyicinin nasıl kurulacağı, geliştirici.chrome.com'da açıklanmaktadır. Ayrıca Arka Plan Sayfaları (background.js) hakkındaki belgelere de bakın.

HTML kodunu bir sayfaya gömmek için Habré hakkındaki makaledeki tavsiyeyi kullanabiliriz (genel değişken belgesinden söz etmek için oraya bakın), ancak aynı zamanda mevcut URL'yi listeyle karşılaştırmamız da gerekir.

document.location.href kullanımdan kaldırıldı mı?

Tam nitelikli alan adını alma konusunda stackoverflow.com'dan örnek:

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; dönüş l; ); var l = getLocation(url); uyarı(l.ana bilgisayar adı)

Bunun gibi 2. düzey bir alt alan adı seçebilirsiniz:

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

(stackoverflow.com'daki ipucuna bakın).

sha1.js enjeksiyonu ...

Zamanlayıcı nasıl ayarlanır? Örnek Uzantılara bakın: Etkinlik Sayfası Örneği, arka plan.js:

chrome.alarms.create((delayInMinutes: 0,1)); chrome.alarms.onAlarm.addListener(function() ( warning("Süre" doldu!"); ));

Chromium'daki bu hata 9 Ocak 2013'te kapatıldı ancak Windows'un en son yapılarında henüz ortaya çıkmadı.

Hala "modern" alarmları kullanmaya karar verirseniz, isteğe bağlı bir süreye/döneme sahip bir alarm zamanlayıcısının nasıl doğru şekilde ayarlanacağı stackoverflow.com'da açıklanmaktadır.

Eski tarayıcılarla uyumluluk için, arka plan.js'de window.setInterval() işlevini kullanmak daha iyidir:

var ben = 0; window.setInterval(function() ( uyarı(i); i++), 2*1000); // milisaniye cinsinden

setTimeout() işlevi tek bir "çalar saat"tir.

Devre Dışı Bırak-Etkinleştir krom uzantıları, arka plan.js'yi yeni bir şekilde başlatır. *) Moda girmek için aynı şeyi kontrol etmem gerekiyor mu? ve uyu.

Config.xml/time.txt nasıl indirilir ve nasıl ayrıştırılır?

Yalnızca XMLHttpRequest yoluyla indirirseniz şu mesajı alabilirsiniz: "XMLHttpRequest http://site/config.xml yüklenemiyor. Origin http://www.google.ru'ya Access-Control-Allow-Origin tarafından izin verilmiyor. ”. Bu, alanlar arası istekte bulunurken CORS, .htaccess seçeneğini etkinleştirmediğiniz anlamına gelir:

Başlık seti Erişim Kontrolü-İzin Ver-Origin "*"

Alanlar arası isteklere Chrome uzantısında ve manifest.json'daki izinler aracılığıyla izin verebilirsiniz:

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

Ancak bu durumların her ikisi de paketlenmemiş Chromium uzantıları için çalışmaz. Paketlenmiş uzantılar için, Chromium 6.0-7.0 sürümleri bazen "Kötü sihirli sayı" görüntülüyor (yalnız Chrome için bu hata gözlemlenmiyor).
Not: CORS koruması Chromium'da --disable-web-security seçeneği aracılığıyla atlanabilir:

$ krom-tarayıcı --web-güvenliğini devre dışı bırak http://etki alanı/yol

Ekleme: Chromium için manifest.json'daki satırları aşağıdaki şekilde değiştirmeniz gerekir (alanı açıkça belirterek ve yola bir yıldız işareti ekleyerek):

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

Chrome'daki web denetçisinin (?) İnternet kapatıldığında XMLHttpRequest() hakkında şikayette bulunmasını önlemek için şunu yapabilirsiniz:

var req = null; try ( req = new XMLHttpRequest(); ) catch(err) () // stackoverflow.com'daki tavsiyelere bakın

(bu, stackoverflow.com'un tavsiyesi üzerine yazılmıştır). ...

Ayrıştırmada hata ayıklamak için console.log("line") komutunu kullanabilirsiniz. Dizeler "\n" kullanılarak satırbaşı dönüşlerini kabul eder.

Chrome uzantısında XML'in JavaScript'e ayrıştırılması şu şekilde yapılır:

var xml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("zaman aşımı"); var zaman aşımı = 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); } }

Chrome uzantısında global atomik değişkenler ve tablo verileri nasıl kullanılır?

Depolama API'sini kullanarak uzantı verilerini senkronize etmek için Chrome sürümünün >= 20 olması gerekir. Bildiride (manifest.json) aşağıdakileri yazmanız gerekir:

"premisyonlar": ["depolama" ]

Google'ın "Chromium HTML5" grubunda yazdıkları gibi, "Dikkatimi Web SQL Veritabanına çevirdim ancak görünen o ki Web SQL artık "aktif bakımda" değil, bu da beni HTML spesifikasyonlarından çıkarılacağına inanmaya yöneltiyor." Daha fazla ayrıntı için bkz. W3C Web SQL Veritabanı, not. Temel kavramları kullanmayı deneyebilirsiniz; veritabanı alanını genişletmek için manifest.json'daki sınırsızStorage izinlerini kullanabilirsiniz. "Sınırsız depolama"yı kullanmak için aşağıdaki Çevrimdışı API'ler vardır: 1) Uygulama Önbelleği; 2) Dosya Sistemi; 3) İndekslenmişDB; 4) WebSQL (kullanımdan kaldırıldı). Chrome'da IndexedDB kullanımına ilişkin bir örnek için bkz. IndexedDB ile çalışmanın bir örneği için bkz. gist.github.com:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("veritabanım") req.onerror = function() ( console.log("hata"); )

IndexedDB dosya konumları,
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/ toplam 24 drwx------ 2 anonim anonim 4096 7 Şubat 03:08 . drwx------ 3 anonim anonim 4096 7 Şubat 03:08 .. -rw-r--r-- 1 anonim anonim 285 7 Şubat 03:08 000003.log -rw-r--r-- 1 anonim anonim 16 Şub 7 03:08 GÜNCEL -rw------- 1 anonim anonim 0 Şub 7 03:08 KİLİT -rw-r--r-- 1 anonim anonim 46 Şub 7 03:08 LOG -rw-r --r-- 1 anonim anonim 32 Şubat 7 03:08 MANIFEST-000002

Mozilla Geliştirici Ağı üzerinde IndexedDB kullanım örneklerine bakabilirsiniz.

IndexedDB'ye çok sayıda kaydın eklenmesi stackoverflow.com'da ele alınmaktadır.

IndexedDB'ye öğe eklemek için kullanmanız gerekir

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

IndexedDB veritabanı klasöründe, eski veritabanları .sst dosyaları olarak, yeni (geçerli) veritabanları ise .log dosyaları olarak depolanır.

setVersion() kullanımdan kaldırıldı. Ancak burada [onupgradeneeded() hakkında] bir püf noktası var: ...

Parashuram Narasimhan'ın blogunda belirtildiği gibi, "Chrome için: Chrome durumunda onupgradeneeded işlevi çağrılmaz. Veritabanının onsuccess işlevi çağrılır. Burada setVersion metodunun varlığı kontrol edilir. Yöntem mevcutsa ve belirtilen sürüm veritabanı sürümünden büyükse setVersion yöntemi çağrılır. SetVersion'un istek çağrısının başarılı olması, sürüm işlemiyle birlikte kullanıcının onupgradeneeded yöntemini çağırır. Yöntem tamamlandıktan sonra versionTransaction veritabanı kapatılarak işlenir. Veritabanı en son sürümle tekrar açılır ve bu, kullanıcı tarafından tanımlanan onsuccess'e iletilir." (böylece onupgradeneeded() işlevini çağırmak için db.setVersion("3") işlevini kullanırım).

Content.js'de veri nasıl alınır:

dbreq.onupgradeneeded = function(event) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["test_db"], "salt okunur"); var mağaza = tx.objectStore("yapılacaklar");

Veritabanını açmak için axemclion+jepp (openReqShim işlevi) kodunu kullanın.

Var olmayan bir IndexedDB veritabanını açtığımızda version = 0 versiyon numarasıyla oluşturulacaktır. Bu durumda onupgradeneeded() ve onsuccess() sırasıyla çağrılır. onupgradeneeded()'ı ilk çağırdığımızda sürüm zaten = 1'dir. [Existing veritabanını] ikinci kez açtığımızda artık onupgradeneeded() çağrılmaz ve sürüm numarası = 1 olur. (?artmaz) Sadece dbreq .onsuccess() çağrılır.

Bir şey daha. Şöyle diyor: "23'ten önceki Chrome'da, spesifikasyondan çıkarılmış bir API olan setVersion()'u çağırarak böyle bir işlemi manuel olarak oluşturmanız gerekir. Eski spesifikasyon şu adreste bulunabilir: http://www.w3.org /TR/2011/WD-IndexedDB-20110419/", yani chrome loglarında "NotFoundError: DOM IDBDatabase Exception 8" hatasını önlemek için setVersion() öğesini çağırmanız gerekir.

Chromium 6.0.472.63 (59945)'te IndexedDB uygulaması kararlı olmadığından devre dışı bırakıldı ve çalışmıyor =)

Genel olarak, mesaj yoluyla içerik komut dosyalarıyla arka plan.js + iframe + exchange kullanmanız gerekir.

Sayfa açılış olayı nasıl işlenir?

"content_scripts": [ ( "eşleşir": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_start" ) ], ...

Content.js:

document.addEventListener("DOMContentLoaded", function () ( alarm("Abc "+document.location.href); ));

Bir sayfanın HTML kodu nasıl biçimlendirilir? Firefox uzantılarının yazılmasına bakın. Bir uzantı nasıl paketlenir ve nereye yerleştirilir?

Chrome Web Mağazası'na bir uzantı yerleştirmek için Google'a 5 ABD doları tutarında bir giriş ücreti ödemeniz gerekir (bu durumda istediğiniz sayıda uzantı yerleştirebilirsiniz). VISA, MasterCard, AMEX veya DISCOVER yoluyla ödeme yapabilirsiniz (ayrıca ödeme yaparken tam posta adresinizi ve Adınızı ve Soyadınızı belirtmelisiniz).

Uzantıyı yerleştirmek için bir Google hesabına vb. ihtiyacınız vardır. Bir ekran görüntüsüne ve bir reklam görseline ihtiyacınız olacak. Uzantı kodunu aynı Chrome Web Mağazası aracılığıyla manuel olarak güncellemeniz gerekecektir (anladığım kadarıyla, Firefox'ta olduğu gibi URL'ye göre otomatik güncelleme yoktur). Manifest.json dosyasında uzantı sürümünü güncellemeniz gerekir. Uzantı, eklendikten birkaç dakika sonra Chrome uzantıları aramasında mevcut olacaktır.

Linux için uzantı paketi:

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

Anahtar Kelimeler: Windows için Chromium derlemeleri NASIL, Google Chrome indirme sayfası, Google Chrome örnek uzantıları.

İnternette fare veya kaydırma çubuğu kullanmadan sayfayı yukarı kaydırma olanağı sağlayan birçok site vardır. Ancak aynı zamanda hala böyle bir uygulamanın olmadığı siteler de var. "Neden tüm sitelere böyle bir düğme ekleyecek bir komut dosyası yazmayı denemiyorsunuz?" - Düşündüm ve uygulamaya koyuldum. Bu tür komut dosyalarına kullanıcı komut dosyaları denir ve *.user.js uzantısına sahiptir. Mesela Habré'de okuyabilirsiniz. Ne yazık ki, tuzaklar olmadan bunu yapmak mümkün değil. Farklı tarayıcılar için userjs'nin uygulanmasında bazı farklılıklar vardır. Userjs betiğimizin Google Chrome tarayıcısının bir uzantısı olarak uygulanmasını açıklamaya odaklanacağım.

manifest.json

Google Chrome uzantısı için gerekli dosya: manifest.json parametreleri, harici dosyalara (*.js, *.css, vb.), sürüm desteğini vb. açıklayan yollar. genişleme için. Dosya hakkında daha fazlasını okuyabilirsiniz. Bizim durumumuzda manifest.json dosyası şöyle görünür:

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "eşleşir": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true, "description": "Google Chrome için üst kullanıcı metni uzantısı", "name": "backTopUserJS", "version": "1")

Kolaylık sağlamak için manifest.json dosyasının ve ana komut dosyasının (bizim durumumuzda backTopUserJS.user.js) yanına yerleştirdiğimiz JQuery kitaplığını kullanıyoruz. İçeriği aşağıdaki gibidir:

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

"); $(document).find("body").append($upButton); $upButton.click(function () ( $("html, body").animate(( ScrollTop: 0 ), "yavaş" ); )); $(window).scroll(function () ( if ($(window).scrollTop() > 400) $upButton.fadeIn("yavaş"); else $upButton.fadeOut("yavaş"); )); ); var script = document.createElement("script"); script.appendChild(document.createTextNode("("+ main +"))();")); (document.body || document.head | | document.documentElement).appendChild(script);

Senaryonun ayrıntılı olarak ele alınacak kadar açık olduğunu düşünüyorum. Sadece son 3 satırı açıklamaya değer. Aslında bu, betiğimizi site sayfa koduna ekleyen küçük bir hack'tir. Eğer herhangi biriniz daha iyi bir yol bulursa, düzeltmelerinizi yorumlara yazabilirsiniz :)

Uzantıyı tarayıcıya yükleme

Diğer tarayıcılara benzer şekilde Google Chrome'a ​​özel komut dosyaları yükleyebilirsiniz, ancak Google güvenliğimizi önemsediğinden bunların tarayıcı uzantılarına sarılması gerekir. Adım adım kuruluma bakalım.

Uzantımız için şu şekilde bir klasör oluşturun: C:\MyChromeExtensionUserJS

Her uzantı için kendi dizinimizi oluşturuyoruz; örneğin bizim durumumuzda buna C:\MyChromeExtensionUserJS\backTopUserJS adını vereceğiz. Bu dizine uzantı dosyaları ekleyin.

"Google Chrome Tarayıcı Hakkında" -> "Uzantılar" sekmesine gidin veya adres çubuğuna chrome://extensions/ yazın

"Geliştirici modu" kutusunu işaretleyin

"Paketlenmemiş uzantıyı yükle" düğmesini tıklayın ve uzantımızın dizinini seçin. "Tamam"a tıklayın.

Uzantı yüklü ve kullanıma hazır. Uzantıları değişiklik yaptıktan sonra güncellemek için "Uzantıyı güncelle" düğmesini tıklamanız veya geliştirici modunda Ctrl+R klavye kısayoluna basmanız yeterlidir.

Sonuç olarak

Betik kaynaklarını github'da görüntüleyebilirsiniz. Komut dosyası ideal olduğunu iddia etmiyor, ancak yalnızca Google Chrome için kendi özel komut dosyalarınızı yazmanız için bir örnek ve itici güç olarak hizmet ediyor.