google-chrome-extension
Skrypty treści

Uwagi

Deklarowanie skryptów treści w manifeście

Skrypty treści można zadeklarować w pliku manifest.json aby zawsze były wstrzykiwane na strony pasujące do zestawu wzorców adresów URL .

Minimalny przykład

"content_scripts" : [
  {
    "js": ["content.js"],
    "css": ["content.css"]
    "matches": ["http://example.com/*"]
  }
]

Ten wpis manifestu instruuje Chrome, aby wstrzyknął skrypt treści content.js wraz z plikiem CSS content.css po każdej nawigacji na stronie pasującej do wzorca dopasowania http://example.com/*

Zarówno klucze js jak i css są opcjonalne: możesz mieć tylko jeden z nich lub oba w zależności od potrzeb.

Klucz content_scripts to tablica, w której można zadeklarować kilka definicji skryptów treści:

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]

Zauważ, że zarówno js jak i matches są tablicami, nawet jeśli masz tylko jeden wpis.

Więcej opcji jest dostępnych w oficjalnej dokumentacji i innych przykładach.

Ważna uwaga

Skrypty treści zadeklarowane w manifeście będą wstrzykiwane tylko w nowych nawigacjach po załadowaniu rozszerzenia . Nie będą wstrzykiwane do istniejących zakładek. Dotyczy to również przeładowań rozszerzeń podczas opracowywania i aktualizacji rozszerzeń po wydaniu.

Jeśli chcesz się upewnić, że aktualnie otwarte karty są objęte zakresem, rozważ również wykonanie automatycznego wstrzykiwania podczas uruchamiania.

Wstrzykiwanie skryptów treści ze strony rozszerzenia

Jeśli zamiast zawsze wstrzykiwać skrypt treści na podstawie adresu URL, chcesz bezpośrednio kontrolować, kiedy skrypt jest wstrzykiwany, możesz użyć Wstrzykiwania programowego .

Minimalny przykład

• JavaScript

  chrome.tabs.executeScript({file: "content.js"});
  

• CSS

  chrome.tabs.insertCSS({file: "content.css"});
  

Wywoływany ze strony rozszerzenia (np. Tła lub wyskakującego okienka) i przy założeniu, że masz uprawnienia do wstrzykiwania, spowoduje to uruchomienie content.js lub wstawienie content.css jako skryptu zawartości w górnej ramce bieżącej karty.

Kod wewnętrzny

Jako skrypt treści możesz wykonać kod wbudowany zamiast pliku:

var code = "console.log('This code will execute as a content script');";
chrome.tabs.executeScript({code: code});

Wybieranie karty

Możesz podać identyfikator karty (zwykle z innych metod chrome.tabs lub wiadomości), aby wykonać ją na karcie innej niż aktualnie aktywna.

chrome.tabs.executeScript({
  tabId: tabId,
  file: "content.js"
});

Więcej opcji jest dostępnych w dokumentacji chrome.tabs.executeScript() i innych przykładach.

Uprawnienia

Korzystanie z chrome.tabs.executeScript() nie wymaga uprawnień "tabs" , ale wymaga uprawnień hosta dla adresu URL strony.

Sprawdzanie błędów

Jeśli wstrzyknięcie skryptu nie powiedzie się, można go złapać w opcjonalnym wywołaniu zwrotnym:

chrome.tabs.executeScript({file: "content.js"}, function() {
  if(chrome.runtime.lastError) {
    console.error("Script injection failed: " + chrome.runtime.lastError.message);
  }
});

Wiele skryptów treści w manifeście

Te same warunki, wiele skryptów

Jeśli chcesz wstrzyknąć wiele plików, a wszystkie pozostałe warunki są takie same, na przykład aby dołączyć bibliotekę, możesz wyświetlić wszystkie z nich w tablicy "js" :

"content_scripts" : [
  {
    "js": ["library.js", "content.js"],
    "matches": ["http://*.example.com/*"]
  }
]

Kolejność ma znaczenie: library.js zostanie wykonana przed content.js .

Te same skrypty, wiele witryn

Jeśli musisz wstrzyknąć te same pliki do wielu witryn, możesz podać wiele wzorców dopasowania:

"matches": ["http://example.com/*", "http://example.org/*"]

Jeśli potrzebujesz wprowadzić praktycznie każdą stronę, możesz użyć wzorców dopasowania przybliżonego, takich jak "*://*/*" (pasuje do każdej strony HTTP (S)) lub "<all_urls>" (pasuje do każdej obsługiwanej strony ).

Różne skrypty lub różne witryny

Sekcja "content_scripts" jest również tablicą, więc można zdefiniować więcej niż jeden blok skryptu treści:

"content_scripts" : [
  {
    "js": ["content.js"],
    "matches": ["http://*.example.com/*"]
  },
  {
    "js": ["something_else.js"],
    "matches": ["http://*.example.org/*"]
  }
]