在 JavaScript 中突出显示 [关闭]

Question

我正在制作一个 Firefox 扩展，我有兴趣以编程方式突出显示网站中的文本序列，作为我较大扩展的一部分，类似于 Google Chrome 的 NaturalReader 所做的。我对 JavaScript 和 HTML DOM 的经验很少。

我遇到过 mark.js，但我无法弄清楚如何将它实际包含在我的 Firefox 扩展中，除了从字面上复制并粘贴

dist/mark.js

文件中的代码（参见 > 1000 行文件 here ) 在

parseHTML.js

文件中我的代码的正上方（见下文）。

我制作了以下代码，当您单击扩展图标时弹出窗口会调用它，以尝试使

mark.js

工作，更具体地说，突出显示所有文本，一次一个元素。我正在从网站获取文本以在控制台中正确打印出来，但网站上的所有文本实际上都没有突出显示。当我单击该图标时，弹出窗口也会按预期出现。

清单.json

{
"manifest_version": 2,
"name": "myName"
"version": "1.0",
"description": "myDescription",
"browser_action": {
    "default_icon": {
        "48": "icons/brain.jpg"
    },
    "default_title": "myName",
    "default_popup": "popup/player.html",
    "browser_style": true
},
"icons": {
    "48": "icons/brain.jpg"
},
"permissions": [
    "activeTab"
]
}

所以，总而言之，我有两个不同的问题。第一个是“如何正确地将 mark.js 包含在我的弹出脚本中？”第二个是“当我点击我的图标时，为什么 markRanges 什么都不做？”。我的目标是制作一个脚本，当用户点击图标时运行，该脚本称为 parseHTML.js，它利用了 mark.js 中的函数。 parseHTML 首先被 player.js 调用，因为 parseHTML.js 需要操作网页本身的东西，而 player.js 只能操作点击图标时出现的弹出框内的东西。

有人可以就这个问题给我一些指导吗？

//popup/player.js
browser.tabs.executeScript({file: "parseHTML.js"});

//popup/parseHTML.js
/* copy the over 1000 lines of code from dist/mark.js right here, above my own code in this parseHTML.js file. */
var root = document.getElementsByTagName("body");
runChildren(root.item(0));

function highlightNode(node)
{
    var instance = new Mark(node);
    const ranges = [{ start: 0, end: node.textContent.length }];
    instance.markRanges(ranges);
    console.log(node.textContent);
}

function runChildren(node)
{
    let alreadyDone = false;
    for (let i = 0; i < node.childNodes.length; i++)
    {
        if(!alreadyDone && node.childNodes[i].nodeName == "#text")
        {
            alreadyDone = true;
            highlightNode(node);
        }
        runChildren(node.childNodes[i]);
    }
}

/* popup/player.css */
html,
body {
    width: 100px;
}

.hidden {
    display: none;
}


button {
    border: none;
    width: 100%;
    margin: 3% auto;
    padding: 4px;
    text-align: center;
    font-size: 1.5em;
    cursor: pointer;
    background-color: #E5F2F2;
}

button:hover {
    background-color: #CFF2F2;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="player.css" />
</head>

<body>
    <div id="popup-content">
        <button>Button</button>
    </div>
</body>
<!-- <script src="mark.js" charset="UTF-8"></script> -->
<script src="player.js"></script>

</html>

在 JavaScript 中突出显示 [关闭]

问题描述投票：0回答：0

最新问题

在 JavaScript 中突出显示 [关闭]

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0