Comment exécuter une fonction personnalisée sur un onglet ouvert dans une extension Chrome à l'aide de jQuery ?

Question

J'ai une extension chrome qui doit manipuler le contenu de la page actuellement ouverte (onglet).

Pour recueillir les données de l'utilisateur, j'utilise le fichier popup.html avec quelques champs de saisie. L'entrée de ces champs est transmise à la page (contenu script) qui exécute la transformation souhaitée.

Le problème est que je ne peux pas exécuter une fonction que je définis dans un contenu script. J'ai essayé de définir la fonction dans un content_script.js lui-même et j'ai essayé de l'insérer dans la page via

var new_script2 = document.createElement('script');
code = "function definition goes here";
new_script2.text = code;
document.getElementsByTagName('head')[0].appendChild(new_script2);

rien ne fonctionne. De plus, je ne peux pas voir les objets jQuery dans un content_script.js même si je les insère dans un manifeste comme suggéré. ici

Comment exécuter une fonction personnalisée sur un onglet ouvert dans une extension Chrome après que l'événement a été généré dans une fenêtre contextuelle ?

[MISE À JOUR]

Voici ce que j'ai maintenant et j'ai résolu mon problème, la clé est de faire attention au passage des messages et à l'initialisation des fonctions.

Mon manifeste se présente comme suit

{
  "background_page": "background.html",
  "name": "some",
  "version": "0.1",
  "description": "some",
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "some",
    "popup": "popup.html"
  },
   "content_scripts": [ {
      "js": [ "javascripts/jquery-1.5.min.js", "javascripts/jquerylatest.js", "javascripts/content_script.js" ],
      "matches": [ "http://*/*", "https://*/*", "file://*/*" ],
      "run_at": "document_end"
   } ],
   "permissions": [ "tabs", "http://*/", "https://*/" ]
}

Dans popup.html, je crée un bouton et j'affecte un gestionnaire d'événements qui envoie des messages à la page d'arrière-plan.html.

    $( "#create-user" )
        .button()
        .click(function() {
            //~ alert(allFields.val());
            //~ var annot = [attrValue, attrType];
            chrome.tabs.getSelected(null, function(tab) {               
            chrome.tabs.sendRequest(tab.id, {"attrValue" : attrValue.val(), "attrType" : attrType.val()}, 
            function readResponse() { console.log("got response in popup");} );
            window.close();
            });
        });

Dans la page d'arrière-plan, j'écoute les messages envoyés par une fenêtre contextuelle.

var tab_id = -1;

chrome.tabs.getSelected(null, function(tab) {
        tab_id = tab.id;
    });

chrome.extension.onRequest.addListener(function(request, sender) {
    console.log("in bg.js addlistener method " + request);
        chrome.tabs.executeScript(tab_id, {file:"javascripts/content_script.js"});
    });

et les redirige vers le contenu script à utiliser pour la modification de la page. content_script écoute comme suit :

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
//do your manipulation here
});

Enfin, n'oubliez pas d'inclure les bibliothèques jquery dans le sous-dossier javascripts/ de votre extension.

Answer 1

D'après ce que j'ai compris, les fonctions Javascript injectées ne sont pas sauvegardées, à moins qu'elles ne soient attachées à un événement (comme un keypress ou un onclick ). (que quelqu'un me corrige si je me trompe !)

Au lieu de cela, je suggère d'utiliser chrome.tabs.executeScript(tabId, details) et d'écrire le code dans le details.code ou que le code se trouve dans un autre fichier script .js via details.file que vous pourriez injecter.

Mais là encore, les fonctions injectées seront supprimées une fois que le script sera terminé.
Mettez donc votre fonction et d'autres codes dans un contenu script, injectez-le, et votre contenu script peut utiliser sa (ses) fonction(s) jusqu'à ce que le script se termine.