2011-07-10 3 views
5

Dans le fichier manifest.json, je déclare que je veux injecter des scripts, comme ceci:Dans l'extension Chrome, les scripts de contenu ne peuvent pas affecter à l'intérieur de l'iframe?

{ 
    "name": "my extension", 

    "version": "1.0", 

    "background_page": "background.html", 

    "permissions": ["contextMenus", "tabs", "http://*.example.com/*"], 

    "content_scripts": [ 
     { 
      "matches": 
       [ 
       "http://*.taobao.com/*", 
       "http://*.yintai.com/*" 
       ], 
      "run_at": "document_idle", 
      "js": ["jquery-1.5.1.min.js","jquery-ui-1.8.13.custom.min.js", "contentscript.js"], 
      "all_frames": true 
     } 
    ] 
} 

Dans le script de contenu, je crée une iframe, entre autres. Cela fonctionne bien jusqu'à présent. Comme ceci:

$('<div id="my_notifier"></div>').appendTo($('body')).html('<iframe src="http://example.com"></iframe>'); 

Le problème est, à l'intérieur de l'iframe, il n'hérite rien des scripts de contenu. Si je veux utiliser jQuery, je dois utiliser <script src=... pour l'inclure à nouveau dans l'iframe.

Je préfère ne pas inclure à nouveau jQuery car je l'ai déjà placé dans l'extension. Je ne veux pas que l'utilisateur télécharge jQuery encore et encore sur chaque page sur laquelle l'extension doit s'exécuter.

J'ai essayé l'attribut "all_frames": true, mais cela ne fonctionne pas.

Veuillez nous aviser. Merci.

Edit: J'ajouté example.com à l'attribut matches comme ceci:

"content_scripts": [ 
    { 
     "matches": 
      [ 
      "http://*.taobao.com/*", 
      "http://*.yintai.com/*", 
      "http://*.example.com/*" 
      ], 
     "run_at": "document_idle", 
     "js": ["jquery-1.5.1.min.js","jquery-ui-1.8.13.custom.min.js", "contentscript.js"], 
     "all_frames": true 
    } 
] 

Mais cela ne fonctionne pas.

Pour être plus clair, dire le contenu de l'iframe (example.com) est:

<!DOCTYPE HTML> 

<html> 
<head> 
    <title>Untitled</title> 
</head> 

<body> 

<div></div> 

<script type="text/javascript"> 
    $('div').html('hi'); 

</script> 

</body> 
</html> 

Il y aura une erreur: $ ne définit pas

Pour le faire fonctionner, je dois utiliser:

<!DOCTYPE HTML> 

<html> 
<head> 
    <title>Untitled</title> 
</head> 

<body> 

<div></div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $('div').html('hi'); 

</script> 

</body> 
</html> 
+0

Pouvez-vous afficher votre manifeste complet avec l'ensemble 'all_frames' et votre code de script de contenu qui crée iframe? – serg

+0

Ok, j'ai édité la question. – Betty

+0

Hey Betty, maintenant que Serg a résolu le problème initial, jetez un oeil à cette question en attendant que le cadre soit chargé pour y accéder: http: // stackoverflow.com/questions/4669089/comment-injecter-un-iframe-panel-à-google-chrome-extension-et-add-click-event-in – Darin

Répondre

4

Vous devez ajouter l'URL de votre iframe http://example.com à la liste et spécifier les scripts de contenu pour injecter:

"content_scripts": [ 
     { 
      "matches": 
       [ 
       "http://*.taobao.com/*", 
       "http://*.yintai.com/*" 
       ], 
      "run_at": "document_idle", 
      "js": ["jquery-1.5.1.min.js","jquery-ui-1.8.13.custom.min.js", "contentscript.js"] 
     },{ 
      "matches":["http://example.com/*"], 
      "run_at": "document_idle", 
      "js": ["jquery-1.5.1.min.js"], 
      "all_frames": true 
     } 
    ] 
+0

J'ai essayé votre chemin, et d'une autre manière en ajoutant simplement example.com à l'attribut 'matches', mais sans aucune chance. Voir la question éditée. PS: J'ai appuyé sur Entrée pour obtenir une nouvelle ligne, et j'ai été surpris de constater que le commentaire a été envoyé. >< – Betty

+0

@Betty Cela ne fonctionnerait pas comme vous le souhaitez. Les scripts de contenu sont en mode bac à sable, une page normale ne peut pas accéder à jquery en tant que script de contenu. Si le cadre example.com fait partie de votre extension et que vous avez un contrôle total, vous pouvez déplacer tout le javascript de cette page dans un script de contenu et l'injecter avec jquery. – serg

+0

Merci @serg. Le contenu de mon image example.com est généré dynamiquement, donc je ne peux pas le mettre dans l'extension. Je pense que cela signifie que ce que je veux ne peut pas être fait. Je vais devoir utiliser

0

Si la matière de performance pour vous, si je vous recommande d'utiliser javascript pur au lieu de jQuery, et la différence de performance sera perceptible pour les pages lourdes qui contient plusieurs iFrames; surtout si vous utilisez des fonctions jquery comme ajouter et filtre et sélecteurs compliqués.

Questions connexes