Açıklama
Sayfanın içeriğini okuma izni gerektirmeden, 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, bir web sayfasının URL'sine bağlı olarak veya bir CSS seçici sayfadaki bir öğeyle eşleştiğinde ana makine izinleri ya da içerik komut dosyası eklemeye gerek kalmadan uzantınızın işlemini etkinleştirmenize olanak tanır.
Kullanıcı, uzantının işlemini tıkladıktan sonra sayfayla etkileşimde bulunmak için activeTab iznini kullanın.
Kurallar
Kurallar koşullar ve işlemlerden oluşur. Koşullardan biri yerine getirilirse tüm işlemler yürütülür. İşlemler: setIcon()
ve showAction()
.
PageStateMatcher
, yalnızca listelenen tüm ölçütler karşılanırsa web sayfalarıyla eşleşir. Bir sayfa URL'si, css bileşik seçici veya sayfanın yer işareti eklenmiş durumu ile eşleşebilir. Aşağıdaki kural, bir şifre alanı olduğunda uzantının Google sayfalarında işlem yapmasını etkinleştirir:
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 video içeren Google sitelerinde de işlemi etkinleştirmek için ikinci bir koşul ekleyebilirsiniz. Her koşul, belirtilen tüm işlemleri tetiklemek için yeterlidir:
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 yerine getirilmiş koşulu olup olmadığını test eder ve işlemleri yürütür. Kurallar, göz atma oturumları genelinde geçerliliğini korur. Bu nedenle, uzantı yükleme süresi boyunca önceden yüklenmiş kuralları temizlemek için önce removeRules
, ardından yenilerini kaydetmek için addRules
kullanmanız gerekir.
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 uyarısı görüntülemez ve kullanıcı uzantı işlemini tıkladığında yalnızca alakalı sayfalarda çalışır.
Sayfa URL'si eşleşmesi
URL ölçütleri karşılandığında PageStateMatcher.pageurl
eşleşir. En yaygın ölçütler, ana makine, yol veya URL'nin birleştirilmesi ve ardından İçerir, Eşittir, Önek veya Sonek seçeneklerinin eklenmesidir. 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ı dokümanları URL'leri |
{ urlContains: 'developer.chrome.com' } |
Tüm Chrome geliştiricileri 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 konusuna bakın.
CSS Eşleştirme
PageStateMatcher.css
koşullarının bileşik seçici olması gerekir. Yani seçicilerinize boşluk veya ">
" gibi birleştiriciler ekleyemezsiniz. 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 display:none
veya üst öğelerinden biri display:none
ise koşulun eşleşmesine neden olmaz. Stili visibility:hidden
ile belirlenmiş, ekran dışında konumlandırılmış veya başka öğeler tarafından gizlenmiş öğeler, koşulunuzu yine de eşleştirebilir.
Yer işareti koyma durumu eşleşmesi
PageStateMatcher.isBookmarked
koşulu, kullanıcının profilindeki mevcut URL'nin yer işareti koyulma durumunun eşleştirilmesini sağlar. Bu koşuldan yararlanmak için "yer işaretleri" izninin uzantı manifest öğesinde beyan edilmesi gerekir.
Türler
ImageDataType
https://developer.mozilla.org/en-US/docs/Web/API/ImageData adresine bakın.
Tür
ImageData
PageStateMatcher
Bir web sayfasının durumunu çeşitli ölçütlere göre eşleştirir.
Özellikler
-
oluşturucu
void
constructor
işlevi şu şekilde 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 birleşik seçici olmalıdır. Not: Yüzlerce CSS seçicinin veya sayfa başına yüzlerce kez eşleşen CSS seçicilerin listelenmesi web sitelerini yavaşlatabilir.
-
isBookmarked
boole isteğe bağlı
Chrome 45 ve sonraki sürümlerSayfanın yer işareti koyulan durumu belirtilen değere eşitse eşleşir. Yer işareti izni 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 desteklenmemektedir.
Özellikler
-
oluşturucu
void
constructor
işlevi şu şekilde 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 karelerinde 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
üzerine eklenip eklenmeyeceğini belirtir.false
varsayılandır.
SetIcon
Karşılık gelen koşullar karşılandığında 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 olmalıdır.
Tam olarak imageData
veya path
belirtilmelidir. Her ikisi de bir resim gösterimine birkaç pikseli eşleyen sözlüklerdir. imageData
öğesindeki resim gösterimi bir ImageData nesnesidir. Örneğin, bir canvas
öğesinden alınan resim, path
öğesindeki resim, uzantının manifest'ine 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 uyacak şekilde yeniden boyutlandırılır.
Özellikler
-
oluşturucu
void
constructor
işlevi şu şekilde görünür:(arg: SetIcon) => {...}
-
bağ
-
returns
-
-
imageData
ImageData | nesne isteğe bağlı
Ayarlanacak simgeyi temsil eden bir
ImageData
nesnesi veya sözlük {size -> ImageData}. Simge sözlük olarak belirtilmişse kullanılan resim, ekranın piksel yoğunluğuna bağlı olarak seçilir. Bir ekran alanı birimine sığan resim piksellerinin sayısıscale
değerine eşitsescale * n
boyutunda bir resim seçilir. Burada n, kullanıcı arayüzündeki simgenin boyutudur. En az bir resim belirtilmelidir.details.imageData = foo
değerinindetails.imageData = {'16': foo}
ile eşdeğer olduğunu unutmayın.
ShowAction
İlgili koşullar karşılandığında uzantının araç çubuğu işlemini etkin duruma ayarlayan bir bildirim temelli 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 tıklandığında işlem tetiklenmek yerine içerik menüsü açılır.
Özellikler
-
oluşturucu
void
constructor
işlevi şu şekilde görünür:(arg: ShowAction) => {...}
-
bağ
-
returns
-
ShowPageAction
Lütfen declarativeContent.ShowAction
hesabını kullanın.
İlgili koşullar karşılandığında uzantının sayfa işlemini etkin duruma ayarlayan bir bildirim temelli etkinlik işlemidir. 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 tıklandığında işlem tetiklenmek yerine içerik menüsü açılır.
Özellikler
-
oluşturucu
void
constructor
işlevi şu şekilde görünür:(arg: ShowPageAction) => {...}
-
bağ
-
returns
-
Etkinlikler
onPageChanged
addRules
, removeRules
ve getRules
öğelerinden oluşan Declarative Event API'yi sağlar.