Ich schreibe eine Chrome-Erweiterung. Und ich möchte jQuery
in meiner Erweiterung verwenden. Ich benutze keine Hintergrundseite , nur ein Hintergrundskript .
Hier sind meine Dateien:
manifest.json
{
"manifest_version": 2,
"name": "Extension name",
"description": "This extension does something,",
"version": "0.1",
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "images/icon_128.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": {
"16": "images/icon_16.png",
"48": "images/icon_48.png",
"128": "images/icon_128.png"
}
}
In meiner background.js
Datei wird nur eine andere Datei mit dem Namen ausgeführtwork.js
// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript({
file: 'work.js'
});
});
Die Hauptlogik meiner Erweiterung liegt im Inneren work.js
. Der Inhalt, von dem ich denke, dass er hier für diese Frage nicht wichtig ist.
Ich möchte fragen, wie ich jQuery in meiner Erweiterung verwenden kann. Da ich keine Hintergrundseite benutze. Ich kann nicht einfach jQuery hinzufügen. Wie kann ich jQuery zu meiner Erweiterung hinzufügen und verwenden?
Ich habe versucht, jQuery zusammen mit meiner work.js aus der background.js
Datei auszuführen .
// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript({
file: 'thirdParty/jquery-2.0.3.js'
});
chrome.tabs.executeScript({
file: 'work.js'
});
});
Und es funktioniert gut, aber ich habe Bedenken, ob die auf diese Weise hinzugefügten Skripte asynchron ausgeführt werden. Wenn ja, kann es vorkommen, dass work.js bereits vor jQuery (oder anderen Bibliotheken, die ich möglicherweise in Zukunft hinzufügen werde) ausgeführt wird.
Außerdem möchte ich wissen, wie Bibliotheken von Drittanbietern in meiner Chrome-Erweiterung richtig und am besten verwendet werden können.
Antworten:
Sie müssen Ihr jquery-Skript wie folgt zu Ihrem Chrome-Erweiterungsprojekt und zum
background
Abschnitt Ihrer manifest.json hinzufügen :Wenn Sie jquery in einem content_scripts benötigen, müssen Sie es auch im Manifest hinzufügen:
Das habe ich getan.
Wenn ich mich richtig erinnere, werden die Hintergrundskripte in einem Hintergrundfenster ausgeführt, über das Sie öffnen können
chrome://extensions
.quelle
You have to add your jquery script to your chrome-extension project
? Ich habe dies getan: manifest.json:"background": {
`" scripts ": [" ThirdParty / jquery-2.0.3.js "," background.js "],` `" persistent ": false``}, `und ich habe das heruntergeladen jQuery zum Ordner ThirdParty. Ich kann jQuery jedoch immer noch nicht verwenden. Es gibt den Fehler:Uncaught ReferenceError: $ is not defined
Ich habe dies zuwork.js
Testzwecken zu meiner Datei hinzugefügt .$("body").html("Foo!");
work.js
Datei auf jquery zugreifen kann.Uncaught ReferenceError: $ is not defined
. Wenn Sie können, können Sie bitte irgendwo ein funktionierendes Beispiel hochladen. Nur ein einfaches Beispiel wie '$ ("body"). Html ("Foo!");' in work.js.jQuery
oder$
erkannt zu werden. Es stellte sich heraus, dass ich zuletzt im Manifest-Array auf jQuery verwies. Als ich es zuerst stellte, wurde es erkannt.Es ist sehr einfach, einfach Folgendes zu tun:
Fügen Sie die folgende Zeile in Ihre manifest.json ein
Jetzt können Sie jQuery direkt von der URL laden
Quelle: Google Doc
quelle
subresource integrity
(SRI) gemildert werden .Das sollte eigentlich kein Problem sein: Sie stellen Skripte in die Warteschlange, die in einem bestimmten JS-Kontext ausgeführt werden sollen, und dieser Kontext kann keine Race-Bedingung haben, da er Single-Threaded ist.
Der richtige Weg, um dieses Problem zu beseitigen, besteht darin, die Anrufe zu verketten:
Oder verallgemeinert:
Oder versprochen (und mehr mit der richtigen Unterschrift in Einklang gebracht):
Oder warum zum Teufel nicht,
async
/await
-ed für noch klarere Syntax:Beachten Sie, dass Sie in Firefox nur verwenden können,
browser.tabs.executeScript
da es ein Versprechen zurückgibt.quelle
Neben den bereits erwähnten Lösungen können Sie diese auch
jquery.min.js
lokal herunterladen und dann verwenden -Zum Herunterladen -
manifest.json -
in html -
Referenz - https://developer.chrome.com/extensions/contentSecurityPolicy
quelle
In meinem Fall habe ich eine funktionierende Lösung durch Cross-Document Messaging (XDM) und Ausführen der Chrome-Erweiterung per Mausklick anstelle des Seitenladens erhalten.
manifest.json
background.js
myscript.js
quelle