✅ Chrome için uzantıları programlayın ve oluşturun

İçindekiler

1. Chrome uzantısı nasıl oluşturulur ve programlanır
2. Chrome için uzantı örneği

Bu eğitici 3 bölüme ayrılacaktır: Chrome'daki uzantılar, yapıları ve bir uzantının temel oluşturulmasıyla ilgili çeşitli kavramları açıklayacağımız ilk bölüm. İkinci bölümde, birkaç pratik örnek yaparak Google Chrome gibi bu harika tarayıcı için uzantılar oluşturmaya odaklanacağız. Son olarak, üçüncü bölümde, uzantı oluştururken gelişmiş seçenekleri ve bunların genel halka açık olması için Google Chrome web mağazasında nasıl yayınlanacağını açıklayacağız.

Google Chrome'daki uzantılar nelerdir?Uzantılar, tarayıcının, bu durumda Chrome'un işlevselliğini değiştirebilen ve geliştirebilen küçük programlardır. Bunlar HTML, Javascript ve CSS gibi web teknolojileri kullanılarak geliştirilmiştir.

Uzantıların çok az kullanıcı arayüzü var veya hiç yok. Örneğin, aşağıdaki resim, tıklandığında küçük bir arayüz açan bir asma kilit simgesini göstermektedir.

Bu özel uzantı, e-postalarınızı bir PGP anahtarıyla şifrelemek ve şifresini çözmek için kullanılır. Uzantılar, kullanıcının indirip yüklediği bir dosyada paketlenmiş dosyalardır. Bu paketleme, normal web uygulamalarının aksine, web içeriğine bağlı olmak zorunda değildir.

Yukarıda tartışıldığı gibi, uzantılar, yerel koda derinlemesine dalmadan Chrome'a işlevsellik eklemenize olanak tanır. Çoğu web geliştirme programcısının çalıştığı temel teknolojilerle yeni uzantılar oluşturulabilir: HTML, CSS ve Javascript.

1. Chrome uzantısı nasıl oluşturulur ve programlanır

Başlamak için, arama terimi olarak geçerli sayfanın URL'sini kullanarak Google'dan bir resim alan basit bir uzantı yapacağız. Bunu dediğimiz bir kullanıcı arabirimi öğesini uygulayarak yapacağız. chrome.browserİşlem, hızlı erişim için tıklayabileceğiniz krom menüsünün hemen yanına bir simge yerleştirmemize olanak tanır. Bu simgeye tıklamak, geçerli sayfadan elde edilen bir görüntüyü içeren ve aşağıdaki gibi görünecek bir açılır pencere açacaktır:

Uygulamamıza başlamak için adında bir dizin oluşturacağız. Resim görüntüleyici, bunun içinde birlikte çalışacağımız tüm dosyaları dahil edeceğiz. Bir geliştirme editörü olarak tercih ettiğiniz birini kullanabilirsiniz, benim durumumda aşağıdaki adresten indirebileceğiniz Chrome Dev Editor kullanacağım:

Chrome Geliştirici Düzenleyicisi

İhtiyacımız olan ilk şey, adında bir bildirim dosyası oluşturmaktır. manifest.json. Bu bildirim, uzantısının adı, açıklaması, sürüm numarası gibi özellikleri içeren JSON biçimindeki bir meta veri dosyasından başka bir şey değildir. İleri düzeyde, uzantının ne yapacağını ve belirli şeyleri yapmak için gereken izinleri Chrome'a bildirmek için kullanacağız.

