如何扫描页面中的术语并显示它们 - 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 元素的子元素）中挑选出所有文本节点，然后从中提取文本，接下来我使用整个文本中的单词创建一个数组，然后然后使用 globalWordsStore 来存储每个单独单词的出现次数，这是我对 DOM.

中的所有文本节点所做的

更多关于CreateTreeWalker

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

How To Scan a Page For Terms And Display Them - Javascript - Chrome Extension

html

javascript

css

google-chrome

google-chrome-extension