如何扫描页面查找术语并显示它们-Javascript-Chrome扩展

Question

我目前正在尝试制作一个谷歌chrome扩展，但遇到了障碍。

我希望扩展能够扫描页面中的3个术语，并将它们显示在div中，但我对JavaScript不太了解，需要帮助。

Answer 1

const globalWordsStore = new Map();
const setOfWords = ['Hello', 'World']
function populateStore(el){
let n;
let a=[];
let walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
while(n=walk.nextNode()) {
const arrayOfWords = n.data.trim().split(" ");
arrayOfWords.forEach((ele) => {
if(setOfWords.includes(ele)){
if(globalWordsStore.has(ele)){
globalWordsStore.set(ele, globalWordsStore.get(ele) + 1);
} else {
globalWordsStore.set(ele, 1);
}
}
})
}
}
populateStore(document.getElementsByTagName('body')[0]);
for (const [key, value] of globalWordsStore.entries()) {
// key --> word
// value --> count of that partivular word
console.log(key, value);
}

在这里，Map将存储所有单词及其计数。这里的方法是，首先从DOM中挑选出所有文本节点(它们是body元素的子元素(，然后从中提取文本，接下来我使用整个文本中的单词创建了一个数组，然后使用globalWordsStore来存储每个单词的出现，我对DOM中的所有文本节点都这样做了。

关于CreateTreeWalker 的更多信息