google-chrome-extension
Inhaltsskripte

Bemerkungen

Inhaltsskripte im Manifest deklarieren

Inhaltsskripts können in manifest.json so deklariert werden, dass sie immer in Seiten eingefügt werden, die einem Satz von URL-Mustern entsprechen .

Minimales Beispiel

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

Dieser Manifesteintrag weist Chrome an, ein Inhaltsskript content.js zusammen mit der CSS-Datei content.css nach einer beliebigen Navigation zu einer Seite einzufügen, die dem Übereinstimmungsmuster entspricht. http://example.com/*

js und css Schlüssel sind optional: Je nach Bedarf können Sie nur einen oder beide Schlüssel verwenden.

content_scripts Schlüssel ist ein Array, und Sie können mehrere Inhaltsskriptdefinitionen deklarieren:

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

Beachten Sie, dass sowohl js als auch matches Arrays sind, auch wenn Sie nur einen Eintrag haben.

Weitere Optionen finden Sie in der offiziellen Dokumentation und in anderen Beispielen.

Wichtige Notiz

In dem Manifest deklarierte Inhaltsskripts werden nur nach dem Laden der Erweiterung in neue Navigationen eingefügt . Sie werden nicht in vorhandene Registerkarten eingefügt. Dies gilt auch für Erweiterungsladevorgänge während der Entwicklung und Erweiterungsaktualisierungen nach der Veröffentlichung.

Wenn Sie sicherstellen müssen, dass die aktuell geöffneten Registerkarten abgedeckt sind, sollten Sie auch die programmgesteuerte Injektion beim Start durchführen.

Einfügen von Inhaltsskripts von einer Erweiterungsseite

Wenn Sie nicht immer ein Inhaltsskript basierend auf der URL injizieren möchten, sondern direkt steuern möchten, wann ein Inhaltsskript injiziert wird, können Sie Programmatic Injection verwenden .

Minimales Beispiel

• JavaScript

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

• CSS

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

Wird von einer Erweiterungsseite (z. B. Hintergrund oder Popup) aufgerufen, und sofern Sie die Berechtigung zum Einfügen haben, wird content.js oder content.css als Inhaltsskript im oberen Frame der aktuellen Registerkarte eingefügt.

Inline-Code

Sie können Inline-Code anstelle einer Datei als Inhaltsskript ausführen:

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

Auswahl der Registerkarte

Sie können eine Registerkarten-ID (normalerweise von anderen chrome.tabs Methoden oder Messaging) chrome.tabs , um sie auf einer anderen Registerkarte als der aktuell aktiven auszuführen.

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

Weitere Optionen finden Sie in der Dokumentation zu chrome.tabs.executeScript() und in anderen Beispielen.

Berechtigungen

Mit chrome.tabs.executeScript() erfordert keine "tabs" die Erlaubnis, sondern erfordert Host - Berechtigungen für die URL der Seite.

Auf Fehler prüfen

Wenn die Skriptinjektion fehlschlägt, kann man dies im optionalen Callback abfangen:

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

Mehrere Inhaltsskripts im Manifest

Gleiche Bedingungen, mehrere Skripte

Wenn Sie mehrere Dateien mit allen anderen Bedingungen "js" , z. B. um eine Bibliothek aufzunehmen, können Sie sie alle im "js" :

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

Reihenfolge ist wichtig: library.js wird vor content.js .

Gleiche Skripte, mehrere Sites

Wenn Sie dieselben Dateien in mehrere Standorte einfügen müssen, können Sie mehrere Übereinstimmungsmuster angeben:

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

Wenn Sie im Wesentlichen in jede Seite injizieren müssen, können Sie weitgehend übereinstimmende Muster verwenden, z. B. "*://*/*" (entspricht jeder HTTP (S) -Seite) oder "<all_urls>" (entspricht jeder unterstützten Seite ).

Verschiedene Skripte oder Websites

"content_scripts" Abschnitt "content_scripts" ist ebenfalls ein Array, sodass Sie mehrere Inhaltsskriptblöcke definieren können:

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