Chrome开发者工具中出现额外div#cccTost元素的原因与解决

• Browser Extensions: Chrome extensions often inject elements into web pages for features like ad blocking, UI tweaks, or session management. This is the most likely cause for an element not present in your source code.
• Third-Party Scripts: If your editor includes external scripts (e.g., analytics tools, CDN-hosted dependencies, or embedded widgets), one of these could be injecting the element—even indirect dependencies might be responsible.
• System-Level Tools: Rare but possible: certain antivirus, privacy software, or network utilities can inject content into browser pages at the system level.

• Incognito Mode Check: Open your editor in Chrome's incognito window. Extensions are disabled by default here—if the element disappears, an extension is the culprit.
• Disable Extensions Individually: Go to chrome://extensions/, turn off extensions one by one, and reload your page to isolate which extension is adding the element.
• Audit Loaded Scripts: Use Chrome DevTools' Network tab to review all loaded scripts. Look for unfamiliar requests, then trace their execution to see if they modify the DOM.
• MutationObserver Debugging: Add this temporary script to log the call stack when the element is added, pinpointing the exact code responsible:

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    const addedNode = mutation.addedNodes[0];
    if (addedNode?.id === 'cccTost') {
      console.trace('cccTost element injected');
      observer.disconnect();
    }
  });
});

observer.observe(document.body, { childList: true });

• Extension-Related Injection: You can’t prevent extensions from modifying pages for end users, but you can detect and remove the element programmatically:

// Remove existing element immediately
const removeCccTost = () => {
  const elem = document.getElementById('cccTost');
  if (elem) elem.remove();
};

removeCccTost();

// Watch for future injections and remove them
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if ([...mutation.addedNodes].some(node => node.id === 'cccTost')) {
      removeCccTost();
    }
  });
});

observer.observe(document.body, { childList: true });

• Third-Party Script Injection: Identify the problematic script, remove it if unnecessary, replace it with a trusted version, or contact the script provider to report the issue.
• System-Level Injection: Update or uninstall suspicious software on your Windows 10 system, and ensure Chrome is running the latest stable version.

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