如何开发始终在标签页标题前显示当前时间的Chrome/Edge扩展？

1. 搭建扩展基础文件结构 #

创建一个文件夹（比如命名为title-time-extension），里面只需两个核心文件：

• manifest.json：扩展配置文件，用于定义扩展的基本信息和运行规则
• titleUpdater.js：负责修改标签页标题的核心脚本

2. 配置manifest.json（采用Manifest V3标准，适配Chrome/Edge最新版本） #

将以下代码复制到manifest.json中：

{
  "manifest_version": 3,
  "name": "标题前置时间",
  "version": "1.0",
  "description": "在标签页标题前显示实时时间",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["titleUpdater.js"],
      "run_at": "document_start"
    }
  ],
  "permissions": []
}

说明：matches指定脚本对所有网页生效，run_at设为document_start能让脚本尽早启动，避免页面加载后才显示时间。

3. 编写核心逻辑脚本titleUpdater.js #

将以下代码复制到titleUpdater.js中：

let originalTitle = document.title;
let updateTimer = null;

// 生成格式化时间字符串，当前为HH:mm:ss格式，可自行修改
function getFormattedTime() {
  const now = new Date();
  return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
}

// 更新标题：将时间拼接在原标题前方
function updateTitle() {
  const currentTime = getFormattedTime();
  document.title = `${currentTime} ${originalTitle}`;
}

// 监听页面原生标题变化（比如视频网站播放状态更新、网页跳转），同步更新原标题
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.target === document && mutation.attributeName === 'title') {
      const newTitle = document.title;
      // 避免循环触发：仅当新标题不是我们添加时间后的版本时，更新原标题
      if (!newTitle.startsWith(getFormattedTime())) {
        originalTitle = newTitle;
        updateTitle();
      }
    }
  });
});

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

// 初始化更新标题，之后每秒刷新一次时间
updateTitle();
updateTimer = setInterval(updateTitle, 1000);

// 页面卸载时清理定时器和监听，避免内存浪费
window.addEventListener('beforeunload', () => {
  clearInterval(updateTimer);
  observer.disconnect();
});

说明：

• 时间格式可自定义，比如要显示日期可改成${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${...}
• MutationObserver用于解决页面自身修改标题后时间消失的问题，确保时间始终显示
• 每秒更新一次时间，保证标题上的时间实时同步

4. 加载扩展并测试 #

• 打开Chrome/Edge浏览器，输入chrome://extensions/（Chrome）或edge://extensions/（Edge）进入扩展管理页面
• 开启右上角的「开发者模式」开关
• 点击「加载已解压的扩展程序」，选择你创建的title-time-extension文件夹
• 打开任意网页，即可看到标签页标题前显示实时时间

可选优化方向 #

• 添加开关控制：制作popup页面，让用户可随时开启/关闭时间显示功能
• 自定义时间格式：新增设置页面，允许用户选择偏好的时间显示格式
• 排除特定网站：在manifest.json的content_scripts中添加exclude_matches字段，指定无需生效的网站（例如["*://*.youtube.com/*"]）

内容的提问来源于stack exchange，提问作者else42.de