Google Chrome-Erweiterung – Skript-Injektionen

Ich versuche, meine Chrome-Erweiterung dazu zu bringen, JavaScript einzufügen content_scriptsmit diesem vorherigen Antworten Als Referenz.

manifest.json

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

Inhaltsskript.js:

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

(auch probiert Dies Methode ohne Erfolg. )

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);

Ich bekomme immer diesen Javascript-Fehler. Hier ist ein Bildschirmfoto.

GET chrome-extension://invalid/
(anonymous function)

1. In Ihrer Manifestdatei "manifest_version": 2 angegeben. Dadurch wird automatisch ein strengerer Modus aktiviert, in dem standardmäßig nicht alle Dateien der Erweiterung für Webseiten verfügbar sind.
2. Ihr ursprünglicher Code würde niemals funktionieren, weil die <script> -Element wird sofort nach der Injektion entfernt (die Skriptdatei kann nicht geladen werden).

Als Ergebnis von 1. erscheint der folgende Fehler in der Konsole:

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

Um das Problem zu beheben, fügen Sie hinzu script.js auf die Whitelist, "web_accessible_resources" in deiner manifest file:

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

Zusätzlich zu den obigen Antworten merke ich das in Ihrer contentscript.js Sie fügen nur ein weiteres Skript hinzu, dh script.js Warum fügst du nicht direkt hinzu script.js durch content_scripts in manifest.json.

Ein weiterer Grund für diesen Fehler ist, wenn die URL von CORS blockiert wird. Überprüfen Sie den Netzwerkanforderungs-Header der Seite, um festzustellen, ob er Content-Security-Policy enthält:

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

Sie können versuchen, die URL in einem neuen Browser-Tab zu öffnen, um zu überprüfen, ob die Bild-URL korrekt ist:

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

Eine Möglichkeit, dies zu umgehen, besteht darin, einen Bilddaten-URI zu verwenden:

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

Boilerplate für Chrome-Erweiterung:

https://github.com/commanddotcom/boilerplate-chrome-extension-js-injection

Das Problem hier ist, dass Sie verwenden manifest_version : 2. Wenn du das schaffst manifest-version: 1 du wirst keine probleme haben. Version 2 schränkt viele dieser Funktionen ein, um die Sicherheit zu verbessern. Verweisen Inhaltssicherheitsrichtlinie von Google für weitere Details zu den Einschränkungen, die in Manifest-Version 2 auferlegt werden. Ich konnte Ihren speziellen Fall nicht finden, der im CSP erwähnt wurde, aber als ich die Manifest-Version auf 1 geändert und Ihren Code ausgeführt habe, funktioniert es einwandfrei.