如何在 Chrome 扩展程序中找到特定字词并附加元素？

问：

我正在制作一个 chrome 扩展程序，它将从整个网络中搜索特定文本，然后附加一个按钮元素。

实际上，这是一个包含不熟悉单词的单词列表，我想在每个网站上的这些不熟悉的单词附近添加一个按钮。

我已经实现了手动选词功能。

像这样：内容脚本.js

async function GetWordlist() {
    var { wordlist } = await chrome.storage.local.get(['wordlist'])
    wordlist = wordlist || []
    return wordlist
}


document.addEventListener('dblclick', async (event) => {
    var selection = window.getSelection()
    var selectedText = selection.toString().trim()
    if (selectedText.length > 0) {
        var wordlist = await GetWordlist()
        wordlist.push({
            content: selectedText,
            translation: `.... (Unfinish)`
        })
        await chrome.storage.local.set({wordlist})


        const range = selection.getRangeAt(0)
        console.log(range)

        const span = document.createElement('span');
        const button = document.createElement('button')
        {
            button.className = 'translated-word-btn'
            button.textContent = `$.... (Unfinish)`
            button.addEventListener('click', () => {
              //some features...eg.mark it familiar and delete this from the woldlist
            })
        }

            const originText = range.extractContents()
            span.appendChild(originText)
            span.appendChild(button)
            range.insertNode(span)
            const newRange = document.createRange()
            newRange.setStart(span, 0)
            newRange.setEnd(span, 1)

           //reselect the text
            window.getSelection().removeAllRanges()
            window.getSelection().addRange(newRange)
        

    }
});

当我选择一个单词时，我可以附加一个元素，因为我有选择的范围，并且我可以轻松地添加一个新元素。但是，我不知道如何搜索整个页面内容。帮助！

我获取innerText并从中搜索，但无法在DOM中找到元素的位置。 我尝试了两个 API：document.body.innerHTML 和 document.body.innerText，但它们要么破坏了 Web 结构，要么忽略了 HTML 元素。