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

Question

我目前正在尝试制作一个 google 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 元素的子元素），然后从中提取文本，接下来我使用整个文本中的单词创建一个数组，然后使用 @987654323 @ 到每个单词出现的存储，这是我为 DOM 中的所有文本节点所做的。

更多关于CreateTreeWalker