0

我目前正在编写一个简单的 chrome 扩展来替换自定义单词。
是的，我也看到了那些提出类似问题的各种问题，但是缺少一些东西，我找不到它。我对 javascript 很陌生，我正在做这个任务。

在我的 chrome 扩展中，我有两个文本框（替换自和替换到）和一个提交按钮。我目前想要实现的是，当单击 chrome 扩展中的按钮时，从 chrome 扩展中的两个文本框中的值中分配 content.js 中的替换变量，但是，控制台正在打印该按钮不存在，即使我试图采取措施避免这种情况。

到目前为止我所拥有的：
Manifest.json

{
  "manifest_version": 2,
  "name": "Word replacer",
  "description": "Change words!",
  "version": "1.0",

  "browser_action": {
    "default_popup": "popup.html"
  },

  "content_scripts": [
      {
        "run_at": "document_start",
        "js": [
            "content.js"
        ],
      "matches": [
            "*://*/*"
        ]
      }
  ]
}

HTML

<html>
   <head>
     <script type="text/javascript" src="content.js"></script>
     <--some CSS now-->
  </head>
  <body>
      <h1>Word replacer</h1>
      <div id="container">
          <form id="frm">
             Text to replace:<br>
             <input id="toReplace" type="text"><br>
             Replace with:<br>
             <input id="replaceWith" type="text"><br>
             <input id="rplBtn" type="submit" value="Submit" style="float: right;">
        </form>    
     </div>
  </body>
</html>

内容.js

var elements = document.getElementsByTagName('*');
var replaceTo=new RegExp("test","gi"); 
var replaceFrom=new RegExp("/test/gi","gi"); //These two are already assigned for testing purposes



console.log("out");
if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function () {
        console.log("in");
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];

            for (var j = 0; j < element.childNodes.length; j++) {
                var node = element.childNodes[j];

                if (node.nodeType === 3) {
                  var text = node.nodeValue;

                   var replacedText = text.replace(replaceFrom, replaceTo);

                   if (replacedText !== text) {
                       element.replaceChild(document.createTextNode(replacedText), node);
                    }
                }
            }
        }


   }
   )}
   if (document.readyState ==="interactive") {
       console.log(0);
       document.addEventListener('DOMContentLoaded', function () {
      console.log(1);
        var btn = document.getElementById('rplBtn');
        console.log(2);
        btn.addEventListener("click", function() {
            console.log(3);
             console.log("clicked");
             replaceTo = new RegExp(document.getElementById("replaceWith").innerHTML,"gi");
             replaceFrom = new RegExp(document.getElementById("toReplace").innerHTML,"gi");
             window.location.reload(true);
        })});
  }


由于这是很多代码，让我告诉您在查看其他人的示例后我更改了哪些内容。通常，控制台不会打印超出“out”（这是来自 content.js），但如果我将 run_at 属性设置为“document_start”，则“/test/gi”的所有实例都将替换为“test”，因为它们应该是。
但是，仍然无法识别该按钮，因此我尝试仅在 readyState 为“交互式”时查找该按钮，但是，由于未打印 0，编译器似乎无法到达那里。

你能帮我解决这个问题吗，因为我在过去 6 个小时里已经尝试了几乎所有我能想到的东西。

谢谢，

4

0 回答 0