I am greenhand in middle of making a chrome extension, which will search for specific text from the entire web , and then append a button element.
Actually, it’s a wordlist containing unfamiliar words, and I want to add a button near any of these unfamiliar words on each website.
I have implemented the manual word selection feature.
Like this: content-script.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)
}
});
When I select a word, I can append an element because I have the range of the selection, and I can easily add a new element. However, I don’t know how to search the entire page content. Help!
(I get innerText and search from it ,but cant locate the position of an element in the DOM)
