ウェブフォームを開き、特定の入力フィールドを自動入力するChrome拡張機能を作成するにはどうすればよいですか？

Question

クローム拡張機能を初めて使用しています。クローム拡張機能の設定に少し問題があります。拡張機能でWebページから特定の値を読み込み、新しいタブで作成したフラスコアプリケーションから特定のページ（入力フィールドの数を含むフォーム）を開いて、その値を使用する私のフラスコのアプリからページ内の特定のフィールドを入力します。

私は新しいタブを生成し、私のフラスコのアプリケーションからページを読み込むために拡張機能を取得することができましたが、フィールドに値を設定することができません。フィールドが読み込まれる前にページが読み込まれるように見えます。私はどれくらいの距離を持っているかを示すコードを貼り付けました。もう一つの問題は、私はexecuteScriptsのコードパラメータを使用して入力アクションを実行していますが、私はコード文字列に引数を渡すことができないようです（これはこれを行う方法ではないと思われますが、私はすべてのヘルプははるかに高く評価されるだろう、ここでhttps://stackoverflow.com/a/41094570/1977981 からここまで非常に有用見つけた答え。

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

ありがとうございます@ wOxxOmあなたのコメントは非常に参考になりました。 JSON.stringifyを使用して、注入されたコード文字列に引数を読み込むことができました。私はまた、オブジェクトのjqueryバージョンを使用するのではなく、document.getElementsByClassName（）を使用してフォームからinput要素をロードしなければなりませんでした。また、これは私が

VAR少ない= document.getElementsByClassName（ 'lesson_subsection'）の下に示したラインを参照してくださいjQueryライブラリをロードする必要はありませんでした意味[0];

次のように今私のbackground.jsスクリプトの私のchrome.runtime.onMessage.addListener機能は次のとおりです。

// 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