如何使用UserScripts修改Twitter页面标题（将X改回Twitter）？

算力阿峰

2026-7-15

解决Twitter页面标题修改失效问题

问题描述

尝试将Twitter（现更名为X）页面标题中的“X”改回“Twitter”，使用document.title方法不仅无法修改标题，连console.log都没有输出，原代码如下：

var title = document.title;
if (title.endsWith("/ X")) {
  var new_title = title.slice(0, -3) + "/ Twitter";
  document.title = new_title;
}

失效原因

执行时机过早：Twitter是单页应用，页面初始加载时标题还未被动态设置，此时document.title为空或默认值，代码逻辑无法触发。
未监听动态标题变化：页面切换时Twitter会自动更新标题，单次执行的代码无法处理后续的标题变更。
判断条件过于严格：标题中的格式可能存在空格差异（比如实际是 / X而非/ X），endsWith的精准匹配会导致判断失效。

修复方案

使用MutationObserver监听标题元素的动态变化，同时处理初始加载时的标题：

// 监听标题元素的内容变化
const titleObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    const currentTitle = document.title;
    console.log('当前标题:', currentTitle);
    // 匹配包含" / X"的标题，替换为" / Twitter"
    if (currentTitle.includes(' / X')) {
      const newTitle = currentTitle.replace(' / X', ' / Twitter');
      document.title = newTitle;
      console.log('修改后标题:', newTitle);
    }
  });
});

// 开始监听title元素
const titleElement = document.querySelector('title');
if (titleElement) {
  titleObserver.observe(titleElement, { childList: true });
}

// 处理页面初始加载时的标题
const initialTitle = document.title;
console.log('初始标题:', initialTitle);
if (initialTitle.includes(' / X')) {
  document.title = initialTitle.replace(' / X', ' / Twitter');
}