Manifest dosya formatı aşağıdaki gibidir:

 {// Gerekli "manifest_version": 2, "name": "Uzantım", "version": "versionString", // Önerilen "default_locale": "es", "description": "Düz metin açıklaması", " simgeler ": {…}, // Birini seçin (veya hiçbirini seçin)" browser_action ": {…}," page_action ": {…}, // İsteğe bağlı" yazar ":…," otomasyon ":…," arka plan ": {// Önerilen "kalıcı": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," komutlar ": {…}," content_capabilities ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convert_from_user_script ":…," copresence ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"eşleşir": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // path / to / ana sayfa "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," gizli ":" yayılma veya bölme "," input_components ":…," anahtar " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "çok amaçlı adres çubuğu": {"keyword": "aString"}, "opsiyonel_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "izinler": ["sekmeler"], " platformlar ":…," eklentiler ": […]," gereksinimler ": {…}," sandbox ": […]," short_name ":" Short Name "," imza ":…," yazım denetimi ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name" ":" aString "," web_accessible_resources ": […]}

Daha sonra en önemli etiketleri karşılayan işlevi anlatacağım:

Gerekli:

manifest_version: Bildirim sürümüdür, dosya biçiminin sürümünü belirten bir tamsayı ile temsil edilir. Chrome 18'den itibaren geliştiriciler 2 sayısını belirtmelidir.

tatlı patates: Uzantınızın sahip olacağı addır. Bu, maksimum 45 karakterden oluşmalıdır, ad, uzantının ana tanım öğesidir ve zorunlu bir alandır. Aşağıdaki yerlerde görüntülenir:

a) Kurulum kutusunda.
b) Uzantının yönetildiği kullanıcı arayüzünde.
c) Chrome sanal mağazasında.

sürüm: Uzantının sürümünü tanımlayan noktalarla ayrılmış bir ila dört tam sayıdan oluşmalıdır. Geçerli sürümlerden bazı örnekler:

"Versiyon 1"
"Sürüm": "1.0"
"Sürüm": "2.10.2"
"Sürüm": "3.1.2.4567"

Önerilen:

default_locale: Bu uzantı için varsayılan dizeleri içeren _locales (diller) alt dizinini belirtir. Kullanıcının görebileceği tüm dizeleri message.json adlı bir dosyanın içine koymalısınız. Her yeni bir dil eklediğinizde, yeni bir dosya eklemelisiniz mesajlar.json _locales / localecode dizini altında localecode dil kodudur, tıpkı en İngilizce ve İspanyolca dili için olduğu gibi.

İngilizce (en), İspanyolca (es) ve Korece (ko) desteğiyle uluslararasılaştırılmış bir uzantı örneği aşağıdaki gibi olabilir:

tanım: Uzantının işlevselliğini açıklayan maksimum 132 karakterden oluşan düz metin (HTML veya başka bir format olmadan) bir dize içerir.

Simgeler: Uzantıyı temsil eden bir veya daha fazla simge eklemenizi sağlar. Her zaman 128x128 piksellik bir simge sağlanmalıdır. Bu, yükleme sırasında ve Chrome Web Mağazası'nda kullanılacaktır. Uzantılar ayrıca, Chrome uzantıları yönetim sayfasında (chrome: // uzantılar) kullanılan 48x48'lik bir simge sağlamalıdır. Bir uzantının sayfalarının favicon'u olarak kullanılmak üzere 16x16'lık bir simge de belirtebilirsiniz.

Simgeler, şeffaflık için en iyi desteğe sahip olduğundan, genellikle PNG biçiminde olmalıdır. Ancak, BMP.webp, GIF.webp, ICO ve JPEG.webp dahil olmak üzere WebKit'in desteklediği herhangi bir biçimde olabilirler. Simge belirtimine bir örnek:

 "icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},

Örnek

Birini seçin (veya hiçbirini seçin):

tarayıcı_eylem: Google Chrome tarayıcısının üst kısmında, adres çubuğunun sağındaki ana araç çubuğuna simgeler yerleştirmek için browser_action'ı kullanın. Ek olarak araç ipucu (kayan mesaj), rozet (simge üzerinde kayan metin) ve açılır pencere (kayan pencere) ekleyebilirsiniz.

