Greasy Fork is available in English.
Add a compact Douyin search button that expands on hover
当前为
// ==UserScript==
// @name 抖音快捷主页搜索
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Add a compact Douyin search button that expands on hover
// @author 八千xmx
// @match *://*/*
// @grant GM_openInTab
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
// Create the container for the input box and button
const container = document.createElement('div');
container.style.position = 'fixed';
container.style.bottom = '15px';
container.style.right = '15px';
container.style.backgroundColor = '#f0f0f0';
container.style.border = '1px solid #ccc';
container.style.borderRadius = '8px'; // Slightly rounded corners
container.style.boxShadow = '0 3px 5px rgba(0, 0, 0, 0.1)';
container.style.width = '20px';
container.style.height = '20px';
container.style.padding = '0';
container.style.zIndex = '9999';
container.style.fontFamily = 'Arial, sans-serif';
container.style.fontSize = '13px';
container.style.transition = 'width 0.3s ease, height 0.3s ease, padding 0.3s ease';
container.style.overflow = 'hidden';
container.style.display = 'flex';
container.style.alignItems = 'center';
container.style.justifyContent = 'center';
// Create the input box
const input = document.createElement('input');
input.type = 'text';
input.placeholder = '输入抖音用户名';
input.style.flex = '1';
input.style.padding = '6px';
input.style.border = '1px solid #ccc';
input.style.borderRadius = '4px';
input.style.fontSize = '13px';
input.style.boxShadow = 'inset 0 1px 2px rgba(0, 0, 0, 0.1)';
input.style.opacity = '0';
input.style.transition = 'opacity 0.3s ease';
// Create the search button
const button = document.createElement('button');
button.textContent = '🔍';
button.style.padding = '0';
button.style.backgroundColor = '#007bff';
button.style.color = '#fff';
button.style.border = 'none';
button.style.borderRadius = '50%';
button.style.cursor = 'pointer';
button.style.fontSize = '20px';
button.style.transition = 'background-color 0.3s ease';
// Track if the input box is focused
let isInputFocused = false;
// Add hover effects to the container
container.addEventListener('mouseenter', () => {
container.style.width = '200px';
container.style.height = '50px';
container.style.padding = '10px';
input.style.opacity = '1';
input.style.width = '100%'; // Make input box fill the container
});
container.addEventListener('mouseleave', () => {
if (!isInputFocused) {
container.style.width = '20px';
container.style.height = '20px';
container.style.padding = '0';
input.style.opacity = '0';
input.style.width = '0'; // Hide input box
}
});
// Handle input focus and blur
input.addEventListener('focus', () => {
isInputFocused = true;
container.style.width = '200px';
container.style.height = '50px';
container.style.padding = '10px';
input.style.opacity = '1';
input.style.width = '100%';
});
input.addEventListener('blur', () => {
isInputFocused = false;
container.style.width = '20px';
container.style.height = '20px';
container.style.padding = '0';
input.style.opacity = '0';
input.style.width = '0';
});
// Add event listener for pressing Enter key
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
const query = encodeURIComponent(input.value);
if (query) {
const url = `https://www.douyin.com/search/${query}?type=user`;
GM_openInTab(url, { active: true });
}
}
});
// Add an event listener to the button
button.addEventListener('click', () => {
const query = encodeURIComponent(input.value);
if (query) {
const url = `https://www.douyin.com/search/${query}?type=user`;
GM_openInTab(url, { active: true });
}
});
// Append the input box and button to the container
container.appendChild(input);
container.appendChild(button);
// Append the container to the body
document.body.appendChild(container);
})();