Comment créer une extension Chrome qui ouvre un formulaire Web et remplit automatiquement les champs de saisie spécifiques?

Question

Je suis novice en ce qui concerne l'utilisation des extensions chromées et j'ai un petit problème avec la mise en place d'une extension chromée. Je souhaite que l'extension lise des valeurs spécifiques à partir d'une page Web, puis ouvre une page spécifique (formulaire avec plusieurs champs de saisie) à partir d'une application Flask que j'ai créée dans un nouvel onglet, puis utilise les valeurs qui ont été raclées remplir des champs spécifiques dans la page de mon application flacon.

J'ai réussi à obtenir l'extension pour générer un nouvel onglet et pour charger la page à partir de mon application flask, mais je ne parviens pas à remplir les champs. Il semblerait que la page soit chargée avant que les champs ne soient remplis. J'ai collé du code pour vous montrer jusqu'où je suis. L'autre problème est que j'utilise le paramètre code de executeScripts pour effectuer l'action de remplissage, mais je ne semble pas être en mesure de passer des arguments dans la chaîne de code (je suppose que ce n'est pas le cas mais je travaille) une réponse que j'ai trouvé très utile à ce point d'ici https://stackoverflow.com/a/41094570/1977981 Toute aide serait appréciée.

manifest.json

{ 
    "manifest_version": 2, 
    "name": "My Cool Extension", 
    "version": "0.1", 
    "permissions": [ 
    "http://localhost:****/lesson/1/note/new/" 
    ], 
    "content_scripts": [ 
    { 
    "matches": [ 
    "<all_urls>" 
    ], 
    "js": ["jquery-3.2.1.min.js", "content.js"] 
    } 
], 
    "browser_action": { 
    "default_icon": "icon.png" 
}, 
    "background": { 
    "scripts": ["jquery-3.2.1.min.js", "background.js"] 
} 
} 

content.js

// Triggered by sendMessage function in background.js 
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
     // listening for request message 
     if(request.message === "clicked_browser_action") { 
      // Retrieve Lesson title from current tab 
      var lesson = $('._tabbed-sidebar--title--1Dx5w').find('span').text() 

      // output this value to the console 
      console.log(lesson); 

      // Send a single message to the event listener in your extension i.e. background.js 

      chrome.runtime.sendMessage({"message": "open_new_tab", "lesson": lesson}) 
    } 
    } 
); 

background.js

// Called when the user clicks on the browser action icon. 
chrome.browserAction.onClicked.addListener(function(tab) { 

    // Send a message to the active tab 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 

    // take the current tab shown in the window 
    var activeTab = tabs[0]; 

    // Send a message to contents.js - this message is being listened for by contents.js and the runtime.onMessage event is fired in content.js script 
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"}); 

     }); 
}); 

// listening for "open_new_tab" message from content.js 
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
     if(request.message === "open_new_tab") { 

      // create new tab but do not activate the tab yet 
      chrome.tabs.create({"url": "http://localhost:5000/lesson/1/note/new/", active: false }, function(tab){ 


       // load jquery functionality execute script 
       chrome.tabs.executeScript(tab.id, {file: "jquery-3.2.1.min.js"}, function(results){ 

        chrome.tabs.executeScript(tab.id,{code:` 
         (function(arguments){ 
          var count = 100; //Only try 100 times 
          function autofill(){ 
           var lesson = $('.lesson_subsection'); 
           console.log(lesson); 
           if(lesson){ 
            lesson.value = arguments[0].lesson; 
           } else { 
            if(count-- > 0){ 
            //The elements we need don't exist yet, wait a bit to try again. 
             setTimeout(autofill,250); 
            } 
           } 
          } 
          autofill(); 
         }, request)(); 
        `}, function(results){ 

        chrome.tabs.update(tab.id,{active:true}); 
          }); //END OF second executeScript function 
}); // END OF first executeScript function 

    } // END OF chrome.tabs.create anonymous function 
    ); // END OF chrome.tabs.create 
} // END OF if(request.message === "open_new_tab") { 
}); // END OF addListener anonymous function 

Answer 1

Merci @wOxxOm vos commentaires ont été très utiles. J'ai été capable d'utiliser JSON.stringify pour charger les arguments dans la chaîne de code injectée. J'ai également dû charger l'élément d'entrée de mon formulaire en utilisant document.getElementsByClassName() au lieu d'utiliser la version jquery de l'objet. Cela signifie aussi que je ne devais pas charger la ligne, voir la bibliothèque jquery ci-dessous

var = moins document.getElementsByClassName ('lesson_subsection') [0];

Maintenant, ma fonction chrome.runtime.onMessage.addListener dans mon script background.js est la suivante:

// See content.js function 
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
     if(request.message === "open_new_tab") { 
      chrome.tabs.create({"url": "http://localhost:5000/lesson/1/note/new/", active: false }, function(tab){ 
      console.log('Attempting to inject script into tab:',tab); 
      chrome.tabs.executeScript(tab.id,{code:` 
       (function(argument){ 
        var count = 100; //Only try 100 times 
        function autofill(){ 
        var less = document.getElementsByClassName('lesson_subsection')[0]; 
        if(less){ 
         less.value = argument; 
        } else { 
          if(count-- > 0){ 
           //The elements we need don't exist yet, wait a bit to try again. 
           setTimeout(autofill,250); 
        } 
       } 
      } 
      autofill(); 
     })(` + JSON.stringify(request.lesson) + `); 
    `}, function(results){ 
      // chrome.tabs.sendMessage(tab.id, {"message": "need to update tab", "tab": tab.id}); 
      chrome.tabs.update(tab.id, { active: true }); 

    }); //END OF executeScript function 

    } // END OF chrome.tabs.create anonymous function 
    ); // END OF chrome.tabs.create 
    } // END OF if(request.message === "open_new_tab") { 
}); // END OF addListener anonymous function