chrome 扩展 - 在网站上查找文本并应用 CSS 和悬停事件

Question

我一直在研究这个主题，但找不到有效的 link 或任何关于如何让它发挥作用的信息。

实际上，我有一个名为 text.txt 的文件，我想在网站上搜索该文本文件，如果找到，则在该词上应用 css 样式和悬停事件.

清单：

"name": "Find and apply testing...",
"description": "Testing",
"version": "0.1",
"manifest_version": 2,
"permissions": [
    "tabs"
],
"background": [{
    "scripts": ["jquery.min.js", "main.js"]
}]

我尝试编写一个循环遍历文件的 js 脚本，但我认为它无法正常工作：

$(document).ready(function() {
    function readTextFile(file) {
        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", file, false);
        rawFile.onreadystatechange = function ()
        {
            if (rawFile.readyState === 4)
            {
                if (rawFile.status === 200 || rawFile.status == 0)
                {
                    var allText = rawFile.responseText;
                    console.log(allText);
                }
            }
        }
        rawFile.send(null);
    }

    readTextFile("file.txt");
});

最后是我的 text.txt 文件：

"Example Text", "http://google.com"
"Second Text", "http://example.com"
"Third", "http://another.com"
"And finally forth", "http://andanother.com"

我只需要在网站上搜索第一个单元格。有什么想法或指导吗？谢谢。

Answer 1

回答了我自己的问题。我发现这对于从网站获取文本非常有效：

function getText() {
    return document.body.innerText;
}

if (getText().indexOf("searching") > -1) {
    document.body.innerHTML = document.body.innerHTML.replace(new RegExp("searching", "g"), "<span class='spanDetected' id='spanDetected'>" + 'searching'+"</span>");
    console.log("true");
}

chrome 扩展 - 在网站上查找文本并应用 CSS 和悬停事件

chrome extension - find text on website and apply CSS and hover event

javascript

jquery

google-chrome

google-chrome-extension