Add a control panel for novel reading
当前为
// ==UserScript==
// @name Chapter Downloader
// @namespace http://tampermonkey.net/
// @version 1.7
// @description Add a control panel for novel reading
// @author You
// @match https://truyen.tangthuvien.net/doc-truyen/*
// @match https://truyen.tangthuvien.net/doc-truyen/*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Create panel container
const panel = document.createElement('div');
panel.id = 'reader-panel';
panel.style.cssText = `
position: fixed;
top: 10%;
right: 10px;
width: 300px;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
z-index: 9999;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
font-family: Arial, sans-serif;
`;
// Create textarea
const textarea = document.createElement('textarea');
textarea.id = 'content-textarea';
textarea.style.cssText = `
width: 100%;
height: 300px;
margin-bottom: 10px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
`;
// Create start button
const startButton = document.createElement('button');
startButton.textContent = 'Bắt đầu';
startButton.style.cssText = `
width: 100%;
padding: 8px;
margin-bottom: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
// Create container for getTextButton and nextChapterButton (same row)
const buttonRow1 = document.createElement('div');
buttonRow1.style.cssText = `
display: flex;
justify-content: space-between;
margin-bottom: 10px;
`;
// Create get text button
const getTextButton = document.createElement('button');
getTextButton.textContent = 'Lấy Text';
getTextButton.style.cssText = `
flex: 1;
padding: 8px;
margin-right: 5px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
// Create next chapter button
const nextChapterButton = document.createElement('button');
nextChapterButton.textContent = 'Chương Tiếp';
nextChapterButton.style.cssText = `
flex: 1;
padding: 8px;
margin-left: 5px;
background-color: #ff9800;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
// Create container for clearButton and copyButton (same row)
const buttonRow2 = document.createElement('div');
buttonRow2.style.cssText = `
display: flex;
justify-content: space-between;
`;
// Create clear button
const clearButton = document.createElement('button');
clearButton.textContent = 'Xoá';
clearButton.style.cssText = `
flex: 1;
padding: 8px;
margin-right: 5px;
background-color: #f44336;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
// Create copy button
const copyButton = document.createElement('button');
copyButton.textContent = 'Sao Chép';
copyButton.style.cssText = `
flex: 1;
padding: 8px;
margin-left: 5px;
background-color: #9c27b0;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
`;
// Add buttons to their respective row containers
buttonRow1.appendChild(getTextButton);
buttonRow1.appendChild(nextChapterButton);
buttonRow2.appendChild(clearButton);
buttonRow2.appendChild(copyButton);
// Add all elements to panel
panel.appendChild(textarea);
panel.appendChild(startButton);
panel.appendChild(buttonRow1);
panel.appendChild(buttonRow2);
// Add panel to body
document.body.appendChild(panel);
// Load saved content from localStorage if exists
const savedContent = localStorage.getItem('chapterDownloaderContent');
if (savedContent) {
textarea.value = savedContent;
}
// Function to save content to localStorage
function saveContent() {
localStorage.setItem('chapterDownloaderContent', textarea.value);
console.log('Content saved to localStorage');
}
// Auto save when textarea value changes
textarea.addEventListener('input', saveContent);
// Add event listeners
startButton.addEventListener('click', () => {
console.log('Start button clicked');
// Add your start functionality here
});
getTextButton.addEventListener('click', () => {
console.log('Get text button clicked');
// Get chapter title
const titleElement = document.querySelector('h2');
// Get chapter content
const contentElement = document.querySelector('.box-chap');
if (titleElement && contentElement) {
// Append to existing content rather than replacing
const title = titleElement.innerText.trim();
const content = contentElement.innerText.trim();
// Append with proper formatting
if (textarea.value) {
textarea.value += '\n\n------------\n\n' + title + '\n\n' + content;
} else {
textarea.value = title + '\n\n' + content;
}
// Save content after adding new chapter
saveContent();
} else {
console.log('Could not find title or content elements');
}
});
nextChapterButton.addEventListener('click', () => {
console.log('Next chapter button clicked');
// Add your next chapter functionality here
// For example, find and click the next chapter link
const nextChapterLink = document.querySelector('.next-chapter'); // Replace with actual next chapter selector
if (nextChapterLink) {
nextChapterLink.click();
}
});
clearButton.addEventListener('click', () => {
console.log('Clear button clicked');
textarea.value = '';
saveContent(); // Save empty content to localStorage
});
copyButton.addEventListener('click', () => {
console.log('Copy button clicked');
textarea.select();
document.execCommand('copy');
});
// Make panel draggable
let isDragging = false;
let offsetX, offsetY;
panel.addEventListener('mousedown', (e) => {
if (e.target === panel) {
isDragging = true;
offsetX = e.clientX - panel.getBoundingClientRect().left;
offsetY = e.clientY - panel.getBoundingClientRect().top;
}
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
panel.style.left = (e.clientX - offsetX) + 'px';
panel.style.top = (e.clientY - offsetY) + 'px';
panel.style.right = 'auto';
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
})();