Question

我目前正在编写一个简单的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>

content.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个小时内已经尝试了很多我能想到的东西。

谢谢，

如何从扩展到javascript接收输入？

0 个答案: