嘿，老铁们，今天咱聊点儿掘金的玩意儿。

我叫小饼干，偶尔在社区里刷到一堆“这人真是……”“这文章太水”之类的评论。

说实话，我忍不住想给这些人贴个标签。

于是我撸起袖子，写了个油猴脚本，给掘金加上用户标签功Neng。

先说背景吧。

掘金是技术人的聚集地，大家dou爱秀代码、分享经验。

可是评论区有时候会被几个爱抬杠的刷屏。

我想，一眼就Nengkan出谁是靠谱作者，谁是键盘侠，那多省心啊。

标签这种东西，本质上就是把用户画像化，让信息检索geng精准。

对企业来说它Neng帮助精准营销、用户生命周期管理、交叉销售……

对我们普通开发者来说就是省事儿，让 UI geng友好。

先说说选用了什么技术栈。

油猴+ 原生 JavaScript + MutationObserver。

别kan它们听起来hen官方，其实写起来跟写普通脚本没区别。

主要用到的 API 有 GM_setValue、GM_getValue 用来本地存储标签数据。

还有 DOMParser 把页面结构转成可遍历的节点树。

Zui关键的，是 MutationObserver，用来监听页面 DOM 的增删改，让标签随时保持同步。

先说整体流程吧，别一次性塞太多信息，我怕你跟不上节奏。

脚本加载后会判断 document.readyState 是 loading 还是 complete。

Ru果是 loading，就挂一个 DOMContentLoaded 事件；Ru果Yi经 complete，就直接初始化主控制器。

Main Controller 包括：

TagDisplayManager：负责把标签渲染到页面上；

PageObserver：负责监控页面变化；

AddButtons：在用户主页和文章列表里插入“添加标签”按钮；

当检测到用户主页时会在用户信息区域下面插入一个小按钮。

点一下弹出 Modal，对话框里Ke以输入标签名称和颜色。

保存后通过 GM_setValue 把 {userId: } 这种结构存下来。

随后触发自定义事件 tagsUpdated，TagDisplayManager 收到后重新渲染对应位置的标签块。

1️⃣ 用户 ID 的获取不是直接暴露在页面里需要从个人主页链接的 href 中正则抽取出来。代码大概是：

const match = location.pathname.match/);
const userId = match ? match : null;

别忘了判断一下 match 是否为空，不然报错就尴尬了。

2️⃣ 标签的样式Zui好写成 scoped CSS，避免污染全局。比如：

.juejin-user-tag {
  display:inline-block;
  padding:2px 6px;
  margin-left:4px;
  border-radius:4px;
  font-size:12px;
  color:#fff;
}

3️⃣ 页面切换时不会触发 reload，需要靠 MutationObserver 捕获 URL 改变或新节点插入的时机。否则新打开的文章列表里根本没有标签按钮，那就白忙活啦！

# 那个那个，你可Neng会好奇，我这篇文章放在掘金上，也会被搜索引擎抓取吗？

# 实际上，百度有时候会因为以下原因不收录：

Crawl Budget不足：Baidu 会优先抓取权重高的网站，Ru果你的页面geng新频率低或者外链少，它可Neng就被跳过啦；

Sitemap 配置错误：Sitemap.xml 写错路径或者缺少必要字段，也会导致爬虫找不到页面；

Noindex 元标签或 robots.txt 禁止：A 标签里误加了 或者 robots.txt 拦住了 /user/ 路径，这些dou会让百度闭门不进去；

# 所以Ru果你想让自己的油猴脚本文档被百度收录，一定要检查以上几点哦~ 哈哈，你懂的！

// 主入口
 {
  'use strict';
  if  {
    document.addEventListener;
  } else {
    init;
  }
});
function init {
  createTagManager;
}
// 创建管理器
function createTagManager {
  // 初始化存储
  const TAG_KEY = 'juejin_user_tags';
  const getTags =  => GM_getValue;
  const setTags =  => GM_setValue;
  // 添加按钮
  addTagButton;
  // 页面观察
  observeMutations;
}
// 添加“添加标签”按钮
function addTagButton {
  const profileArea = document.querySelector;
  if  return;
  const btn = document.createElement;
  btn.textContent = '加标签';
  btn.style.marginLeft = '8px';
  btn.addEventListener => openTagModal);
  profileArea.appendChild;
}
// 打开弹窗
function openTagModal {
   const modal = document.createElement;
   modal.innerHTML = `
     

     

       
       
       保存
     
`;
   document.body.appendChild;
   document.getElementById.onclick =  => {
     const name = document.getElementById.value.trim;
     const color = document.getElementById.value;
     if  saveCurrentUserTag;
     modal.remove;
   };
}
// 保存当前用户标签
function saveCurrentUserTag {
   const userId = extractUserIdFromUrl;
   if  return;
   const tags = getTags;
   if  tags = ;
   tags.push;
   setTags;
   renderTags;
}
// 渲染标签
function renderTags {
   const container = document.querySelector;
   if  return;
   // 清理旧标签
   container.querySelectorAll.forEach);
   const tags = getTags || ;
   tags.forEach(t => {
      const span = document.createElement;
      span.className='juejin-user-tag';
      span.textContent=t.name;
      span.style.backgroundColor=t.color;
      container.appendChild;
   });
}
// 页面变化监听
function observeMutations {
   const observer = new MutationObserver(mutations => {
      mutations.forEach(m => {
         if  checkAndInject;
      });
   });
   observer.observe;
}
function checkAndInject{
    // 判断是否在用户页并注入按钮/渲染标签
    if ) {
        addTagButton;
        renderTags);
    }
}
function extractUserIdFromUrl{
    const m=location.pathname.match/);
    return m?m:null;
}

# 第一步：打开浏览器 商店装好 Tampermonkey。

# 第二步：新建脚本，把上面的完整代码粘进去。记得把 @match 改成 https://juejin.cn/* ，这样才Neng在掘金所有子页生效。

# 第三步：保存并刷新掘金任意页面你会kan到个人资料旁边多了一个 “加标签” 按钮。点一下弹框输入内容——就是这么简单！

颜色自定义：# 想让不同类型的人用不同颜色区分？直接在弹框里挑颜色即可；

DARK MODE 支持：# 给 .juejin-user-tag 加上 mix-blend-mode: difference; 就Neng自动适配暗色主题；

L10N 本地化：# Ru果你想把 UI 文案改成英文，只需要改掉 button.textContent 和 placeholder 即可；

# 前端其实Ke以自己动手把产品功Neng塞进Yi有网站，只要懂点儿 DOM 操作和浏览器存储，就Neng实现不少“小工具”。

# 再者，别小kan MutationObserver，它Neng帮你解决 SPA 场景下 UI 同步的问题，比轮询省hen多 CPU。

# Zui后也是Zui重要的一点——Zuo这些东西不是为了炫技，而是为了提升自己的阅读体验，让社交平台geng符合自己的需求。