Açıklama
Sayfanın içeriğini okuma izni gerekmeden, sayfanın içeriğine göre işlem yapmak için chrome.declarativeContent
API'sini kullanın.
İzinler
declarativeContent
Kavramlar ve kullanım
Declarative Content API, uzantınızın işlemini bir dokümanın URL'sine bağlı olarak etkinleştirmenizi sağlar. veya CSS seçici sayfadaki bir öğeyle eşleşirse, ana makine izinleri ekleyin veya içerik komut dosyası ekleyin.
Kullanıcı bu düğmeyi tıkladıktan sonra, bir sayfayla etkileşimde bulunmak için activeTab iznini kullanın her şeyi kapsayabilir.
Kurallar
Kurallar koşullar ve işlemlerden oluşur. Koşullardan herhangi biri karşılanırsa tüm işlemler
yürütüldü. İşlemler setIcon()
ve showAction()
olarak adlandırılmıştır.
PageStateMatcher
, yalnızca listelenen tüm web sayfalarıyla eşleşir
karşılandığını gösterir. Bir sayfa URL'si, yani css bileşik seçicisi ile eşleşebilir
ya da sayfanın yer işareti eklenmiş durumunu belirler. Aşağıdaki kural,
uzantının Google sayfalarında şifre alanı mevcut olduğunda gerçekleştirdiği işlem:
let rule1 = {
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostSuffix: '.google.com', schemes: ['https'] },
css: ["input[type='password']"]
})
],
actions: [ new chrome.declarativeContent.ShowAction() ]
};
Uzantının işlemini video içeren Google sitelerinde de etkinleştirmek için ikinci bir koşulunu belirtmeniz gerekir:
let rule2 = {
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostSuffix: '.google.com', schemes: ['https'] },
css: ["input[type='password']"]
}),
new chrome.declarativeContent.PageStateMatcher({
css: ["video"]
})
],
actions: [ new chrome.declarativeContent.ShowAction() ]
};
onPageChanged
etkinliği, herhangi bir kuralın en az bir koşulu karşılanıp karşılanmadığını test eder
koşulu gerçekleştirir ve eylemleri yürütür. Kurallar, tarama oturumlarında geçerliliğini korur; bu nedenle
uzantının yüklenme zamanına bakmak için removeRules
komutunu kullanmanız gerekir.
ve ardından yenilerini kaydetmek için addRules
aracını kullanın.
chrome.runtime.onInstalled.addListener(function(details) {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([rule2]);
});
});
activeTab izniyle uzantınız herhangi bir izin göstermez uyarıları verir ve kullanıcı uzantı işlemini tıkladığında, işlem yalnızca alakalı sayfalarda yayınlanır.
Sayfa URL'si eşleştirme
URL ölçütleri karşılandığında PageStateMatcher.pageurl
eşleşir. İlgili içeriği oluşturmak için kullanılan
en yaygın ölçütler; ana makine, yol veya URL'nin birleşiminden oluşur ve ardından İçerir, Eşittir, Önek veya
Son ek. Aşağıdaki tabloda birkaç örnek verilmiştir:
Ölçütler | Şununla eşleşiyor: |
---|---|
{ hostSuffix: 'google.com' } |
Tüm Google URL'leri |
{ pathPrefix: '/docs/extensions' } |
Uzantı belgelerinin URL'leri |
{ urlContains: 'developer.chrome.com' } |
Tüm Chrome geliştirici dokümanlarının URL'leri |
Tüm ölçütler büyük/küçük harfe duyarlıdır. Ölçütlerin tam listesi için UrlFilter bölümüne bakın.
CSS Eşleştirme
PageStateMatcher.css
koşulları birleşik seçiciler olmalıdır.
Diğer bir deyişle, boşluk veya ">
" gibi birleştiriciler ekleyemezsiniz
seçiciler. Bu, Chrome'un seçicileri daha verimli bir şekilde eşleştirmesine yardımcı olur.
Bileşik Seçiciler (Tamam) | Karmaşık Seçiciler (Uygun Değil) |
---|---|
a |
div p |
iframe.special[src^='http'] |
p>span.highlight |
ns|* |
p + ol |
#abcd:checked |
p::first-line |
CSS koşulları yalnızca görüntülenen öğelerle eşleşir: seçicinizle eşleşen bir öğe olursa
display:none
veya üst öğelerinden biri display:none
ise koşulun
eşleşmesini sağlar. Öğeler visibility:hidden
ile stilize edilmiş, ekran dışına yerleştirilmiş veya diğer öğeler tarafından gizlenmiş
koşulunuzla eşleşmeye devam edebilir.
Yer işareti durumu eşleştirme
PageStateMatcher.isBookmarked
koşulu,
kullanıcının profilindeki geçerli URL'nin yer işareti eklenmiş durumunu gösterir. Bu koşuldan yararlanmak için
"yer işaretleri" iznin, uzantı manifest'inde beyan edilmesi gerekir.
Türler
ImageDataType
https://developer.mozilla.org/en-US/docs/Web/API/ImageData adresini ziyaret edin.
Tür
ImageData
PageStateMatcher
Bir web sayfasının durumunu çeşitli ölçütlere dayalı olarak eşleştirir.
Özellikler
-
oluşturucu
geçersiz
constructor
işlevi aşağıdaki gibi görünür:(arg: PageStateMatcher) => {...}
-
bağ
-
returns
-
-
css
string[] isteğe bağlı
Dizideki tüm CSS seçiciler, sayfanın ana çerçevesiyle aynı kaynağa sahip bir çerçevede görüntülenen öğelerle eşleşirse eşleşir. Eşleştirmeyi hızlandırmak için bu dizideki tüm seçiciler bileşik seçici olmalıdır. Not: Sayfa başına yüzlerce kez eşleşen yüzlerce CSS seçicinin listelenmesi veya CSS seçicilerin listelenmesi web sitelerini yavaşlatabilir.
-
isBookmarked
boole isteğe bağlı
Chrome 45 ve sonraki sürümler 'nı inceleyin.Sayfanın yer işareti koyulan durumu belirtilen değere eşitse eşleşir. Yer işaretleri iznini gerektirir.
-
pageUrl
UrlFilter isteğe bağlı
Sayfanın üst düzey URL'si için
UrlFilter
koşulları karşılanırsa eşleşir.
RequestContentScript
İçerik komut dosyası yerleştiren bildirim temelli etkinlik işlemi.
UYARI: Bu işlem hâlâ deneyseldir ve Chrome'un kararlı sürümlerinde desteklenmez.
Özellikler
-
oluşturucu
geçersiz
constructor
işlevi aşağıdaki gibi görünür:(arg: RequestContentScript) => {...}
-
returns
-
-
allFrames
boole isteğe bağlı
İçerik komut dosyasının, eşleşen sayfanın tüm çerçevelerinde mi yoksa yalnızca üst çerçevede mi çalışacağı.
false
varsayılandır. -
css
string[] isteğe bağlı
İçerik komut dosyasının bir parçası olarak eklenecek CSS dosyalarının adları.
-
js
string[] isteğe bağlı
İçerik komut dosyasının bir parçası olarak eklenecek JavaScript dosyalarının adları.
-
matchAboutBlank
boole isteğe bağlı
İçerik komut dosyasının
about:blank
veabout:srcdoc
bölümlerine eklenip eklenmeyeceğini belirtir.false
varsayılandır.
SetIcon
İlgili koşullar karşılanırken uzantının sayfa işlemi veya tarayıcı işlemi için n-dip kare simgesini ayarlayan bildirim temelli etkinlik işlemi. Bu işlem, ana makine izinleri olmadan kullanılabilir ancak uzantıda bir sayfa veya tarayıcı işlemi olması gerekir.
Tam olarak bir imageData
veya path
belirtilmelidir. Her ikisi de çeşitli pikselleri bir resim temsiline eşleyen sözlüklerdir. imageData
'deki resmin temsili bir ImageData nesnesidir; örneğin, bir canvas
öğesinden, path
içindeki resim gösterimi ise uzantının manifest dosyasına göre bir resim dosyasının yoludur. scale
ekran pikseli cihazdan bağımsız bir piksele sığıyorsa scale * n
simgesi kullanılır. Bu ölçek eksikse başka bir resim, gerekli boyuta yeniden boyutlandırılır.
Özellikler
-
oluşturucu
geçersiz
constructor
işlevi aşağıdaki gibi görünür:(arg: SetIcon) => {...}
-
bağ
-
returns
-
-
resimVerisi
ImageData | nesne isteğe bağlı
Bir
ImageData
nesnesi veya sözlük {size -> ImageData} yer alır. Simge sözlük olarak belirtilirse kullanılan resim, ekranın piksel yoğunluğuna bağlı olarak seçilir. Bir ekran alanı birimine sığan resim pikseli sayısıscale
isescale * n
boyutunda bir resim seçilir. Burada n, kullanıcı arayüzündeki simgenin boyutudur. En az bir resim belirtilmelidir.details.imageData = foo
iledetails.imageData = {'16': foo}
eşdeğer olduğunu unutmayın.
ShowAction
Karşılık gelen koşullar karşılanırken uzantının araç çubuğu işlemini etkin bir duruma ayarlayan bildirim tabanlı etkinlik işlemi. Bu işlem, ana makine izinleri olmadan kullanılabilir. Uzantının activeTab izni varsa sayfa işlemini tıklamak etkin sekmeye erişim izni verir.
Koşulların karşılanmadığı sayfalarda, uzantının araç çubuğu işlemi gri tonlamalı olur ve bu işlem tıklandığında işlemi tetiklemek yerine içerik menüsü açılır.
Özellikler
-
oluşturucu
geçersiz
constructor
işlevi aşağıdaki gibi görünür:(arg: ShowAction) => {...}
-
bağ
-
returns
-
ShowPageAction
Lütfen declarativeContent.ShowAction
kullanın.
Karşılık gelen koşullar karşılanırken uzantının sayfa işlemini etkin duruma ayarlayan bildirim tabanlı bir etkinlik işlemi. Bu işlem, ana makine izinleri olmadan kullanılabilir ancak uzantıda bir sayfa işlemi olmalıdır. Uzantının activeTab izni varsa sayfa işlemini tıklamak etkin sekmeye erişim izni verir.
Koşulların karşılanmadığı sayfalarda, uzantının araç çubuğu işlemi gri tonlamalı olur ve bu işlem tıklandığında işlemi tetiklemek yerine içerik menüsü açılır.
Özellikler
-
oluşturucu
geçersiz
constructor
işlevi aşağıdaki gibi görünür:(arg: ShowPageAction) => {...}
-
bağ
-
returns
-
Etkinlikler
onPageChanged
addRules
, removeRules
ve getRules
'den oluşan Declarative Event API'yi sağlar.