Extract tags from a web page, display them in a styled panel, and provide a copy function
// ==UserScript==
// @name Tag Extractor and Copier with Styled Interface
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Extract tags from a web page, display them in a styled panel, and provide a copy function
// @author admin
// @match https://danbooru.donmai.us/posts/*
// @grant GM_setClipboard
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// 添加CSS样式
GM_addStyle(`
.panel {
position: fixed;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 300px;
height: 300px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
z-index: 10000;
overflow-y: auto;
box-sizing: border-box; /* 加上这个属性以包含内边距和边框 */
}
.tag-text {
/* 共同的样式 */
display: inline-block;
padding: 2px 5px;
margin: 5px; /* 为了对称，给左右添加相同的margin */
border-radius: 4px;
font-size: 0.9em;
cursor: pointer;
user-select: none;
background: #eef;
color: #333;
}
.tag-text.unselected {
/* 未选中状态的样式 */
background: #fff;
color: #ccc;
}
`);
// 创建显示标签和复制按钮的面板
const panel = document.createElement('div');
panel.className = 'panel'; // 默认为选中状态
// 标签容器的样式
const tagContainer = document.createElement('div');
tagContainer.style.padding = '5px';
tagContainer.style.marginBottom = '10px';
panel.appendChild(tagContainer);
// 复制按钮的样式
const copyButton = document.createElement('button');
copyButton.textContent = '复制标签';
copyButton.style.width = '100%';
copyButton.style.padding = '10px';
copyButton.style.backgroundColor = '#4CAF50';
copyButton.style.color = 'white';
copyButton.style.border = 'none';
copyButton.style.borderRadius = '4px';
copyButton.style.cursor = 'pointer';
copyButton.style.marginBottom = '10px';
copyButton.onclick = function() {
const selectedTags = document.querySelectorAll('.tag-text.selected');
const tagNames = Array.from(selectedTags).map(tag => tag.textContent).join(', ');
GM_setClipboard(tagNames);
//alert('已复制选中的标签到剪贴板');
};
panel.appendChild(copyButton);
// 将面板添加到文档中
document.body.appendChild(panel);
// 提取并显示标签
const tags = document.querySelectorAll('.general-tag-list li[data-tag-name]');
tags.forEach(tag => {
const tagName = tag.getAttribute('data-tag-name');
const tagDiv = document.createElement('div');
tagDiv.textContent = tagName;
tagDiv.className = 'tag-text selected'; // 默认为选中状态
tagDiv.dataset.selected = 'true'; // 使用自定义数据属性跟踪选中状态
tagDiv.addEventListener('click', function() {
const isSelected = tagDiv.dataset.selected === 'true';
if (isSelected) {
tagDiv.className = 'tag-text unselected';
tagDiv.dataset.selected = 'false';
} else {
tagDiv.className = 'tag-text selected';
tagDiv.dataset.selected = 'true';
}
});
tagContainer.appendChild(tagDiv);
});
})();