Kullanım örneği browser_action:

 {"name": "Uzantım",… "browser_action": {"default_icon": {// isteğe bağlı "19": "images / icon19.png.webp", // isteğe bağlı "38": "images / icon38.png.webp" // isteğe bağlı}, "default_title": "Google Mail", // isteğe bağlı; "default_popup" araç ipucunu gösterir: "popup.html" // isteğe bağlı}, …}

sayfa_eylem: Simgenizi adres çubuğuna yerleştirmek için bu API'yi kullanın.

Kullanım örneği:

 {"name": "Uzantım",… "page_action": {"default_icon": {// isteğe bağlı "19": "images / icon19.png.webp", // isteğe bağlı "38": "images / icon38. png" // isteğe bağlı}, "default_title": "Google posta", // isteğe bağlı; "default_popup" açıklamasında göster: "popup.html" // isteğe bağlı},…}

Eski

İsteğe bağlı:

Arka fon: Uzantılarda yaygın bir ihtiyaç, bazı görevleri veya durumları yönetmek için uzun dizilerin yürütülmesi için tek bir sayfaya sahip olmaktır. Bu, uzantıyla birlikte çalışan bir HTML sayfasıdır. Uzantı çalışmaya başladığında başlar ve bir seferde yalnızca bir örneğini etkinleştirir. Arka Plan kullanmak yerine bir etkinlik sayfası kullanmanız önerilir.

Arka planda bir sayfası olan tipik bir uzantıda, örneğin browser_action veya page_action gibi kullanıcı arayüzü ve bazı sayfa seçenekleri, uzantının görünümü olarak işlev görür. Görünümün bazı durumları bilmesi gerektiğinde (pencereyi kapattı, sayfayı güncelledi …), Arka Plan olarak bulunan sayfaya durum için istekte bulunur. Arka Plan sayfası, durumda bir değişiklik olduğunu bildirdiğinde, görünümün güncellenmesini veya bir önlem alınmasını bildirir.

Biçimi aşağıdaki gibidir:

 {"name": "Uzantım",… "arka plan": {"komut dosyaları": ["background.js"]},…}

Biçim

Etkinlik Sayfaları: Aşağıdaki özniteliği tanımlamadan önce Etkinlik Sayfalarının ne hakkında olduğunu açıklamak gerekir. Uygulamalar ve uzantılar için yaygın bir ihtiyaç, bazı görevleri veya durumları işlemek için uzun süre çalışan tek bir komut dosyasına sahip olmaktır. Etkinlik sayfalarının amacı budur. Etkinlik sayfaları yalnızca gerektiğinde yüklenir. Aktif olarak bir şey yapmadığında, önbellekten kaldırılarak bellek ve diğer sistem kaynaklarını boşaltır.

Performans faydaları, özellikle düşük güçlü cihazlarda önemlidir. Bu nedenle Arka Plandan daha fazla etkinlik sayfası kullanılması önerilir.

Manifest dosyasındaki bir olay sayfasının bildirimi şu şekilde olacaktır:

 {"name": "Uzantım", … "arka plan": {"komut dosyaları": ["eventPage.js"], "kalıcı": false}, …}

Gördüğünüz gibi Arka Plan ile olan farkı, false durumuna sahip olacak olan kalıcı özelliktir.

chrome_settings_overrides: Chrome'da seçilen bazı yapılandırmaların üzerine yazmak için kullanılır. Bu API yalnızca Windows için kullanılabilir.

Bu yapılandırmalardan bazıları Ana Sayfa (tarayıcı ana sayfası, Arama Sağlayıcısı (arama sağlayıcısı), vb.) olabilir.

Yapılandırma örneği:

 {"name": "Uzantım",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "anahtar kelime " : "anahtar kelime .__ MSG_url_domain__", "search_url": "http: //www.foo.__MSG_url_domain__/s? q = {searchTerms}", "favicon_url": "http: //www.foo.__MSG_url_domain__/f ico" , "suggest_url": "http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms}", "instant_url": "http: //www.foo.__MSG_url_domain__/anında? q = {aramaTermleri}" , " image_url ":" http: //www.foo.__MSG_url_domain__/image? q = {arama Terimleri} "," search_url_post_params ":" search_lang = __ MSG_url_domain__ "," Recommend_url_post_params ":" langma_lang = ___do MSG langma_lang = ___do MSG MSG_url_domain =" instant_url_params_url_domain " __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternatif_urls ": [" http: //www.moo.__main { //www.moo.__main { //www.moo. .noo.__MSG_url_url_ ? q = {searchTerms} "]," kodlama ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …}

chrome_ui_overrides: Uzantının bu özelliği, Chrome kullanıcı arayüzündeki bazı ayarların üzerine yazmak için kullanılır. Örneğin işaretçiler gibi. Yapılandırması aşağıdaki gibidir:

 {"name": "Uzantım",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…}

Bu durumda, tarayıcının favoriler için sahip olduğu yıldız eleniyor.

chrome_url_overrides: Bu, Google Chrome tarayıcısının normalde sağladığı bir sayfanın uzantısındaki HTML dosyasını değiştirmenin bir yoludur. Ek olarak, CSS ve JavaScript kodunun üzerine de yazabilirsiniz.

Bu yapılandırmaya sahip bir uzantı, aşağıdaki Chrome sayfalarından birinin yerini alabilir:

Yer İşaretleri Yöneticisi: Kullanıcı, Chrome menüsündeki yer işaretleri yöneticisi menüsünden veya Mac için Yer İşaretleri menüsündeki Yer İşaretleri yöneticisi öğesinden seçeneği belirlediğinde görünen sayfadır.

BÜYÜT

Tarih (tarih): Kullanıcı Chrome menüsünden geçmişi seçtiğinde veya Mac'te geçmiş seçeneğinde bulunan menüden öğenin tam geçmişi gösterdiğinde görünen sayfadır.

BÜYÜT

Yeni sekme (yeni sekme): Kullanıcı tarayıcıdan yeni bir sekme veya pencere oluşturduğunda görünen sayfadır. Bu sayfaya, adres çubuğuna şu adresi yerleştirerek de erişebilirsiniz: chrome: // newtab

BÜYÜT

NotTek bir uzantı yalnızca bir sayfanın üzerine yazabilir. Örneğin, bir uzantı yer imlerinin üzerine yazamaz ve buna karşılık geçmiş sayfasının üzerine yazamaz.

 {"name": "Uzantım",… "chrome_url_overrides": {"newtab": "sayfam.html" // seçenekler şunlardır: yeni sekme, geçmiş, yer imleri},…}

komutlar: Bu komut API'sı, uzantınızda bir eylemi tetikleyen klavye kısayollarını eklemek için kullanılır. Örneğin, tarayıcı eylemini açma eylemi veya uzantıya bir komut gönderme eylemi.

 {"name": "Uzantım",… "komutlar": {"toggle-feature-foo": {"önerilen_key": {"varsayılan": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}," açıklama ":" Özelliği değiştir "}," _execute_browser_action ": {" önerilen_anahtar ": {" windows ":" Ctrl + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"önerilen_key": {"varsayılan": "Ctrl + ÜstKrkt + E", "pencereler ":" Alt + Üst Karakter + P "," mac ":" Alt + Üst Karakter + P "}}},…}

Arka Plan sayfanızda, manifest.js'de tanımlanan komutların her biri için bir denetleyici bağlayabilirsiniz ('_execute_browser_action'E'_execute_page_action') aracılığıyla onCommand.addListener.

Örneğin:

 chrome.commands.onCommand.addListener (işlev (komut) {console.log ('Komut basıldı:', komut);});

içerik_komut dosyaları: Web sayfaları bağlamında yürütülen javascript dosyalarıdır. Standart Belge Nesne Modelini (DOM) kullanarak, tarayıcı ziyaretlerinin web sayfalarının detaylarını okuyabilir veya üzerinde değişiklik yapabilirler.

 {"name": "Uzantım",… "content_scripts": [{"eşleşir": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…}

içerik_komut dosyaları: Uzantılarımızı daha güvenli hale getirmek ve olası siteler arası komut dosyası sorunlarından kaçınmak için, Chrome uzantı sistemi genel kavramını dahil etmiştir. İçerik Güvenliği Politikası (CSP). Bu, uzantıları varsayılan olarak daha güvenli hale getirecek çok katı politikalar sunar. Genel olarak, CSP, uzantıları tarafından yüklenen veya yürütülen kaynaklar için bir kara ve beyaz liste mekanizması olarak çalışır.

 {…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self'"…}

Bunlar en önemli özelliklerden bazılarıydı. İlk uygulamamız için manifest.json dosyamızı aşağıdaki gibi tanımlayacağız:

 {"manifest_version": 2, "name": "Başlangıç örneği", "description": "Bu uzantı, geçerli sayfanın google resimlerinden bir resim gösterir", "sürüm": "1.0", "browser_action": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," izinler ": [" activeTab "," https://www.googleapis.com/ "]}

Örnek manifestimizde de görebileceğiniz gibi, bir browser_action, activeTab'in mevcut sekmenin URL'sini görme izni ve ana makineye izin verildi, bu şekilde harici görselleri aramak için Google API'sine erişilebilir.

Buna karşılık, browser_action tanımlanırken 2 kaynak dosyası bulunur: icon.png.webp ve popup.html. Her iki kaynak da uzantı paketinde mevcut olmalıdır, bu yüzden şimdi onları oluşturalım:

simge.png.webp Kullanıcı etkileşimini bekleyen çok işlevli kutunun yanında görüntülenecektir. Bu sadece 19px x 19px PNG dosyasıdır.

popup.html kullanıcının simgeye tıklamasına yanıt olarak oluşturulan açılır pencerede görüntülenecektir. Standart bir HTML dosyasıdır ve içeriği aşağıdaki gibidir:

Başlarken Uzantının Açılır Penceresi

BÜYÜT

2. Sağ üst köşedeki geliştirici modu onay kutusunun işaretli olduğundan emin olun.

3. Dosya seçimi iletişim kutusunu açmak için Sıkıştırılmamış (Paketlenmemiş) Uzantıyı Yükle'ye tıklayın.

BÜYÜT

4. Uzantı dosyalarınızın bulunduğu dizine gidin ve onu seçin.

Alternatif olarak, projenizi içeren dizini sürükleyip Chrome uzantıları penceresine bırakabilirsiniz. Bu, uzantıyı tarayıcınıza yükleyecektir.

Bu şekilde google Chrome için basit bir eklenti yapmış olacağız. Bir sonraki bölümümüzde, geliştirmemizi kolaylaştırmamızı sağlayacak jquery ve Bootstrap gibi geliştirme çerçeveleriyle bağlantılı uzantıların yapımını inceleyeceğiz.

2. Chrome için uzantı örneği

Bu bölümde, Google Chrome için bir uzantı oluştururken var olan birçok işlevi tam olarak anlamamızı sağlayacak birkaç örnek uygulayacağız.

Uygulama 1 - Mavi Arka Plan
Bu örnekte tarayıcımıza yüklediğimiz sayfaların içeriğini nasıl değiştirebileceğimizi öğreneceğimiz basit bir uzantı yapacağız. Bu durumda yüklenen sayfanın arka plan rengini değiştirip maviye çevireceğiz.

Bu eğitimin ilk bölümünde açıkladığım gibi, herhangi bir geliştirme IDE'sini kullanabilirsiniz, benim durumumda Chrome Dev Editor kullanacağım.

BÜYÜT

Başlamak için, adıyla yeni bir dizin oluşturacağız. mavi arka plan ve aynı isimde bir proje oluşturacağız.

BÜYÜT

İçeride ilk dosyamızı oluşturacağız manifest.json uzantımızın tanımlarını içerecektir.

BÜYÜT

Arşivimiz manifest.json aşağıdaki kodu içermelidir:

 {"manifest_version": 2, "name": "Blue Background", "description": "Bu uzantı, geçerli sayfanın arka plan rengini değiştirdi", "version": "1.0", "browser_action": {"default_icon" : "icon.png.webp", "default_title": "Bu sayfayı Mavi yap"}, "izinler": ["activeTab"], "background": {"scripts": ["background.js"], "kalıcı": false }}

Uzantımız basit olduğu için, yalnızca basıldığında bir eylem gerçekleştirecek bir simge içerecektir. Dosyada gördüğünüz gibi manifest.json içinde bir isim ve açıklamasını tanımlarız. tarayıcı_eylem Google Chrome tarayıcımızın çubuğunda görüntülenecek simgeyi ve fare işaretçisi söz konusu simgenin üzerine getirildiğinde görüntülenecek başlığı tanımlarız. İzinlerle ilgili olarak sadece aktif sekmede yapılacağını tanımlayacağız. Arka planda çalışacak dosya bizim dosyamız olacaktır. arkaplan.js kalıcı olmayacaktır, çünkü yalnızca uzantıya tıkladığımızda yürütülecektir.

İkonumuzu oluşturup proje dizininde tanımlandığı gibi kaydediyoruz. manifest.json. Bu durumda projenin kökünde.

Daha sonra adında bir JavaScript dosyası oluşturuyoruz. arkaplan.js aşağıdaki kodla aynı dizinde:

 // kullanıcı chrome.browserAction.onClicked.addListener (işlev (sekme) uzantısına tıkladığında çağrılır {console.log ('Değiştiriliyor' + tab.url + 'maviye!'); chrome.tabs.executeScript ({ kod: ' document.body.style.backgroundColor = "mavi"'});});

Tüm projeyi aşağıdaki gibi bırakmak:

BÜYÜT

Uzantımızı çalıştırmak için tek yapmanız gereken Chrome Geliştirici Düzenleyici'nin üst çubuğunda bulunan oynat düğmesine basmak.

BÜYÜT

Basıldığında, uzantı Google Chrome tarayıcısına otomatik olarak yüklenecektir.

Uzantımızı çalışırken görelim, yaptığım simgeye (beyaz A harfi ile mavi arka plan), mevcut sekmede yüklediğim sayfaya, benim durumumda Solvetic'teki kullanıcı hesabım (http: // www .solvetic… .berth-ramncgev /) arka planını mavi olarak değiştirecektir. BODY öğesinin içerdiği DIV'leri değil, yalnızca renginin değişeceğine dikkat edilmelidir, çünkü onu benim dosyamda bu şekilde tanımladım. arkaplan.js.

BÜYÜT

2. Alıştırma - Çoklu Renk
Bu örnekte, geliştirme IDE'sinden ve koddan çalışmamızı nasıl kolaylaştıracağımızı göstereceğim. İçinde Chrome Geliştirici Düzenleyicisi, + butonuna tıklıyoruz, yeni bir proje oluşturmak için bu sefer proje tipini değiştireceğiz seçeneği seçerek JavaScript Chrome Uygulaması.

BÜYÜT

Gördüğünüz gibi projemizin tüm yapısını otomatik olarak oluşturuyor. bizim dosyamızla manifest.json En yaygın tanımlarla.

BÜYÜT

Bu dosyaya etikete kısa bir açıklama ekleyeceğiz tanım benim durumumda "Arka plan rengini değiştirmeye izin veren uzantı". Bu proje için biri 16x16 piksel diğeri 128x128 piksel olmak üzere 2 adet ikon oluşturacağız, yapıda görebileceğiniz gibi bunlar dizine kaydedilecek. varlıklar.

Aşağıdaki kodu etiketin altına ekleyeceğiz minimum_chrome_version:

 "izinler": ["sekmeler", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Sayfayı birden çok renge değiştirin.", " default_popup ":" popup.html "},

Gördüğünüz gibi, kullanıcının uzantımıza tıkladığında göreceği tüm html'yi içerecek bir açılır pencere veya görünüm tanımlıyoruz. Ardından aşağıdaki kodu ekleyeceğiz:

 "content_scripts": [{"eşleşir": [""], "css": ["varlıklar / önyükleme / css / bootstrap.min.css"], "js": ["varlıklar / jquery.min.js", "main.js"], "run_at": "document_start"}]

içerik_komut dosyaları- Web sayfası bağlamında yürütülecek JavaScript (js) ve stil sayfası (css) dosyalarını içerir. Aşağıdaki özellikleri içerebilir:

maçlar: Zorunlu. Komut dosyasının hangi sayfaya enjekte edileceğine özel.

dışlama_eşleşmeleri: İsteğe bağlı. Komut dosyasının enjekte edilmemesi için hariç tutulacak sayfalar.

match_about_blank: İsteğe bağlı. Bu değer Boolean'dır ve betiğin boş sayfaya eklenip eklenmeyeceğini belirtir (about: blank ve about: srcdoc).

css: İsteğe bağlı. Tarayıcıda istenen sayfaya eklenecek css dosyalarının listesini belirten bir düzenlemedir.

js: İsteğe bağlı. Tarayıcıda istenen sayfaya eklenecek JavaScript dosyalarının listesini içeren bir düzenlemedir.

run_at: İsteğe bağlı. js dosyalarının ne zaman yükleneceğini kontrol eden bir metin dizesidir. Değeri şunlar olabilir:
belge_başlangıç: Dosyalar, herhangi bir css dosyasından sonra, ancak herhangi bir DOM oluşturulmadan veya başka bir komut dosyası yürütülmeden önce enjekte edilir.

belge_uç: Dosyalar, DOM tamamlandıktan hemen sonra, ancak resimler ve çerçeveler gibi kaynaklar yüklenmeden önce enjekte edilir.

belge_idle: Tarayıcı, komut dosyalarının enjekte edileceği zamanı Document_end arasında ve window.onload olayı tetikledikten hemen sonra seçer.Bu seçenek varsayılan olarak yapılandırılandır.

dosyamızın sonunda manifest.json Aşağıdaki gibi olmalıdır:

BÜYÜT

Gördüğünüz gibi, mülke birkaç yeni şey ekledik css Stil düzeyinde geliştirmeyi kolaylaştırmayacak Bootstrap çerçevesini tanımladık. Mülkte takip edildi js JavaScript ile ilgili her şeyi daha hızlı ve daha kolay bir şekilde çalışmamıza izin vermeyecek olan JQUERY JavaScript kitaplığını tanımlıyoruz. index.html dosyamız şöyle görünmelidir:

 Açılır ÇokluRenkkırmızıMaviYeşilSarı

index.html dosyasında Bootstrap, Jquery ve main.js dosyalarımıza referanslar yapıyoruz. Gövdede, farklı renk seçenekleri için düğme görevi görecek div'leri ile bir önyükleme kabı tanımlıyoruz.

main.js dosyası için, her "col-md-12" sınıfında fare düğmesine basıldığında yürütülecek olan click olayını kullanacağız, seçilen öğenin arka plan rengini alıp onu gövdeye atayacağız. sayfa açılmıştır. Ardından window.close() olayı yürütülür; uzantımızın penceresini kapatan. main.js için tanımlanan kod aşağıdaki gibidir:

 $ (belge) .ready (function () {$ (". col-md-12"). (function () {var color = $ (bu) .css ("arka plan rengi"); chrome.tabs öğesini tıklayın. executeScript (null, {kod: "$ ('gövde'). css ('arka plan rengi', '" + renk + "')"}); window.close ();});});

Uzantımızı çalıştırırken sonuç, onun için oluşturduğumuz simgeyi üst çubukta görselleştirebileceğiz.

Uzantımıza tıklamak aşağıdaki açılır pencereyi gösterecektir:

Ve seçeneklerden birini seçtiğinizde sonuç şu olacaktır:

BÜYÜT

Uygulama 3 - En İyi Tarih
Bu örnekte, yukarıda görülen her şeyi uygulayacağız, üzerine tıkladığımızda, bize tarayıcımızdan en çok ziyaret edilen sayfaların listesini içeren bir açılır pencere gösterecek ve bu sayfalara doğrudan erişim sağlayan bir uzantı oluşturacağız. Bu örnekteki tek farklı şey, Chrome'dan en çok görüntülenen sayfalara erişmek için Chrome API'lerinden birinden izin isteyeceğimizdir. Bu api'nin adı chrome.topSiteler.

Başlamak için gidiyoruz Chrome Geliştirici Düzenleyicisi adı ile projemizi oluşturduk. ÜstTarih ve proje türünde JavaScript Chrome Uygulaması seçeneğini seçiyoruz.

Daha sonra dosyamız manifest.json Aşağıdaki gibi olmalıdır:

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Tarayıcımızda en çok görüntülenen sayfaların listesini göster", "sürüm": "0.0.1", " minimum_chrome_version ":" 38 "," izinler ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" ": [" "]," css ": [" varlıklar / önyükleme / css / bootstrap.min.css "]," js ": [" varlıklar / jquery.min.js "," main.js "] ile eşleşir, "run_at": "document_start"}]}

Gördüğünüz gibi, Chrome API'sinde izin alabilmek için manifest'e yeni bir özellik ekledik: İzinleri Bildirin, uzantınızdaki Chrome API'lerinin çoğunda kullanılıyor, önce alanı yerleştirerek bildirmelisiniz. izinler tezahürünüzde. Her izin, aşağıdaki listeye ait bir metin dizisi olabilir (3 resme bölünmüş):

dosyamızla ilgili popup.html Aşağıdaki gibi olmalıdır:

 Açılır ÇokluRenk

Arşivimiz ana.js api sorgusunu ve click olayının işlenmesini içerecek, aşağıdaki gibi temsil edilecektir:

 $ (belge) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (bu) .attr ("href")});} function buildPopupDom (mostVisitedURLs) {for (var i) = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list").
'+ mostVisitedURLs [i] .title +'
'); } $ (". bağlantılar").bind ("tıkla", sayfa aç); } chrome.topSites.get (buildPopupDom); });

Yapısal düzeyde, projemiz aşağıdaki gibi olmalıydı:

Uzantımızı çalıştırırken, tarayıcının üst kısmında, benim durumumda onu mavi olarak tasarlayan bir simge görebileceğiz, üzerine tıkladığımızda, en çok eriştiğim sayfaların listesini içeren bir açılır pencere açar. yaptığım ziyaret sayısına göre sıralanmış tarayıcı.

BÜYÜT

Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.