web-dev-qa-db-fra.com

Google Chrome Extension - Injections de script

J'essaie d'obtenir que mon extension Chrome injecte du code JavaScript avec content_scripts, en utilisant ce précédent answer comme référence. 

manifest.json

"name": "My Chrome Extension",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [{
    "matches": ["http://pagetoinject/script/into/*"],
    "js": ["contentscript.js"]
}]

contenscript.js:

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
(document.head||document.documentElement).appendChild(s);
s.parentNode.removeChild(s);

(a également essayé this méthode sans succès.)}

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

Je continue à obtenir cette erreur javascript. Voici un capture d'écran .

enter image description hereGET chrome-extension://invalid/ (anonymous function)

javascriptjquerygoogle-chrome-extension
38
Nick Fury
  1. "manifest_version": 2 est spécifié. Cela active automatiquement un mode plus strict, dans lequel tous les fichiers d'extension ne sont pas disponibles par défaut pour les pages Web.
  2. Votre code d'origine ne fonctionnerait jamais, car l'élément <script> est immédiatement supprimé après l'injection (le fichier de script n'a pas la chance d'être chargé).

À la suite de 1., l'erreur suivante apparaît dans la console:

Failed to load resource                             chrome-extension://invalid/

Pour résoudre le problème, ajoutez script.js à la liste blanche, "web_accessible_resources" dans votre manifest file:

{
 "nom": "Extension Chrome", 
 "version": "1.0", 
 "manifeste_version": 2, 
 "content_scripts": [{
 "correspond": ["http: // pagetoinject/script/dans/*"], 
 "js": ["contentscript.js"] 
 }], 
 "ressources_accessibles_Web": ["script.js"]
}
86
Rob W

En plus des réponses ci-dessus, je remarque que, dans votre contentscript.js, vous ajoutez simplement un autre script. I.e script.js Pourquoi ne pas directement ajouter script.js à travers content_scripts dans manifest.json.

1
Abhishek Deora

Une autre raison pour obtenir cette erreur est si l'URL est bloquée par CORS. Vérifiez l'en-tête de requête réseau de la page pour voir si elle contient Content-Security-Policy:

Content-Security-Policy: default-src 'self' http://example.com; connect-src http://example.com/; script-src http://example.com/

Vous pouvez essayer d'ouvrir l'URL dans un nouvel onglet de navigateur pour vérifier que l'URL de l'image est correcte:

chrome-extension://mjcbjlencnokpknflpneebajalcnnifo/images/pattern.jpg

Une solution consiste à utiliser un URI de données d'image:

data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7
0
Kim T