Extension de chrome à l’aide de jquery dans le script de contenu: erreur de résolution lors de la création d’une fenêtre de dialog

Comme d’habitude, je ne fais pas vraiment JQuery … mais j’ai vu un problème évident avec votre code et j’ai donc essayé …

Débarrassez-vous de client.js, il n’est plus nécessaire après avoir ajouté les fichiers qu’il injecte à la partie script de contenu du manifeste. Après les avoir ajoutés au manifeste, Chrome les injectera maintenant pour vous. Une fois que vous faites cela, il commence à travailler à moitié.

Après cela, j’ai remarqué que la boîte de dialog est apparue sans aucun graphisme ni style. Vous devez donc append le fichier css à la partie script de contenu du manifeste pour pouvoir l’injecter. Maintenant, il y a du style, mais la console disait qu’elle ne pouvait pas obtenir les fichiers graphiques nécessaires au style.

Je ne sais pas quel est le meilleur moyen de référencer un fichier graphique qui est contenu dans le répertoire des extensions à partir d’un fichier css, alors je viens de transformer tous les graphiques en dataurl et de les mettre dans le fichier css. Vous pouvez utiliser un outil comme celui-ci …
http://dataurl.net/#dataurlmaker
… pour que cela soit fait.
Nous avons maintenant un beau dialog.

manifest.json

 { "name":"JQery UI Dialog", "description":"https://stackoverflow.com/questions/13669762/chrome-extention-using-jquery-in-content-script-resolve-error-when-creating-dial", "manifest_version":2, "version":"2", "content_scripts": [ { "matches": [""], "js": ["jquery-1.8.3.min.js","jquery-ui.js","client.js"], "run_at":"document_end", "all_frames": true, "css":["jquery-ui-base64.css"] } ], "web_accessible_resources": [ "client.js","jquery-1.8.3.min.js","jquery-ui.js" ], "permissions": [ "unlimitedStorage", "http://*/", "", "tabs" ] } 

jquery-ui-base64.css
https://gist.github.com/4193693
Je pensais que ce serait un peu trop gros pour être mis ici.

client.js

 try { console.log("Starting to create tabel"); var layerNode = document.createElement('div'); layerNode.setAtsortingbute('id', 'dialog'); layerNode.setAtsortingbute('title', 'Basic dialog'); var pNode = document.createElement('p'); pNode.innerHTML = "This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon."; layerNode.appendChild(pNode); document.body.appendChild(layerNode); jq162 = jQuery.noConflict(true); (function($) { $(document).ready(function() { $("#dialog").dialog(); }); })(jq162); } catch(e) { console.log("script in page exception in appendChild" + e); //alert(e); } 

MODIFIER
En utilisant le support chromes i18n, nous pouvons modifier les URL des images dans le fichier css afin qu’elles pointent vers les fichiers de notre extension.
https://stackoverflow.com/a/8864212/189093
Donc ça…
url(images/ui-bg_flat_0_aaaaaa_40x100.png)
…devient…
url(chrome-extension://__MSG_@@extension_id__/images/ui-bg_flat_0_aaaaaa_40x100.png)
et le chemin n’est plus relatif et le __MSG_@@extension_id__ est remplacé par l’id de votre extension.
De plus, toutes les images utilisées de cette façon doivent être déclarées dans la partie web_accessible_resources de votre mainfest.
Ainsi, cette partie de votre manifeste finit par ressembler à ceci (remarque: j’ai pris les trois que vous aviez là-bas, elles n’ont plus besoin d’être incluses car elles sont injectées par l’extension maintenant) …

 "web_accessible_resources": [ "images/ui-bg_flat_75_ffffff_40x100.png","images/ui-icons_222222_256x240.png","images/ui-bg_highlight-soft_75_cccccc_1x100.png" ] 

..J’ai seulement inclus les fichiers dont j’avais besoin pour que mon test fonctionne, vous devrez peut-être en append d’autres. Vérifiez la console sur la page où le script est en cours d’exécution pour savoir quels fichiers vous devez append.
Voici un lien vers le même fichier css utilisé dans mon test avec les URL mises à jour pour fonctionner de cette façon …
https://gist.github.com/4195616

Lorsque vous appelez jQuery.noConflict variable $ ne sera pas définie.

Mais dans script.js vous appelez $(document) juste après noConflict . Je pense que vous avez oublié une ligne (function($ après avoir appelé noConflict .

Vous devez changer votre code pour quelque chose comme ceci:

 jq162 = jQuery.noConflict(true); (function($){ $(document).ready(function() { $("#dialog" ).dialog(); }); })(jq162);