无需刷新页面，实现Chrome Extension语言切换后自动获取更新数据

方案1：直接监听语言切换控件的交互事件 #

如果页面存在明确的语言切换触发元素（比如下拉选择框、切换按钮），直接给这些元素绑定事件监听，触发后立即重新获取对应语言的数据。

示例代码（content script中）：

// 假设语言切换是一个下拉选择器，选择器为#lang-select
const langSelect = document.querySelector('#lang-select');
if (langSelect) {
  langSelect.addEventListener('change', () => {
    // 调用你的数据获取函数，更新页面内容
    fetchLanguageData(langSelect.value);
  });
}

// 如果切换按钮是动态生成的，用事件委托避免绑定失效
document.body.addEventListener('click', (e) => {
  if (e.target.classList.contains('lang-switch-btn')) {
    const targetLang = e.target.dataset.lang;
    fetchLanguageData(targetLang);
  }
});

方案2：修正Mutation Observer的监听逻辑 #

如果之前用Mutation Observer失败，大概率是监听目标节点或属性不对。重点监听页面语言标识的变化（比如<html>标签的lang属性，或页面内显示当前语言的元素）。

示例代码（监听<html>的lang属性）：

const langObserver = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.attributeName === 'lang') {
      const newLang = document.documentElement.lang;
      fetchLanguageData(newLang);
      break;
    }
  }
});

// 启动监听，只监听lang属性提升性能
langObserver.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['lang']
});

如果语言切换后修改的是页面内特定元素的语言标识文本：

const langElement = document.querySelector('.current-lang');
if (langElement) {
  const contentObserver = new MutationObserver((mutations) => {
    const newLang = langElement.textContent.trim();
    fetchLanguageData(newLang);
  });

  contentObserver.observe(langElement, {
    childList: true,
    subtree: true
  });
}

方案3：监听Chrome扩展存储或设置变化 #

如果你的扩展是通过Chrome存储（chrome.storage）保存当前语言设置，可直接监听存储变化，触发数据更新。

在background script中监听存储变化： #

chrome.storage.onChanged.addListener((changes, areaName) => {
  // 假设当前语言存在local存储的currentLang字段中
  if (areaName === 'local' && changes.currentLang) {
    const newLang = changes.currentLang.newValue;
    // 通知当前活跃标签页的content script更新数据
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, {action: 'updateLangData', lang: newLang});
    });
  }
});

在content script中接收消息并更新： #

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'updateLangData') {
    fetchLanguageData(request.lang);
    sendResponse({status: 'updated'});
  }
});

方案4：备选方案——短间隔轮询（不推荐） #

如果以上方法都无法捕获语言切换事件，可采用轮询方式定期检查语言状态变化（仅作为最后备选，因为会消耗少量性能）。

let currentLang = document.documentElement.lang;
// 每500ms检查一次，可根据需求调整间隔
setInterval(() => {
  const newLang = document.documentElement.lang;
  if (newLang !== currentLang) {
    currentLang = newLang;
    fetchLanguageData(newLang);
  }
}, 500);

关键注意点 #

• 确保fetchLanguageData函数是可重复调用的，且调用时会替换页面上的旧数据，而不是追加。
• 如果页面内容是动态渲染的，需要确保数据更新后能正确覆盖原有内容。

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