google-chrome-extension
Scripts de contenu

Remarques

Déclaration de scripts de contenu dans le manifeste

Les scripts de contenu peuvent être déclarés dans manifest.json pour être toujours injectés dans des pages correspondant à un ensemble de modèles d'URL .

Exemple minimal

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

Cette entrée de manifeste demande à Chrome d'injecter un script de contenu content.js , ainsi que le fichier CSS content.css , après toute navigation vers une page correspondant au modèle de correspondance http://example.com/*

Les clés js et css sont facultatives: vous ne pouvez en avoir qu'une ou les deux en fonction de vos besoins.

content_scripts clé content_scripts est un tableau et vous pouvez déclarer plusieurs définitions de script de contenu:

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

Notez que js et les matches sont des tableaux, même si vous n’avez qu’une entrée.

Plus d'options sont disponibles dans la documentation officielle et d'autres exemples.

Note importante

Les scripts de contenu déclarés dans le manifeste ne seront injectés sur les nouvelles navigations qu'après le chargement de l'extension . Ils ne seront pas injectés dans les onglets existants. Cela s'applique également aux rechargements d'extension pendant le développement et aux mises à jour d'extension après la publication.

Si vous devez vous assurer que les onglets actuellement ouverts sont couverts, envisagez également d'injecter par programmation au démarrage.

Injection de scripts de contenu à partir d'une page d'extension

Si, au lieu d'avoir toujours un script de contenu injecté en fonction de l'URL, vous souhaitez contrôler directement l'injection d'un script de contenu, vous pouvez utiliser l' injection programmatique .

Exemple minimal

• JavaScript

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

• CSS

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

Appelé depuis une page d’extension (par exemple, arrière-plan ou popup), et en supposant que vous ayez la permission d’injecter, ceci exécutera content.js ou insérera content.css tant que script de contenu dans le cadre supérieur de l’onglet actuel.

Code en ligne

Vous pouvez exécuter du code en ligne au lieu d'un fichier en tant que script de contenu:

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

Choisir l'onglet

Vous pouvez fournir un ID de tabulation (généralement à partir d'autres méthodes chrome.tabs ou de messagerie) à exécuter dans un onglet autre que celui actuellement actif.

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

D'autres options sont disponibles dans la documentation chrome.tabs.executeScript() et dans d'autres exemples.

Autorisations

L'utilisation de chrome.tabs.executeScript() ne nécessite pas de permission "tabs" , mais nécessite des autorisations d'hôte pour l'URL de la page.

Vérification des erreurs

Si l'injection du script échoue, on peut l'attraper dans le rappel facultatif:

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

Plusieurs scripts de contenu dans le manifeste

Mêmes conditions, plusieurs scripts

Si vous devez injecter plusieurs fichiers avec toutes les autres conditions identiques, par exemple pour inclure une bibliothèque, vous pouvez tous les répertorier dans le tableau "js" :

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

L'ordre compte: library.js sera exécuté avant content.js .

Mêmes scripts, plusieurs sites

Si vous devez injecter les mêmes fichiers dans plusieurs sites, vous pouvez fournir plusieurs modèles de correspondance:

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

Si vous avez besoin d'injecter dans pratiquement chaque page, vous pouvez utiliser des modèles de correspondance larges tels que "*://*/*" (correspond à chaque page HTTP (S)) ou "<all_urls>" (correspond à chaque page prise en charge ).

Différents scripts ou différents sites

"content_scripts" est également un tableau, on peut donc définir plusieurs blocs de script de contenu:

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