tiktok real verification badge
// ==UserScript==
// @name Tiktok Verification
// @namespace http://tampermonkey.net/
// @version 1.0
// @description tiktok real verification badge
// @author Bryan
// @match https://www.tiktok.com/*
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
// --- Configuration & State ---
let isBadgeEnabled = GM_getValue("tiktok_badge_enabled", true);
// Forced Reset on Refresh: Always visible, always unminimized, and default position
let isPanelMinimized = false;
let isPanelHidden = false;
GM_setValue("tiktok_panel_minimized", false);
GM_setValue("tiktok_panel_hidden", false);
// Exact TikTok Verification Badge SVG Layout with native alignment rules
const verificationBadgeHTML = `
<span class="custom-verify-icon-wrap" style="display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; vertical-align: middle; flex-shrink: 0; position: relative; z-index: 5; align-self: center;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 14px; height: 14px;">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4142 9.41421C17.7893 9.03914 17.7893 8.43085 17.4142 8.05578C17.0391 7.68071 16.4309 7.68071 16.0558 8.05578L10.5 13.6116L7.94422 11.0558C7.56915 10.6807 6.96086 10.6807 6.58579 11.0558C6.21072 11.4309 6.21072 12.0391 6.58579 12.4142L9.82081 15.6492C10.1959 16.0243 10.8041 16.0243 11.1792 15.6492L17.4142 9.41421Z" fill="#20D5EC"/>
</svg>
</span>
`;
// --- Dynamic DOM Injection ---
function injectBadge() {
if (!isBadgeEnabled) {
removeBadge();
return;
}
// 1. Profile Page Title Header Element
const profileHeader = document.querySelector('[data-e2e="user-title"]');
if (profileHeader && !profileHeader.querySelector('.custom-verify-icon-wrap')) {
profileHeader.style.display = 'inline-flex';
profileHeader.style.alignItems = 'center';
profileHeader.insertAdjacentHTML('beforeend', verificationBadgeHTML);
setupBadgeClick(profileHeader.querySelector('.custom-verify-icon-wrap'));
}
// 2. Video View Overlay Username Tags
const videoAuthorNames = document.querySelectorAll('[data-e2e="browse-username"], [data-e2e="user-unique-id"]');
videoAuthorNames.forEach(authorTag => {
if (authorTag && !authorTag.querySelector('.custom-verify-icon-wrap')) {
authorTag.style.display = 'inline-flex';
authorTag.style.alignItems = 'center';
authorTag.insertAdjacentHTML('beforeend', verificationBadgeHTML);
setupBadgeClick(authorTag.querySelector('.custom-verify-icon-wrap'));
}
});
}
function removeBadge() {
document.querySelectorAll('.custom-verify-icon-wrap').forEach(badge => badge.remove());
}
// --- Action Popup Build Overlay ---
function setupBadgeClick(badgeElement) {
badgeElement.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
let currentImgSrc = "https://www.tiktok.com/favicon.ico";
let currentDisplayName = "User Profile";
let currentHandle = "";
const avatarImg = document.querySelector('[data-e2e="user-avatar"] img, .tiktok-avatar img, [class*="Avatar"] img, img[class*="ImgAvatar"]');
if (avatarImg && avatarImg.src) currentImgSrc = avatarImg.src;
const titleEl = document.querySelector('[data-e2e="user-title"], h1[data-e2e="user-title"]');
if (titleEl) {
currentDisplayName = titleEl.textContent.replace("Verified", "").trim();
}
const subtitleEl = document.querySelector('[data-e2e="user-subtitle"], h2[data-e2e="user-subtitle"]');
if (subtitleEl) {
currentHandle = subtitleEl.textContent.trim();
} else {
const pathArr = window.location.pathname.split('/');
if (pathArr[1] && pathArr[1].startsWith('@')) {
currentHandle = pathArr[1];
}
}
const oldModal = document.getElementById('tiktok-verification-modal-page');
if (oldModal) oldModal.remove();
const modalPage = document.createElement('div');
modalPage.id = 'tiktok-verification-modal-page';
modalPage.innerHTML = `
<div class="modal-nav-bar">
<button class="modal-back-btn" id="modal-close-trigger">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="#161823"/>
</svg>
</button>
</div>
<div class="modal-main-view">
<div class="user-avatar-container">
<img src="${currentImgSrc}" alt="Avatar">
</div>
<div class="user-identity-box">
<span class="user-name-title">${currentDisplayName}</span>
${verificationBadgeHTML}
</div>
<div class="user-handle-subtitle">${currentHandle}</div>
<p class="verification-disclaimer">
This information may help you learn more about this account and keep our community authentic.
</p>
<a href="https://support.tiktok.com/en/using-tiktok/growing-your-audience/how-to-tell-if-an-account-is-verified-on-tiktok" target="_blank" class="verified-status-row">
<span class="status-left-txt">Verified</span>
<span class="status-right-arrow">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z" fill="#8A8B93"/>
</svg>
</span>
</a>
</div>
`;
document.body.appendChild(modalPage);
setTimeout(() => modalPage.classList.add('modal-active'), 10);
document.getElementById('modal-close-trigger').addEventListener('click', function(closeEvent) {
closeEvent.preventDefault();
closeEvent.stopPropagation();
modalPage.classList.remove('modal-active');
setTimeout(() => modalPage.remove(), 300);
});
}, true);
}
setInterval(injectBadge, 400);
// --- Control Menu Panel Setup ---
function createControlPanel() {
const uiContainer = document.createElement('div');
uiContainer.id = 'bryan-control-panel';
// Reset coordinate memory variables to enforce default alignment positions on reload
GM_setValue("panel_x", null);
GM_setValue("panel_y", null);
// Dynamic calculated positions (Default fallbacks)
const defaultX = window.innerWidth > 600 ? (window.innerWidth - 320) : 10;
const defaultY = window.innerHeight > 600 ? (window.innerHeight - 260) : 10;
uiContainer.style.left = defaultX + 'px';
uiContainer.style.top = defaultY + 'px';
uiContainer.innerHTML = `
<div class="panel-header" id="panel-drag-handle">
<div class="header-text">
<h3>Tiktok Verification</h3>
</div>
<div class="window-controls">
<button id="panel-minimize-btn" title="Minimize">−</button>
<button id="panel-close-btn" title="Close">×</button>
</div>
</div>
<div class="panel-collapsed-indicator" id="panel-restore-btn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4142 9.41421C17.7893 9.03914 17.7893 8.43085 17.4142 8.05578C17.0391 7.68071 16.4309 7.68071 16.0558 8.05578L10.5 13.6116L7.94422 11.0558C7.56915 10.6807 6.96086 10.6807 6.58579 11.0558C6.21072 11.4309 6.21072 12.0391 6.58579 12.4142L9.82081 15.6492C10.1959 16.0243 10.8041 16.0243 11.1792 15.6492L17.4142 9.41421Z" fill="#fff"/>
</svg>
</div>
<div class="panel-content-wrapper">
<div class="panel-body">
<label class="switch-container">
<div class="toggle-label-group">
<span class="main-toggle-txt">Enable Badge</span>
<span class="sub-toggle-txt">visual but identical to real badge and has all features a normal verification badge would have</span>
</div>
<div class="toggle-input-wrapper">
<input type="checkbox" id="badge-toggle" ${isBadgeEnabled ? 'checked' : ''}>
<span class="slider"></span>
</div>
</label>
<a href="https://discord.gg/sfebJYhTys" target="_blank" class="discord-btn">
<svg width="18" height="18" viewBox="0 0 127.14 96.36" fill="currentColor" style="flex-shrink: 0;">
<path d="M107.7,8.07A105.15,105.15,0,0,0,77.26,0a77.19,77.19,0,0,0-3.3,6.83A96.67,96.67,0,0,0,53.22,6.83,77.19,77.19,0,0,0,49.88,0,105.15,105.15,0,0,0,19.44,8.07C3.66,31.58-1.86,54.65,1,77.53A105.73,105.73,0,0,0,32,96.36a74.37,74.37,0,0,0,6.72-11A68.55,68.55,0,0,1,28,80.17c.95-.7,1.92-1.42,2.85-2.17a75.76,75.76,0,0,0,6.34,0c.93.75,1.9,1.47,2.85,2.17a68.4,68.4,0,0,1-10.74,5.16,77,77,0,0,0,6.72,11,105.73,105.73,0,0,0,31.05-18.83C129.42,50.2,123.38,27.35,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53S36.18,40.36,42.45,40.36,53.87,46,53.87,53,48.72,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.24,60,73.24,53S78.41,40.36,84.69,40.36,96.11,46,96.11,53,91,65.69,84.69,65.69Z"/>
</svg>
<span>Click here to join the discord</span>
</a>
<div class="discord-subtext">
real tiktok verification script soon join the discord if you want it.
</div>
<div class="pc-tip-notice">
tip f2 is to hide and toggle ui for PC users
</div>
</div>
<div class="panel-footer">Made by Bryan</div>
</div>
`;
document.body.appendChild(uiContainer);
// --- Interactive Button Event Handlers ---
document.getElementById('badge-toggle').addEventListener('change', function(e) {
isBadgeEnabled = e.target.checked;
GM_setValue("tiktok_badge_enabled", isBadgeEnabled);
if (!isBadgeEnabled) removeBadge();
});
document.getElementById('panel-minimize-btn').addEventListener('click', function(e) {
e.stopPropagation();
isPanelMinimized = true;
uiContainer.classList.add('minimized');
});
document.getElementById('panel-restore-btn').addEventListener('click', function() {
isPanelMinimized = false;
uiContainer.classList.remove('minimized');
});
document.getElementById('panel-close-btn').addEventListener('click', function(e) {
e.stopPropagation();
isPanelHidden = true;
uiContainer.classList.add('panel-hidden');
});
// --- PC Key Bind Config (Default: F2) ---
window.addEventListener('keydown', function(e) {
if (e.key === 'F2') {
e.preventDefault();
isPanelHidden = !isPanelHidden;
if (isPanelHidden) {
uiContainer.classList.add('panel-hidden');
} else {
uiContainer.classList.remove('panel-hidden');
}
}
});
setupDragging(uiContainer);
}
// --- Dragging Engine ---
function setupDragging(el) {
const handle = document.getElementById('panel-drag-handle');
const restoreBtn = document.getElementById('panel-restore-btn');
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
handle.onmousedown = dragMouseDown;
handle.ontouchstart = dragMouseDown;
restoreBtn.onmousedown = dragMouseDown;
restoreBtn.ontouchstart = dragMouseDown;
function dragMouseDown(e) {
if (e.target.tagName === 'BUTTON') return;
if (e.type !== 'touchstart') e.preventDefault();
const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
const clientY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;
pos3 = clientX;
pos4 = clientY;
document.onmouseup = closeDragElement;
document.ontouchend = closeDragElement;
document.onmousemove = elementDrag;
document.ontouchmove = elementDrag;
}
function elementDrag(e) {
const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
pos1 = pos3 - clientX;
pos2 = pos4 - clientY;
pos3 = clientX;
pos4 = clientY;
let finalTop = el.offsetTop - pos2;
let finalLeft = el.offsetLeft - pos1;
if (finalTop < 0) finalTop = 0;
if (finalLeft < 0) finalLeft = 0;
if (finalTop > window.innerHeight - el.offsetHeight) finalTop = window.innerHeight - el.offsetHeight;
if (finalLeft > window.innerWidth - el.offsetWidth) finalLeft = window.innerWidth - el.offsetWidth;
el.style.top = finalTop + "px";
el.style.left = finalLeft + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
document.ontouchend = null;
document.ontouchmove = null;
}
}
// --- Layout CSS Styles ---
const styles = `
#tiktok-verification-modal-page {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #F8F8F8;
z-index: 100000000;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
#tiktok-verification-modal-page.modal-active { transform: translateY(0); }
.modal-nav-bar { height: 56px; display: flex; align-items: center; padding: 0 16px; background: #FFFFFF; }
.modal-back-btn { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; }
.modal-main-view { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 24px 24px; text-align: center; }
.user-avatar-container { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin-bottom: 16px; background: #E1E1E1; }
.user-avatar-container img { width: 100%; height: 100%; object-fit: cover; }
.user-identity-box { display: flex; align-items: center; justify-content: center; }
.user-name-title { font-size: 20px; font-weight: 700; color: #161823; line-height: 24px; }
.user-handle-subtitle { font-size: 14px; color: #161823; opacity: 0.6; margin-top: 4px; margin-bottom: 20px; }
.verification-disclaimer { font-size: 14px; line-height: 20px; color: #5F6066; max-width: 290px; margin: 0 auto 28px auto; }
.verified-status-row { width: 100%; max-width: 345px; background: #FFFFFF; border-radius: 8px; padding: 16px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; box-sizing: border-box; transition: background 0.15s; }
.verified-status-row:active { background: #F1F1F1; }
.status-left-txt { font-size: 16px; font-weight: 700; color: #161823; }
.status-right-arrow { display: flex; align-items: center; }
/* Window Styling Controls Box */
#bryan-control-panel {
position: fixed;
width: 300px;
background: rgba(18, 18, 18, 0.94);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
color: #fff;
font-family: Arial, sans-serif;
z-index: 999999;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
overflow: hidden;
touch-action: none;
opacity: 1;
visibility: visible;
transition: opacity 0.15s, visibility 0.15s, width 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.25s;
}
#bryan-control-panel.panel-hidden {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.panel-header {
background: linear-gradient(90deg, #FE2C55, #25F4EE);
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: move;
}
.header-text { text-align: left; }
.panel-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.window-controls { display: flex; gap: 6px; }
.window-controls button {
background: rgba(0, 0, 0, 0.25);
border: none;
color: white;
font-size: 14px;
font-weight: 800;
width: 22px;
height: 22px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.window-controls button:hover { background: rgba(255, 255, 255, 0.2); }
#panel-close-btn:hover { background: #FE2C55; }
.panel-body { padding: 16px; }
.panel-content-wrapper { transition: max-height 0.2s ease, opacity 0.2s; }
.panel-collapsed-indicator { display: none; }
#bryan-control-panel.minimized {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #FE2C55, #25F4EE);
border: 2px solid white;
cursor: pointer;
box-shadow: 0 6px 20px rgba(254, 44, 85, 0.4);
}
#bryan-control-panel.minimized .panel-header,
#bryan-control-panel.minimized .panel-content-wrapper {
display: none !important;
}
#bryan-control-panel.minimized .panel-collapsed-indicator {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.switch-container { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 12px; }
.toggle-label-group { display: flex; flex-direction: column; text-align: left; max-width: 210px; }
.main-toggle-txt { font-size: 13px; font-weight: 700; color: #fff; }
.sub-toggle-txt { font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.55); margin-top: 4px; line-height: 14px; }
.toggle-input-wrapper { display: flex; align-items: center; padding-top: 2px; }
.switch-container input { display: none; }
.slider { position: relative; width: 42px; height: 22px; background-color: #2F2F2F; border-radius: 22px; cursor: pointer; transition: .25s; display: block; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .25s; }
input:checked + .slider { background-color: #FE2C55; }
input:checked + .slider:before { transform: translateX(20px); }
.discord-btn { display: flex; align-items: center; justify-content: center; text-align: center; gap: 8px; background-color: #5865F2; color: white; text-decoration: none; padding: 10px 14px; border-radius: 10px; font-size: 11px; font-weight: 700; transition: background-color 0.2s ease; }
.discord-btn:hover { background-color: #4752C4; }
.discord-subtext { margin-top: 10px; font-size: 11px; line-height: 15px; text-align: center; color: rgba(255, 255, 255, 0.7); font-weight: 500; font-style: italic; word-break: break-word; }
.pc-tip-notice { margin-top: 14px; font-size: 10px; line-height: 14px; text-align: center; color: rgba(255, 255, 255, 0.45); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.panel-footer { background: rgba(0, 0, 0, 0.4); padding: 10px; text-align: center; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.06); }
@media (max-width: 480px) {
#bryan-control-panel { width: 280px; }
.toggle-label-group { max-width: 190px; }
#bryan-control-panel.minimized { width: 48px; height: 48px; }
}
`;
const styleSheet = document.createElement("style");
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
createControlPanel();
})();