google-chrome-extension
Inhoudsscripts

Opmerkingen

Inhoudsscripts declareren in het manifest

Inhoudsscripts kunnen in manifest.json worden gedeclareerd om altijd te worden geïnjecteerd in pagina's die overeenkomen met een set URL-patronen .

Minimaal voorbeeld

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

Dit manifest-item geeft Chrome opdracht om een content-script content.js , samen met het CSS-bestand content.css , te injecteren na elke navigatie naar een pagina die overeenkomt met het matchpatroon http://example.com/*

Zowel js als css toetsen zijn optioneel: je kunt er slechts één of beide hebben, afhankelijk van wat je nodig hebt.

content_scripts key is een array en u kunt verschillende definities van content scripts declareren:

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

Merk op dat zowel js als matches arrays zijn, zelfs als u slechts één invoer hebt.

Meer opties zijn beschikbaar in de officiële documentatie en andere voorbeelden.

Belangrijke notitie

Inhoudsscripts die in het manifest zijn gedeclareerd, worden alleen geïnjecteerd in nieuwe navigaties na het laden van de extensie . Ze worden niet in bestaande tabbladen geïnjecteerd. Dit geldt ook voor het opnieuw laden van extensies tijdens het ontwikkelen, en extensie-updates na release.

Als u ervoor wilt zorgen dat de geopende tabbladen worden afgedekt, kunt u overwegen om ook bij het opstarten een programmatische injectie te doen.

Inhoudsscripts injecteren vanaf een extensiepagina

Als u, in plaats van altijd een inhoudsscript te laten injecteren op basis van de URL, direct wilt bepalen wanneer een inhoudsscript wordt geïnjecteerd, kunt u Programmatic Injection gebruiken .

Minimaal voorbeeld

• JavaScript

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

• CSS

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

Opgeroepen vanaf een extensiepagina (bijv. Achtergrond of pop-up), en ervan uitgaande dat u toestemming hebt om te injecteren, zal dit content.js uitvoeren of content.css invoegen als een content-script in het bovenste frame van het huidige tabblad.

Inline code

U kunt inline code in plaats van een bestand als inhoudsscript uitvoeren:

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

Het tabblad kiezen

U kunt een tabblad-ID chrome.tabs (meestal van andere chrome.tabs methoden of berichten) om uit te voeren op een ander tabblad dan het momenteel actieve.

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

Meer opties zijn beschikbaar in de documentatie chrome.tabs.executeScript() en in andere voorbeelden.

Rechten

Met behulp van chrome.tabs.executeScript() niet nodig "tabs" toestemming, maar vereist gastheer toestemmingen voor de URL van de pagina's.

Controleren op fouten

Als scriptinjectie mislukt, kan dit worden opgevangen in de optionele callback:

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

Meerdere inhoudsscripts in het manifest

Dezelfde voorwaarden, meerdere scripts

Als u meerdere bestanden moet injecteren met alle andere voorwaarden hetzelfde, bijvoorbeeld om een bibliotheek op te nemen, kunt u ze allemaal in de "js" -reeks vermelden:

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

Bestelling is belangrijk: library.js wordt uitgevoerd vóór content.js .

Dezelfde scripts, meerdere sites

Als u dezelfde bestanden op meerdere sites moet injecteren, kunt u meerdere matchpatronen opgeven:

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

Als u in principe elke pagina moet "<all_urls>" , kunt u brede matchpatronen gebruiken zoals "*://*/*" (komt overeen met elke HTTP (S) -pagina) of "<all_urls>" (komt overeen met elke ondersteunde pagina ).

Verschillende scripts of verschillende sites

"content_scripts" sectie "content_scripts" is ook een array, dus je kunt meer dan één content-scriptblok definiëren:

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