开发Chrome扩展时读取DOM获Vue模板变量而非实际值，如何获取真实值？

1. 等待DOM完全渲染后执行脚本 #

Vue是异步渲染框架，若扩展脚本执行时机过早，会读取到未渲染的模板变量。

• 在manifest.json中显式设置内容脚本的执行时机为document_idle，确保页面资源加载完成、Vue渲染完毕后再运行：

"content_scripts": [
  {
    "matches": ["https://目标网站域名/*"],
    "js": ["content.js"],
    "run_at": "document_idle"
  }
]

• 若需要更精准的时机，可使用MutationObserver监听目标元素的变化，直到渲染出真实内容：

const titleElement = document.querySelector('.page-title-text');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    const content = titleElement.textContent.trim();
    if (content && !content.includes('{{')) {
      console.log('真实商品标题:', content);
      observer.disconnect(); // 获取到内容后停止监听
    }
  });
});

observer.observe(titleElement, { childList: true, subtree: true });

2. 读取元素的文本/属性而非HTML源码 #

不要用innerHTML获取内容，直接使用textContent（或innerText）读取渲染后的真实文本；对于<a>标签，直接读取href属性即可拿到动态绑定后的真实链接：

// 获取商品标题
const productTitle = document.querySelector('.page-title-text').textContent.trim();

// 获取a标签的真实链接
const realHref = document.querySelector('a.target-link').href;

3. 避免获取原始HTML源码 #

如果你的扩展是通过fetch请求页面原始HTML，或是读取document.documentElement.innerHTML，得到的必然是未渲染的Vue模板。正确方式是直接操作渲染后的DOM节点，通过querySelector等API定位元素后读取对应值。

补充：利用v-cloak判断渲染状态 #

如果目标网站使用了Vue的v-cloak指令隐藏未渲染模板，可通过检查该类是否存在来判断渲染完成：

function fetchRealTitle() {
  const titleEl = document.querySelector('.page-title-text');
  if (titleEl && !titleEl.classList.contains('v-cloak') && titleEl.textContent.trim()) {
    return titleEl.textContent.trim();
  }
  setTimeout(fetchRealTitle, 100); // 间隔重试，直到拿到真实内容
}

const realTitle = fetchRealTitle();

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