TikTok 小助手
// ==UserScript==
// @name TikTok 小助手
// @namespace http://tampermonkey.net/
// @version 5.36
// @description 获取 TikTok 数据并显示精简用户界面！
// @connect *
// @author belugua
// @match *://*/*
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_getResourceText
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @grant GM_setClipboard
// @connect tiktok.com
// @icon https://iili.io/dy5xjOg.jpg
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/toastify-js/1.12.0/toastify.min.js
// @resource TOASTIFY_CSS https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css
// ==/UserScript==
(function() {
'use strict';
console.log('Script loaded successfully');
// 加载 Toastify.js 的 CSS
GM_addStyle(GM_getResourceText('TOASTIFY_CSS'));
// 默认设置：页面加载时是否自动显示数据面板
let autoShowDataPanel = GM_getValue('autoShowDataPanel', false);
console.log('Initial autoShowDataPanel:', autoShowDataPanel);
// 注册菜单命令，切换是否自动显示数据面板
GM_registerMenuCommand('切换自动弹出数据面板', () => {
autoShowDataPanel = !autoShowDataPanel;
GM_setValue('autoShowDataPanel', autoShowDataPanel);
alert(`自动弹出数据面板已${autoShowDataPanel ? '启用' : '禁用'}`);
console.log('Toggled autoShowDataPanel to:', autoShowDataPanel);
});
$(document).ready(function() {
console.log('Document ready');
if (autoShowDataPanel) {
initializeInterface();
}
// 监听快捷键 Alt+N 来手动打开或关闭界面
$(document).on('keydown', function(e) {
if (e.altKey && e.key === 'g') {
console.log('Alt+G pressed');
toggleInterface();
}
});
});
function initializeInterface() {
console.log('Initializing interface');
if ($('#tiktok-data-ui').length) {
console.log('Interface already initialized');
return;
}
const container = $(
`<div id="tiktok-data-ui" style="
position:fixed;
top:20px;
right:-350px;
background: rgba(255, 255, 255, 0.7);
color:black;
border:1px solid #ccc;
padding:15px;
z-index:10000;
width:300px;
border-radius:10px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
">
<div id="drag-handle" style="display: flex; justify-content: space-between; align-items: center; cursor: move;">
<h3 style="color:black; margin:0; text-align:center; width:100%;">TikTok 数据面板</h3>
</div>
<div id="input-area" style="margin-top:10px; width: 100%;">
<input type="text" id="tiktok-url-input" placeholder="输入 TikTok 视频或用户名" style="
width: 100%;
padding:5px;
margin: 0;
border: none;
border-radius:5px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
outline: none;
color: black;
box-shadow: 0px 8px 15px rgba(72, 72, 72, 0.1);
" />
</div>
<div id="data-output" style="
margin-top:15px;
font-size:14px;
text-align: left;
width: 100%;
">暂无数据</div>
</div>`
);
$('body').append(container);
console.log('Appended interface container');
$('#tiktok-data-ui').animate({ right: '20px' }, 400);
// 使界面可拖动
dragElement(document.getElementById('tiktok-data-ui'), document.getElementById('drag-handle'));
$('#tiktok-url-input').on('keydown', function(e) {
if (e.key === 'Enter') {
let url = $(this).val().trim();
console.log('Entered URL:', url);
if (url) {
if (!url.startsWith('https://www.tiktok.com/')) {
if (!url.startsWith('@')) {
url = '@' + url;
}
url = `https://www.tiktok.com/${url}`;
console.log('Formatted URL:', url);
}
fetchDataFromUrl(url);
} else {
showNotification('请输入有效的 TikTok 视频或用户链接');
}
}
});
}
function toggleInterface() {
console.log('Toggling interface');
const container = $('#tiktok-data-ui');
if (container.length) {
container.remove();
console.log('Removed interface');
} else {
initializeInterface();
}
}
function fetchDataFromUrl(url) {
console.log('Fetching data from URL:', url);
$('#data-output').text('正在获取数据...');
GM_xmlhttpRequest({
method: 'GET',
url: url,
headers: {
'User-Agent': navigator.userAgent,
'Accept': 'text/html'
},
onload: function(response) {
console.log('Data fetched, status:', response.status);
if (response.status === 200) {
const responseText = response.responseText;
const scriptMatch = responseText.match(/<script id="__UNIVERSAL_DATA_FOR_REHYDRATION__" type="application\/json">([\s\S]*?)<\/script>/);
if (scriptMatch) {
try {
const jsonData = JSON.parse(scriptMatch[1]);
console.log('JSON data parsed successfully');
const data = extractDataFromJson(jsonData);
const userUrlMatch = url.match(/https:\/\/www\.tiktok\.com\/(\@[\w\.]+)/);
if (userUrlMatch) {
const userUrl = `https://www.tiktok.com/${userUrlMatch[1]}`;
console.log('Fetching user data from URL:', userUrl);
fetchUserData(userUrl, data);
} else {
updateDataContainerContent(data);
}
} catch (e) {
console.error('解析 JSON 时出错:', e);
showNotification('解析数据时出错');
$('#data-output').text('暂无数据');
}
} else {
console.warn('未找到指定的 <script> 标签。');
showNotification('未找到数据脚本标签');
$('#data-output').text('暂无数据');
}
} else {
console.error('请求失败，状态码:', response.status);
showNotification('请求失败，请检查 URL 是否正确');
$('#data-output').text('暂无数据');
}
},
onerror: function(error) {
console.error('请求出错:', error);
showNotification('请求出错，请检查网络连接');
$('#data-output').text('暂无数据');
}
});
}
function fetchUserData(url, videoData) {
console.log('Fetching user data from URL:', url);
GM_xmlhttpRequest({
method: 'GET',
url: url,
headers: {
'User-Agent': navigator.userAgent,
'Accept': 'text/html'
},
onload: async function(response) { // 将 onload 函数设为异步
console.log('User data fetched, status:', response.status);
if (response.status === 200) {
const responseText = response.responseText;
const scriptMatch = responseText.match(/<script id="__UNIVERSAL_DATA_FOR_REHYDRATION__" type="application\/json">([\s\S]*?)<\/script>/);
if (scriptMatch) {
try {
const jsonData = JSON.parse(scriptMatch[1]);
console.log('User JSON data parsed successfully');
const userInfo = jsonData.__DEFAULT_SCOPE__["webapp.user-detail"].userInfo;
const userStats = userInfo.stats;
const userAvatar = userInfo.user.avatarLarger;
// 获取头像的 Blob URL
let profilepicBlobUrl = '';
try {
profilepicBlobUrl = await getProfilePicBlobUrl(userAvatar);
} catch (error) {
console.error('获取头像失败:', error);
// 可以在这里设置一个默认的头像 URL
profilepicBlobUrl = '默认头像的 URL';
}
const userData = {
followerCount: userStats.followerCount || 0,
uniqueId: userInfo.user.uniqueId || '未知',
avatar: profilepicBlobUrl || userAvatar || ''
};
console.log('User data extracted:', userData);
updateDataContainerContent({ ...videoData, ...userData });
} catch (e) {
console.error('解析用户数据 JSON 时出错:', e);
showNotification('解析用户数据时出错');
updateDataContainerContent(videoData);
}
} else {
console.warn('未找到指定的 <script> 标签。');
showNotification('未找到用户数据脚本标签');
updateDataContainerContent(videoData);
}
} else {
console.error('请求失败，状态码:', response.status);
showNotification('请求用户数据失败，请检查 URL 是否正确');
updateDataContainerContent(videoData);
}
},
onerror: function(error) {
console.error('请求用户数据出错:', error);
showNotification('请求用户数据出错，请检查网络连接');
updateDataContainerContent(videoData);
}
});
}
function getProfilePicBlobUrl(profilepicUrl) {
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: 'GET',
url: profilepicUrl,
responseType: 'blob',
onload: function(response) {
if (response.status === 200) {
const blob = response.response;
const blobUrl = URL.createObjectURL(blob);
resolve(blobUrl);
} else {
reject(new Error('获取头像失败，状态码: ' + response.status));
}
},
onerror: function(error) {
reject(error);
}
});
});
}
function extractDataFromJson(jsonData) {
try {
console.log('Extracting data from JSON');
const itemStruct = jsonData.__DEFAULT_SCOPE__["webapp.video-detail"].itemInfo.itemStruct;
const stats = itemStruct.stats;
const extractedData = {
createTime: itemStruct.createTime || 0,
diggCount: stats.diggCount || 0,
playCount: stats.playCount || 0,
commentCount: stats.commentCount || 0,
shareCount: stats.shareCount || 0,
collectCount: stats.collectCount || 0
};
console.log('Extracted data:', extractedData);
return extractedData;
} catch (e) {
console.error('解析数据时出错:', e);
return {};
}
}
function updateDataContainerContent(data) {
console.log('Updating data container content');
if (Object.keys(data).length === 0) {
$('#data-output').text('暂无数据');
return;
}
const {
createTime,
diggCount,
playCount,
commentCount,
shareCount,
collectCount,
followerCount,
uniqueId,
avatar // 现在 avatar 是 Blob URL
} = data;
const formattedTime = createTime ? new Date(createTime * 1000).toLocaleString() : '未知';
let dataHtml = `
<h1 style="text-align: center; color: black; font-size:15px;">---帖子信息---</h1>
<p style="color: black;">发布时间: ${formattedTime} <button class="copy-btn" data-copy="${formattedTime}" style="background:none; border:none; cursor:pointer;">📋</button></p>
<p style="color: black;">点赞数: ${diggCount} <button class="copy-btn" data-copy="${diggCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
<p style="color: black;">播放数: ${playCount} <button class="copy-btn" data-copy="${playCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
<p style="color: black;">评论数: ${commentCount} <button class="copy-btn" data-copy="${commentCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
<p style="color: black;">分享数: ${shareCount} <button class="copy-btn" data-copy="${shareCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
<p style="color: black;">收藏数: ${collectCount} <button class="copy-btn" data-copy="${collectCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
`;
if (uniqueId) {
dataHtml += `
<h1 style="text-align: center; color: black; font-size:15px;">---用户信息---</h1>
<p style="color: black;">账户名: ${uniqueId} <button class="copy-btn" data-copy="${uniqueId}" style="background:none; border:none; cursor:pointer;">📋</button></p>
<p style="color: black;">粉丝数: ${followerCount} <button class="copy-btn" data-copy="${followerCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
<img src="${avatar}" alt="用户头像" style="max-width:100%; border-radius:10px; margin-top:10px; box-shadow: 0px 9px 20px rgba(72, 72, 72, 0.3);" />
`;
}
$('#data-output').html(dataHtml);
console.log('Data container updated');
// 为复制按钮添加事件监听器
$('.copy-btn').on('click', function() {
const copyValue = $(this).data('copy');
console.log('Copying value to clipboard:', copyValue);
try {
GM_setClipboard(copyValue);
showNotification('已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);
showNotification('复制到剪贴板失败，请手动复制');
}
});
}
function showNotification(message) {
console.log('Showing notification:', message);
Toastify({
text: message,
duration: 3000,
close: true,
gravity: 'top',
position: 'center',
style: {
background: 'linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61))',
color: '#FFFFFF',
borderRadius: '2px',
},
stopOnFocus: true,
}).showToast();
}
// 使元素可拖动的函数，只针对特定的 handle
function dragElement(elmnt, handle) {
console.log('Making element draggable');
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
handle.onmousedown = dragMouseDown;
function dragMouseDown(e) {
console.log('Drag start');
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
console.log('Dragging element to:', elmnt.style.top, elmnt.style.left);
}
function closeDragElement() {
console.log('Drag end');
document.onmouseup = null;
document.onmousemove = null;
}
}
})();