429 lines
14 KiB
JavaScript
429 lines
14 KiB
JavaScript
const PERSON_ID_PREFIX = 'chat-topic-person-';
|
||
const ICON_ID_PREFIX = "presence-pill-";
|
||
const CHAT_ROSTER_PREFIX = "chat-roster-item-name-";
|
||
const SUGGEST_PEOPLE_PREFIX = "AUTOSUGGEST_SUGGESTION_PEOPLE";
|
||
const ROSTER_AVATAR_PREFIX = "roster-avatar-img-";
|
||
const SERP_PEOPLE_CARD_PREFIX = "serp-people-card-content-";
|
||
const PEOPLE_PICKER_PREFIX = "people-picker-entry-";
|
||
const PEOPLE_PICKER_SEL_PREFIX = "people-picker-selected-user-";
|
||
let debounceTimer = null;
|
||
let isMutating = false;
|
||
|
||
async function saveAlias(id, alias) {
|
||
const key = id.replace(PERSON_ID_PREFIX, "");
|
||
const result = await chrome.storage.local.get('aliases');
|
||
const aliases = result.aliases || {};
|
||
// 新的别名为空就删除
|
||
if (alias) {
|
||
aliases[key] = alias;
|
||
} else {
|
||
delete aliases[key];
|
||
}
|
||
await chrome.storage.local.set({ aliases });
|
||
}
|
||
|
||
async function getAlias(id) {
|
||
const key = id.replace(PERSON_ID_PREFIX, "");
|
||
const result = await chrome.storage.local.get('aliases');
|
||
const aliases = result.aliases || {};
|
||
return aliases[key] || null;
|
||
}
|
||
|
||
// 设置别名显示 + 按钮添加
|
||
function applyAliasAndButton(el) {
|
||
const id = el.id;
|
||
if (!id || !id.startsWith(PERSON_ID_PREFIX)) return;
|
||
|
||
const existingBtn = document.querySelector(`[data-floating-btn-for="${id}"]`);
|
||
if (!existingBtn) {
|
||
const rect = el.getBoundingClientRect();
|
||
|
||
const button = document.createElement('button');
|
||
button.textContent = '设置别名';
|
||
button.style.position = 'fixed';
|
||
button.style.left = `${rect.left + window.scrollX}px`;
|
||
button.style.top = `${rect.bottom + window.scrollY + 20}px`;
|
||
button.style.zIndex = '99999';
|
||
button.style.padding = '4px 8px';
|
||
button.style.fontSize = '12px';
|
||
button.style.backgroundColor = '#0078d4';
|
||
button.style.color = '#fff';
|
||
button.style.border = 'none';
|
||
button.style.borderRadius = '4px';
|
||
button.style.cursor = 'pointer';
|
||
button.setAttribute('data-floating-btn-for', id);
|
||
|
||
button.addEventListener('click', async () => {
|
||
const current = (await getAlias(id.replace(PERSON_ID_PREFIX, ""))) || document.getElementById(id)?.textContent || '';
|
||
const newAlias = prompt("请输入别名：", current);
|
||
// 如果是空字符串还是得进入
|
||
if (newAlias !== null) {
|
||
const el = document.getElementById(id); // 🔥 重新获取最新的元素
|
||
if (el && newAlias) el.textContent = newAlias.trim();
|
||
await saveAlias(id.replace(PERSON_ID_PREFIX, ""), newAlias.trim());
|
||
}
|
||
if (newAlias === "") {
|
||
alert("别名已删除");
|
||
}
|
||
});
|
||
|
||
document.body.appendChild(button);
|
||
}
|
||
|
||
// 应用别名（异步）
|
||
getAlias(id.replace(PERSON_ID_PREFIX, "")).then(alias => {
|
||
if (alias && el.textContent !== alias) {
|
||
el.textContent = alias;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 主要查找右侧消息列表中的名字并修改
|
||
function applyRightChatAlias(el) {
|
||
let id = el.id;
|
||
if (!id || !id.startsWith(ICON_ID_PREFIX)) return;
|
||
|
||
let parent = el;
|
||
// 向上查找 4 个父元素
|
||
for (let i = 0; i < 4; i++) {
|
||
if (parent.parentElement) {
|
||
parent = parent.parentElement;
|
||
} else {
|
||
return; // 如果不足4层，就跳过
|
||
}
|
||
}
|
||
|
||
// 获取前一个兄弟元素
|
||
const prevSibling = parent.previousElementSibling;
|
||
if (!prevSibling) return;
|
||
|
||
// 向下查找第 4 个子元素（层级式）
|
||
let target = prevSibling;
|
||
for (let i = 0; i < 4; i++) {
|
||
if (target.children.length > 0) {
|
||
target = target.children[0]; // 每层往下取第一个子元素
|
||
} else {
|
||
return; // 不足4层，跳过
|
||
}
|
||
}
|
||
// 判断符合才修改
|
||
if (target.getAttribute('data-tid') === 'message-author-name') {
|
||
getAlias(id.replace(ICON_ID_PREFIX, "")).then(alias => {
|
||
if (alias && target.textContent !== alias) {
|
||
target.textContent = alias;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 主要查找左侧消息列表中的名字并修改
|
||
function applyLeftChatAlias(el) {
|
||
let id = el.id;
|
||
if (!id || !id.startsWith(ICON_ID_PREFIX)) return;
|
||
|
||
let parent = el;
|
||
// 向上查找 3 个父元素
|
||
for (let i = 0; i < 3; i++) {
|
||
if (parent.parentElement) {
|
||
parent = parent.parentElement;
|
||
} else {
|
||
return; // 如果不足3层，就跳过
|
||
}
|
||
}
|
||
|
||
// 获取后一个兄弟元素
|
||
const nextSibling = parent.nextElementSibling;
|
||
if (!nextSibling) return;
|
||
|
||
// 向下查找第 2 个子元素（层级式）
|
||
let target = nextSibling;
|
||
for (let i = 0; i < 2; i++) {
|
||
if (target.children.length > 0) {
|
||
target = target.children[0]; // 每层往下取第一个子元素
|
||
} else {
|
||
return; // 不足2层，跳过
|
||
}
|
||
}
|
||
// 判断符合才修改
|
||
if (target.getAttribute('data-tid') === 'chat-list-item-title') {
|
||
getAlias(id.replace(ICON_ID_PREFIX, "")).then(alias => {
|
||
if (alias && target.textContent !== alias) {
|
||
target.textContent = alias;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 修改群组人员的名称
|
||
function applyChatRosterAlias(el) {
|
||
let id = el.id;
|
||
if (!id || !id.startsWith(CHAT_ROSTER_PREFIX)) return;
|
||
|
||
getAlias(id.replace(CHAT_ROSTER_PREFIX, "")).then(alias => {
|
||
if (alias && el.textContent !== alias) {
|
||
el.textContent = alias;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 群组添加人员的别名
|
||
function applyPeoplePickerAlias(el) {
|
||
let tid = el.getAttribute('data-tid');
|
||
if (!tid || !tid.startsWith(PEOPLE_PICKER_PREFIX)) return;
|
||
|
||
let child = el.children[1];
|
||
// 向下查找第 3 个子元素（层级式）
|
||
for (let i = 0; i < 3; i++) {
|
||
if (child.children.length > 0) {
|
||
child = child.children[0]; // 每层往下取第一个子元素
|
||
} else {
|
||
return; // 不足3层，跳过
|
||
}
|
||
}
|
||
if (child.tagName.toLowerCase() === 'span') {
|
||
let id = "8:" + tid.replace(PEOPLE_PICKER_PREFIX, "");
|
||
getAlias(id).then(alias => {
|
||
if (alias && child.textContent !== alias) {
|
||
child.textContent = alias;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 群组添加人员时选中的人员
|
||
function applyPeoplePickerSelectedAlias(el) {
|
||
let tid = el.getAttribute('data-tid');
|
||
if (!tid || !tid.startsWith(PEOPLE_PICKER_SEL_PREFIX)) return;
|
||
|
||
let id = "8:" + tid.replace(PEOPLE_PICKER_SEL_PREFIX, "");
|
||
getAlias(id).then(alias => {
|
||
if (alias && el.textContent !== alias) {
|
||
el.textContent = alias;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 追加搜索框中的人员别名
|
||
function applySuggestPeopleAlias(el) {
|
||
let tid = el.getAttribute('data-tid');
|
||
if (!tid || !tid.startsWith(SUGGEST_PEOPLE_PREFIX)) return;
|
||
|
||
let child = el.children[1]; // 第二个子元素
|
||
// 向下查找第 2 个子元素（层级式）
|
||
for (let i = 0; i < 2; i++) {
|
||
if (child.children.length > 0) {
|
||
child = child.children[0]; // 每层往下取第一个子元素
|
||
} else {
|
||
return; // 不足2层，跳过
|
||
}
|
||
}
|
||
if (child.getAttribute('data-tid') !== 'AUTOSUGGEST_SUGGESTION_TITLE') return;
|
||
|
||
let id = tid.replace(SUGGEST_PEOPLE_PREFIX, "");
|
||
getAlias(id).then(alias => {
|
||
if (alias) {
|
||
let lastSpan = child.lastElementChild;
|
||
if (lastSpan.id.startsWith("suggest-alias-attached")) {
|
||
if (lastSpan.textContent === `[${alias}]`) return;
|
||
lastSpan.textContent = `[${alias}]`;
|
||
} else {
|
||
const span = document.createElement('span');
|
||
span.id = `suggest-alias-attached-${id}`;
|
||
span.textContent = `[${alias}]`;
|
||
span.style.marginLeft = '4px';
|
||
span.style.color = document.documentElement.classList.contains("theme-tfl-default") ? '#ed0833' : '#78ef0b';
|
||
child.appendChild(span);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 追加人员搜索中的别名
|
||
function applySerpPeopleAlias(el) {
|
||
let id = el.id;
|
||
if (!id || !id.startsWith(SERP_PEOPLE_CARD_PREFIX)) return;
|
||
|
||
let child = el.children[2];
|
||
// 向下查找第 4 个子元素（层级式）
|
||
for (let i = 0; i < 4; i++) {
|
||
if (child.children.length > 0) {
|
||
child = child.children[0]; // 每层往下取第一个子元素
|
||
} else {
|
||
return; // 不足4层，跳过
|
||
}
|
||
}
|
||
|
||
id = id.replace(SERP_PEOPLE_CARD_PREFIX, "");
|
||
getAlias(id).then(alias => {
|
||
if (alias) {
|
||
let lastSpan = child.lastElementChild;
|
||
if (lastSpan.id.startsWith("people-card-attached")) {
|
||
if (lastSpan.textContent === `[${alias}]`) return;
|
||
lastSpan.textContent = `[${alias}]`;
|
||
} else {
|
||
const span = document.createElement('span');
|
||
span.id = `people-card-attached-${id}`;
|
||
span.textContent = `[${alias}]`;
|
||
span.style.marginLeft = '4px';
|
||
span.style.color = document.documentElement.classList.contains("theme-tfl-default") ? '#ed0833' : '#78ef0b';
|
||
child.appendChild(span);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 修改通话中的人名
|
||
function applyCallingAlias(el) {
|
||
if (el.getAttribute('data-cid') !== 'calling-participant-stream') return;
|
||
|
||
let child = el.children[1];
|
||
// 向下查找第 5 个子元素（层级式）
|
||
for (let i = 0; i < 5; i++) {
|
||
if (child.children.length > 0) {
|
||
child = child.children[0]; // 每层往下取第一个子元素
|
||
} else {
|
||
return; // 不足5层，跳过
|
||
}
|
||
}
|
||
if (child.tagName.toLowerCase() === 'span') {
|
||
getAlias(el.getAttribute('data-acc-element-id')).then(alias => {
|
||
if (alias && child.textContent !== alias) {
|
||
child.textContent = alias;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 修改通话右侧人名的别名
|
||
function applyRosterAvatarAlias(el) {
|
||
let id = el.id;
|
||
if (!id || !id.startsWith(ROSTER_AVATAR_PREFIX)) return;
|
||
|
||
getAlias(id.replace(ROSTER_AVATAR_PREFIX, "")).then(alias => {
|
||
if (alias && el.textContent !== alias) {
|
||
el.textContent = alias;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 查看此通话中的人员
|
||
function applyPeopleInCall(el) {
|
||
let id = el.id;
|
||
if (!id || !id.startsWith(ICON_ID_PREFIX)) return;
|
||
|
||
let parent = el;
|
||
// 向上查找 2 个父元素
|
||
for (let i = 0; i < 2; i++) {
|
||
if (parent.parentElement) {
|
||
parent = parent.parentElement;
|
||
} else {
|
||
return; // 如果不足2层，就跳过
|
||
}
|
||
}
|
||
// 一个是查看此通话中的参与者，一个是呼叫其他人加入
|
||
if ([
|
||
"audio_dropin_add_participants_dialog_renderer",
|
||
"audio-drop-in-live-roster"
|
||
].includes(parent.getAttribute("data-tid"))) {
|
||
let target = parent.nextElementSibling;
|
||
if (!target) return;
|
||
if (target.tagName.toLowerCase() === "span") {
|
||
getAlias(id.replace(ICON_ID_PREFIX, "")).then(alias => {
|
||
if (alias && target.textContent !== alias) {
|
||
target.textContent = alias;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// 回应表情的人员别名
|
||
function applyReactionAlias(el) {
|
||
if (el.getAttribute('data-tid') !== 'diverse-reaction-user-list-item') return;
|
||
try {
|
||
const tabster = JSON.parse(el.getAttribute("data-tabster"));
|
||
|
||
let child = el.children[1];
|
||
let target = child.children[0];
|
||
let id = tabster.observed.names[0];
|
||
getAlias(id).then(alias => {
|
||
if (alias && target.textContent !== alias) {
|
||
target.textContent = alias;
|
||
}
|
||
});
|
||
|
||
} catch (error) {}
|
||
}
|
||
|
||
// 查找所有目标元素应用别名和按钮
|
||
function applyToAll() {
|
||
document.querySelectorAll('[data-floating-btn-for]').forEach(btn => btn.remove());
|
||
|
||
const allPersons = document.querySelectorAll(`[id^="${PERSON_ID_PREFIX}"]`);
|
||
allPersons.forEach(el => applyAliasAndButton(el));
|
||
|
||
const allIcons = document.querySelectorAll(`[id^="${ICON_ID_PREFIX}"]`);
|
||
allIcons.forEach(el => {
|
||
applyRightChatAlias(el);
|
||
applyLeftChatAlias(el);
|
||
applyPeopleInCall(el);
|
||
});
|
||
|
||
const allChatRoster = document.querySelectorAll(`[id^="${CHAT_ROSTER_PREFIX}"]`);
|
||
allChatRoster.forEach(el => applyChatRosterAlias(el));
|
||
|
||
const allSuggestPeople = document.querySelectorAll(`[data-tid^="${SUGGEST_PEOPLE_PREFIX}"]`);
|
||
allSuggestPeople.forEach(el => applySuggestPeopleAlias(el));
|
||
|
||
const allCalling = document.querySelectorAll(`[data-cid="calling-participant-stream"]`);
|
||
allCalling.forEach(el => applyCallingAlias(el));
|
||
|
||
const allRosterAvatar = document.querySelectorAll(`[id^="${ROSTER_AVATAR_PREFIX}"]`);
|
||
allRosterAvatar.forEach(el => applyRosterAvatarAlias(el));
|
||
|
||
const allSerpPeople = document.querySelectorAll(`[id^="${SERP_PEOPLE_CARD_PREFIX}"]`);
|
||
allSerpPeople.forEach(el => applySerpPeopleAlias(el));
|
||
|
||
const allPeoplePicker = document.querySelectorAll(`[data-tid^="${PEOPLE_PICKER_PREFIX}"]`);
|
||
allPeoplePicker.forEach(el => applyPeoplePickerAlias(el));
|
||
|
||
const allPeoplePickerSelected = document.querySelectorAll(`[data-tid^="${PEOPLE_PICKER_SEL_PREFIX}"]`);
|
||
allPeoplePickerSelected.forEach(el => applyPeoplePickerSelectedAlias(el));
|
||
|
||
const allReaction = document.querySelectorAll(`[data-tid="diverse-reaction-user-list-item"]`);
|
||
allReaction.forEach(el => applyReactionAlias(el));
|
||
}
|
||
|
||
// 初始化逻辑
|
||
function init() {
|
||
const observer = new MutationObserver(() => {
|
||
clearTimeout(debounceTimer);
|
||
debounceTimer = setTimeout(() => {
|
||
if (isMutating) return; // 🧠 防止自己触发自己
|
||
isMutating = true;
|
||
|
||
applyToAll(); // 页面内容变动后重新应用
|
||
|
||
// 给浏览器一点时间完成 DOM 更新后再允许 observer 响应
|
||
setTimeout(() => {
|
||
isMutating = false;
|
||
}, 500); // 至少比这个高才行，不然会一直触发
|
||
}, 300);
|
||
});
|
||
|
||
observer.observe(document.body, {
|
||
childList: true,
|
||
subtree: true,
|
||
});
|
||
|
||
applyToAll(); // 初始执行
|
||
|
||
// 兜底：每 2 秒再扫一次（避免漏掉异步更新）
|
||
// setInterval(() => {
|
||
// applyToAll();
|
||
// }, 2000);
|
||
}
|
||
|
||
init();
|