我的代码有错误吗？我正在尝试创建一个扩展程序，以在Firefox的单个网页上自动填充具有特定详细信息的字段

Is there any error with my code? I am trying to create an extension to autofill fields with specific details on a single web page for firefox

提问人：Sai Adusumalli 提问时间：10/25/2023 更新时间：10/25/2023 访问量：42

问：

我正在尝试为 firefox 创建一个自动填充扩展程序，以使用预定义的值自动填充特定网页中的字段。我是新手，并且已经使用了几个在线资源寻求帮助。我没有收到任何错误，但是当我单击按钮时，它没有填充数据。我已经尝试了所有方法，但我不确定错误在哪里。

这是我用过的代码

manifest.json

{
    "manifest_version": 2,
    "name": "AutoFills Extension",
    "version": "1.0",
    "description": "https://comm.proxy.com/send/bulk-app/*",
    "permissions": [
      "activeTab",
      "https://comm.proxy.com/send/bulk-app/*"
    ],
    "browser_action": {
      "default_popup": "popup.html"
    },
    
    "content_scripts": [
      {
        "matches": ["https://comm.proxy.com/send/bulk-app/*"],
        "js": ["content.js"] 
      }
    ]
}

内容.js

document.addEventListener("DOMContentLoaded", function () {
  
  const predefinedData = {
    "TemplateName": "FLEX/NEWSFEED",
    "dropdownValue": "CRITICAL" 
  };
  
   
    function autofillForm() {
      const form = document.querySelector("form-control"); // Replace with your specific form selector
      if (form) {
        // Autofill text fields
        form.querySelector("input[name='templateName']").value = predefinedData.TemplateName;
        const dropdown = form.querySelector("select[name='Priority']");
        if (dropdown) {
          for (let option of dropdown.options) {
            if (option.text === predefinedData.dropdownValue) {
              option.selected = true;
              break;
            }
          }
          
        }
      }
    }
  
    autofillForm();
  });

弹出.html

<!DOCTYPE html>
<html>
<head>
  <title>AutoFill Extension</title>
  <style>
    button {
      padding: 10px;
      background-color: #0074b3;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>AutoFill Extension</h2>
  <p>Click the button below to autofill the form:</p>
  <button id="autofillButton">Autofill Form</button>

  <script src="popup.js"></script>
</body>
</html>

弹出.js

document.addEventListener("DOMContentLoaded", function () {
    const autofillButton = document.getElementById("autofillButton");
  
    autofillButton.addEventListener("click", function () {
      // Send a message to your content script to initiate autofill
      browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        browser.tabs.sendMessage(tabs[0].id, { command: "autofill" });
      });
    });
  });

I am also adding the name, id and class of the html page I am working with
id="templateName"
class="form-control"
name="templateName"
type="text"
data-reactid=".0.2.3.1.0"

任何帮助都非常感谢 谢谢

javascript node.js json google-chrome-extension firefox-addon

评论

0赞 ControlAltDel 10/25/2023
我不知道如何解决这个问题，但我想我建议你尽可能使用 input.placeholder 属性，而不是直接尝试自动填充字段。

答：

0赞 PassingThru 10/25/2023 #1

将“DOMContentLoaded”的所有实例替换为“load”，因为前者还为时过早，不适合您的需求。所以你的听众现在看起来像这样......

document.addEventListener('load',function(){
// whatever is in here
}

铌：DOMContentLoaded 对于进行 JS 性能测量等很有用，并在样式表、图像、子帧之前触发，我不知道还加载了什么。

顺便说一句，我还致力于在页面上自动填充表单字段......我不仅使用了最后一个加载事件触发器，而且在填写表单字段之前，我还等待了额外的 3-5 秒（延迟）让所有内容完美加载！

有些页面又大又复杂，因此您需要在操作之前给它们足够的时间来安顿下来。

评论

0赞 Sai Adusumalli 10/26/2023
嗨，我已经尝试了您的建议，但无法使其工作。你认为我还有其他方法可以改变来让事情发挥作用吗？

上一个：在Firefox中强制安装扩展

下一个：如何在不用户单击 WebExtension v3 的情况下运行content_script