Chrome Расширение: Сообщение, передаваемое из всплывающего окна в DOM, приводит к текстовому полю, заполненному "undefined" - PullRequest
Новая
       54

Chrome Расширение: Сообщение, передаваемое из всплывающего окна в DOM, приводит к текстовому полю, заполненному "undefined"

0 голосов
/ 05 мая 2020

Я собрал код для базового c Chrome расширения, используя передачу сообщений, для заполнения текстовых полей и комбинированных полей на веб-сайте. Следующий код приводит к тому, что текстовые поля читаются как «undefined». Где я ошибаюсь?

manifest. json

{
 "manifest_version": 2,
 "name": "Click to execute",
 "description": "ARM Filler",
 "version": "1.0",
 "icons": {
           "48": "icon.png"
           },
 "permissions": [
                 "tabs", "<all_urls>"
                ],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
                  },
"content_scripts": [
                      {
                       "matches": ["https://(secure website here)*"],
                       "js": ["popup.js"]
                      }
                    ]
 }

myscript. js

window.onload=function(){

 document.getElementById('buttonSet').addEventListener('click',function(){

 chrome.tabs.query({}, function(tabs) {
 for(var i = 0; i < tabs.length; i++) {
  chrome.tabs.sendMessage(tabs[i].id, {user :document.getElementById('txtfn').value,
                                     pass :document.getElementById('txtln').value}, function(response) {
        });
 }
 }); 

 });

 }

всплывающее окно. js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
     document.getElementsByName("firstName")[0].value=request.txtfn;
     document.getElementsByName("lastName")[0].value=request.txtln;

});

всплывающее окно. html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <style>
      .container {
        max-height: 1200px;
        min-height: 600px;
        width: 600px;
        border: 2px solid rgba(0,0,0,0.3);
        border-radius: 2px;
        background: white;
      }
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
      .patient-list {
        max-height: 250px;
        overflow-y: scroll;
        overflow-x: hidden;
        max-width: 100%;
      }
    </style>
    <div class="container">
        <div class="page-header">
          <h3>ARM Applicant Updater</h3>
          <p id="status"></p>
        </div>
        <div class="form-group">
            <label>First Name</label><input class="form-control" type="text" id="txtfn" name="txtfn"><br>
            <label>Last Name</label><input class="form-control" type="text" id="txtln" name="txtln"><br>
        </div>
        <div>
          <button class="btn btn-primary" id="buttonSet" name="update">Update</button>
        </div>
    </div>
    <script src="/scripts/jquery.min.js" type="text/javascript"></script>
    <script src="/scripts/extension.js" type="text/javascript"></script>
    <script type="text/javascript" src="myscript.js"></script>
</body>
</html>

Цель состоит в том, чтобы заполнить только критический текст и поля со списком в форме, имеющей около 150 различных входных данных, с помощью упрощенного всплывающего окна. Всплывающее окно будет содержать только около 15 из 150 полей, поэтому пользователям не придется бесконечно прокручивать, чтобы найти необходимые поля.

Заранее благодарим! - Мэтт

...