Hey there! Let's break down how to build this Chrome extension step by step—your idea is totally feasible, and it's actually a common use case for extensions. Here's a practical, beginner-friendly roadmap to get you started:

一、先打消核心顾虑：你的思路完全可行 #

Your mask layer idea works, but there's also a simpler, more widely used approach (direct DOM modification) that’s easier to implement. We’ll cover both options below.

二、核心功能分步实现 #

1. Page Content Scraping & Keyword Scanning #

Chrome extensions have a built-in tool called Content Scripts that’s made exactly for this—they run in the context of the target page and can directly access the DOM without needing external libraries.

Basic Text Scraping & Counting

You can grab all visible text (excluding scripts/styles) with this snippet in your content script:

// content.js (your content script file)
const targetKeyword = "your-target-keyword";
const regex = new RegExp(`\\b${targetKeyword}\\b`, 'gi'); // \\b ensures whole-word matches

// Option 1: Quick text scan (may include hidden text)
const fullText = document.body.textContent;
const quickCount = (fullText.match(regex) || []).length;

// Option 2: Precise text node traversal (avoids scripts/styles)
const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT,
  {
    acceptNode: node => {
      const parentTag = node.parentElement.tagName;
      return parentTag !== 'SCRIPT' && parentTag !== 'STYLE' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
    }
  }
);

let preciseCount = 0;
let currentNode;
while (currentNode = treeWalker.nextNode()) {
  const matches = currentNode.textContent.match(regex);
  if (matches) preciseCount += matches.length;
}

2. Keyword Highlighting: Two Reliable Approaches #

Approach A: Direct DOM Modification (Simpler & Faster)

This replaces matching text nodes with styled <span> elements—no mask needed, and it’s less prone to layout issues:

// Add this to content.js
function highlightKeyword(keyword) {
  const regex = new RegExp(`(${keyword})`, 'gi');
  const treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: node => {
        const parentTag = node.parentElement.tagName;
        return parentTag !== 'SCRIPT' && parentTag !== 'STYLE' && parentTag !== 'SPAN' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
      }
    }
  );

  let currentNode;
  while (currentNode = treeWalker.nextNode()) {
    const text = currentNode.textContent;
    const splitParts = text.split(regex);
    
    if (splitParts.length > 1) {
      const fragment = document.createDocumentFragment();
      splitParts.forEach(part => {
        if (part.match(regex)) {
          const highlightSpan = document.createElement('span');
          highlightSpan.style.backgroundColor = '#ffff00'; // Yellow highlight
          highlightSpan.textContent = part;
          fragment.appendChild(highlightSpan);
        } else {
          fragment.appendChild(document.createTextNode(part));
        }
      });
      currentNode.parentElement.replaceChild(fragment, currentNode);
    }
  }
}

Approach B: Mask Layer (No DOM Modifications)

If you need to avoid altering the original page DOM (e.g., for fragile sites), use an absolute-positioned mask:

// Add this to content.js
function createHighlightMask(keyword) {
  const maskContainer = document.createElement('div');
  maskContainer.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; // Don't block page interactions
    z-index: 9999;
  `;
  document.body.appendChild(maskContainer);

  const regex = new RegExp(`\\b${keyword}\\b`, 'gi');
  const treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    { acceptNode: node => node.parentElement.tagName !== 'SCRIPT' && node.parentElement.tagName !== 'STYLE' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT }
  );

  let currentNode;
  while (currentNode = treeWalker.nextNode()) {
    let match;
    while (match = regex.exec(currentNode.textContent)) {
      const range = document.createRange();
      range.setStart(currentNode, match.index);
      range.setEnd(currentNode, match.index + match[0].length);
      
      const rects = range.getClientRects();
      rects.forEach(rect => {
        const highlightBlock = document.createElement('div');
        highlightBlock.style.cssText = `
          position: absolute;
          left: ${rect.left}px;
          top: ${rect.top + window.scrollY}px;
          width: ${rect.width}px;
          height: ${rect.height}px;
          background-color: rgba(255,255,0,0.5); // Semi-transparent yellow
        `;
        maskContainer.appendChild(highlightBlock);
      });
    }
  }

  // Update mask position on scroll
  window.addEventListener('scroll', () => {
    const highlights = maskContainer.querySelectorAll('div');
    highlights.forEach(highlight => {
      highlight.style.top = `${parseInt(highlight.style.top) - window.scrollY + window.scrollY}px`;
    });
  });
}

3. Data Stats & Chart Display #

Use Chrome’s messaging API to send count data from your content script to the extension’s popup, then use a lightweight offline chart library (like Chart.js) to visualize it:

Step 1: Pass Data from Content Script to Popup

// In content.js, add a listener for popup messages
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getKeywordData') {
    sendResponse({
      keyword: targetKeyword,
      count: preciseCount
    });
  }
});

Step 2: Popup Logic & Chart

First, drop an offline copy of Chart.js into your extension’s lib folder, then add this to your popup files:

<!-- popup.html -->
<button id="highlightBtn">Highlight Keyword</button>
<canvas id="keywordChart"></canvas>
<script src="lib/chart.min.js"></script>
<script src="popup.js"></script>

// popup.js
document.getElementById('highlightBtn').addEventListener('click', () => {
  chrome.tabs.query({active: true, currentWindow: true}, tabs => {
    // Send message to content script to trigger highlighting
    chrome.tabs.sendMessage(tabs[0].id, {action: 'highlight'}, () => {
      // Fetch count data after highlighting
      chrome.tabs.sendMessage(tabs[0].id, {action: 'getKeywordData'}, response => {
        if (response) {
          const ctx = document.getElementById('keywordChart').getContext('2d');
          new Chart(ctx, {
            type: 'bar',
            data: {
              labels: [response.keyword],
              datasets: [{
                label: 'Occurrences',
                data: [response.count],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
              }]
            }
          });
        }
      });
    });
  });
});

三、Chrome Extension Permissions & External Libraries #

• Permissions: Add activeTab to your manifest.json (it lets you access the current tab temporarily, which is more user-friendly than broad <all_urls> access).
• External Libraries: You can use external libraries—just include the offline file in your extension folder (no CDN links needed, as Chrome’s CSP may block them). For example, download Chart.js’s minified file and put it in lib/chart.min.js.

四、Basic Extension Structure #

your-keyword-highlighter/
├── manifest.json       # Core config file
├── content.js          # Handles page scraping & highlighting
├── popup.html          # Popup UI with button and chart
├── popup.js            # Popup logic
└── lib/
    └── chart.min.js    # Offline chart library

Sample manifest.json (v3, the latest Chrome extension standard):

{
  "manifest_version": 3,
  "name": "Keyword Highlighter & Counter",
  "version": "1.0",
  "description": "Highlight keywords and visualize their occurrence count",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

五、Beginner Tips #

1. Start small: Build a minimal version first (button triggers highlight + count), then add charts and mask layers later.
2. Use Chrome’s Developer Mode: Go to chrome://extensions/, enable Developer Mode, and load your unpacked extension folder to test in real time.
3. Prioritize the DOM modification approach first—it’s simpler and more reliable for most sites.

内容的提问来源于stack exchange，提问作者kevorski