扫描html div类以获取消息

Question

在你投票之前，我做了很多研究，例如： https://stackoverflow.com/search?q=scan+div+html+javascript

我正在对chrome进行扩展，检查html web源并扫描任何div类youWrap是否包含某些单词，如果是，则它会在textarea id =“Comment”中更改占位符文本。 我已经从这里和youtube关注了一些问题，我已经加载了manifest.json文件，icon.png和popup.html以及javascript文件。但现在我卡住了，我不知道如何使脚本继续运行和扫描。 我不希望你为我编写完整的脚本，但我不知道在哪里阅读它，因为我是javascript和网页的新手。

在网页上，这是包含消息的div标签：

<div class="youWrap">message</div>

这是文本区域：

<textarea id="Comment" class="form-control" name="Comment" placeholder="Textarea..."></textarea>

清单文件：

{
    "name": "ext name",
    "version": "1.0",
    "manifest_version": 2,
    "description": "This is extension desc.",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "mypopup.html"
    },
    "content_scripts": [
    {
    "matches": [
      //match url
    ],
    "js": ["content.js"]
  }
]
}

Answer 1

使用Jquery

这将选择包含youWrap类的所有div，其中包含所需的文本

var elements=$(".youWrap:contains('message')");

这会改变占位符文本

if(elements.length>0)
{
$("#Comment").attr("placehoder","text");
}

Answer 2

参考文献：

• Content Scripts
• Manifest File

您可以将以下代码作为添加一些HTML代码的参考。

manifest.json

此文件将内容脚本注册到扩展名。

{
"name":"Inject DOM",
"description":"http://stackoverflow.com/questions/42718742",
"version":"1",
"manifest_version":2,
"content_scripts": [
    {
      "matches": ["http://www.google.co.in/*","https://www.google.co.in/*"],
      "js": ["myscript.js"]
    }
  ]
}

myscript.js

一个简单的脚本，用于向Google页面添加按钮

// Checking page title
if (document.title.indexOf("Google") != -1) {
    //Creating Elements
    var btn = document.createElement("BUTTON")
    var t = document.createTextNode("CLICK ME");
    btn.appendChild(t);
    //Appending to DOM 
    document.body.appendChild(btn);
}

Output

您会看到一个添加到所需页面的按钮

您可以扩展此示例脚本以获得所需的功能