web-dev-qa-db-de.com

Chrome-Erweiterung "Das Skript wurde nicht geladen, weil es gegen die folgende Richtlinie zur Richtlinie zur Inhaltssicherheit verstößt"

Ich versuche, eine Chrome-Erweiterung zu erstellen, aber meine JS funktioniert nicht. Die Konsole zeigt diesen Fehler:

Das Skript wurde nicht geladen ' https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js ' weil es gegen die folgende Richtlinie zur Richtlinie zur Inhaltssicherheit verstößt: "script-src 'self' blob: Dateisystem: chrome-extension-resource:".

Warum wird meine jQuery nicht ausgeführt?

javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension
18
Mia

Haben Sie es in Ihrer Manifest-JSON-Datei zugelassen? Etwas wie das:

manifest.json

 {
   "name": "My Extension",
   "content_scripts": [{
     "js": ["jquery.min.js", "YourJavaScriptFile.js"],
     "matches": ["http://*/*", "https://*/*"]
   }]
 }

Es gibt Pflichtfelder, die ich ausgelassen habe, aber nur die Grundidee angeben.

11
epascarello

Wie auf der Chome Website , Erläutert, gibt es eine Inhaltssicherheitsrichtlinie, die verhindert, dass das Skript ein Remote - Skript lädt:

Eine entspannte Richtliniendefinition, die das Laden von Skriptressourcen von example.com über HTTPS ermöglicht, könnte folgendermaßen aussehen:

"content_security_policy": "script-src 'self' https://example.com ; object-src 'self'"

In Ihrem Fall sollte der manifest.json enthalten:

 {
  "name": "My Extension",
  "manifest_version": 2,
  "background":{
     "scripts": [...]
  },
  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
 }
8
Charles Gueunet

nun, Sie können CDN nicht für js verwenden, Sie müssen den Inhalt von " https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js " und kopieren Erstellen Sie eine neue Datei in Ihrem js-Verzeichnis, nennen Sie sie jquery.min.js und fügen Sie alles darin ein. Entfernen Sie dann in Ihrem HTML-Dateiheader die Zeile mit dieser URL und verwenden Sie stattdessen diese 

<script src="js/jquery.min.js"></script>

stellen Sie jedoch sicher, dass dies der Schreibpfad für die Datei ist, die alle Daten in der genannten URL enthält 

prost,

2
Kareem Essawy

Content Security Policy ist eine weitere Sicherheitsebene für Ihre Anwendung. Hier können Sie alle Ursprünge definieren, von denen Sie Stile, Skripts oder Daten laden. Für jeden Stil, Skript, Schriftart oder Verbindung müssen Sie die Domänen angeben, die Sie in Ihre Anwendung laden. Wenn Sie eine CDN-jQuery einer anderen Domäne verwenden, müssen Sie diese Domäne in der Inhaltssicherheitsrichtlinie angeben. 

Wenn Sie diese zusätzliche Sicherheitsebene nicht möchten und Stile oder Skripts von einer beliebigen Domäne laden möchten, fügen Sie einfach das folgende Meta-Tag in Ihre index.html ein und stellen Sie sicher, dass sich dieses vor jedem Import befindet. 

<meta http-equiv="Content-Security-Policy" content="default-src *;">

hier ist * das Platzhalterzeichen, mit dem Sie auf jede Domäne zugreifen können. Wenn Sie diese zusätzliche Sicherheitsebene wünschen, sollten Sie zur Dokumentation documentation gehen, in der Sie alle Domänen angeben können, die Sie in Ihre Anwendung importieren möchten

1
Shiva Sairam M

Ich werde Ihnen eine lange Geschichte kurz erzählen. Google Chrome hat CSP (Content Security Policy), was bedeutet, dass chrome Erweiterungen das externe Skript nicht zulassen. Wenn ja Verwendung der vue cdn dann führen Sie einfach die folgenden Schritte aus und Sie können loslegen.

  • Fügen Sie folgenden Code in Ihre manifest.json ein und ändern Sie Ihre Dateinamen nach Bedarf. Hier 'unsafe-eval' ist das, wonach Sie suchen, fügen Sie einfach Folgendes hinzu.
{
    "manifest_version": 2,
    "name"            : "Hello Extension",
    "version"         : "1.0",
    "permissions": [
        "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
    ],
    "background": {
        "scripts": ["popup.js"],
        "persistent": false
      },
    "description"     : "Testing the hello world extension",
    "icons": {
        "16"    : "icons16.png",
        "48"    : "icons16.png",
        "128"   : "icons16.png"
    },
    "browser_action": {
        "default_icon"   : "icons16.png",
        "default_popup" : "popup.html"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self'"
}
  • In deinem external js here popup.js füge den Vue Code hinzu und alles wird großartig funktionieren.
var app = new Vue({
    el: "#app",
    data: {
        name: ""
    }
});
0
Shahrukh Anwar

Gemäß der Chrome Extension-Dokumentation müssen Sie eine Kopie der externen Ressource in Ihren Paketordner herunterladen und das Skript lokal laden.

Das Laden externer Skripte ist nicht erlaubt.

0
Jared Cordova

Meine HTML-Datei hatte <script> some js code within it </script>. Beim Entfernen der Skript-Tags war der Fehler weg.

0
Deke