// ==UserScript==
// @name Slack Conversation Scraper & Custom Buttons
// @version 2.4
// @description Combines conversation scraper and custom message buttons with a modern smooth UI inside a single box.
// @author Mahmudul Hasan Shawon
// @icon https://www.slack.com/favicon.ico
// @match https://app.slack.com/client/*
// @grant none
// @namespace https://gf.qytechs.cn/users/1392874
// ==/UserScript==
(function () {
'use strict';
const buttons = [
{ id: 'goodMorningButton', text: 'GM!', message: 'Good morning!' },
{ id: 'okButton', text: 'Ok', message: 'Ok' },
{ id: 'scrapeConversationButton', text: '📋 Scrape All', message: '' },
{ id: 'copyConversationButton', text: '✨ Guess Reply', message: '' },
];
// Start script after Slack interface loads
function waitForSlackInterface() {
const checkInterval = setInterval(() => {
const textBox = document.querySelector('[data-message-input="true"] .ql-editor');
if (textBox) {
clearInterval(checkInterval);
addControlBox();
}
}, 1000);
}
// Add modern control box containing buttons and input field
function addControlBox() {
const controlBox = document.createElement('div');
Object.assign(controlBox.style, {
position: 'fixed', bottom: '30px', right: '100px',
width: '200px', padding: '15px', backgroundColor: '#ffffff',
borderRadius: '12px', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
fontFamily: 'Arial, sans-serif', zIndex: '9999',
transition: 'transform 0.3s ease-in-out'
});
controlBox.id = 'slackControlBox';
// Hover animation
controlBox.addEventListener('mouseenter', () => {
controlBox.style.transform = 'scale(1.02)';
});
controlBox.addEventListener('mouseleave', () => {
controlBox.style.transform = 'scale(1)';
});
// Container for first two buttons (side by side)
const sideBySideContainer = document.createElement('div');
Object.assign(sideBySideContainer.style, {
display: 'flex', justifyContent: 'space-between', gap: '10px', marginBottom: '10px'
});
// Add "GM!" and "Ok" buttons to the side-by-side container
const goodMorningButton = createButton(buttons[0]); // GM!
const okButton = createButton(buttons[1]); // Ok
goodMorningButton.style.flex = '1'; // Make them equally wide
okButton.style.flex = '1';
sideBySideContainer.appendChild(goodMorningButton);
sideBySideContainer.appendChild(okButton);
controlBox.appendChild(sideBySideContainer);
// Add other buttons
buttons.slice(2).forEach(btn => {
const button = createButton(btn);
controlBox.appendChild(button);
});
// Add input field
const inputField = createInputField();
controlBox.appendChild(inputField);
document.body.appendChild(controlBox);
}
// Create button elements
function createButton({ id, text, message }) {
const button = document.createElement('button');
Object.assign(button.style, {
display: 'block', width: '100%', marginBottom: '10px',
padding: '8px 0', backgroundColor: '#f3f3f3', color: '#333',
fontSize: '14px', border: 'none', borderRadius: '8px',
cursor: 'pointer', transition: 'background-color 0.2s ease-in-out'
});
button.id = id;
button.textContent = text;
button.addEventListener('mouseenter', () => {button.style.backgroundColor = '#e0e0e0'; });
button.addEventListener('mouseleave', () => {button.style.backgroundColor = '#f3f3f3'; });
button.addEventListener('click', () => {
if (id === 'copyConversationButton') copyMessages();
else if (id === 'scrapeConversationButton') scrapeConversation();
else sendMessage(message);
});
return button;
}
// Create input field for custom message count
function createInputField() {
const input = document.createElement('input');
Object.assign(input.style, {
width: '100%', padding: '8px', fontSize: '14px',
border: '1px solid #ccc', borderRadius: '8px',
textAlign: 'center', boxSizing: 'border-box'
});
input.id = 'messageCountInputField';
input.type = 'number';
input.placeholder = 'Number of messages';
return input;
}
// Scrape all Slack conversations
function scrapeConversation() {
const messageBlocks = Array.from(document.querySelectorAll('.c-message_kit__background'));
let conversation = '', lastSender = null;
messageBlocks.forEach(block => {
// Extract sender name or use the last known sender
const sender = block.querySelector('.c-message__sender_button')?.textContent.trim() || lastSender;
if (sender) lastSender = sender;
// Extract message text
const messageText = Array.from(block.querySelectorAll('.p-rich_text_section'))
.map(el => el.textContent.trim())
.join(' ').trim();
// Append the message in the desired format
if (messageText) {
conversation += `${lastSender}: ${messageText}\n\n`;
console.log(`${lastSender}: ${messageText}`); // Log sender and message
}
});
if (conversation.trim()) {
copyToClipboard(conversation, 'All conversations copied!');
} else {
showPopUp('No conversation found.');
}
}
// Copy last X messages with Guess Reply
function copyMessages() {
const numberOfMessages = document.getElementById('messageCountInputField').value || 2;
const messages = Array.from(document.querySelectorAll('.c-message_kit__blocks'))
.slice(-numberOfMessages)
.map(container => {
const sender = container.closest('.c-message_kit__background')
?.querySelector('.c-message__sender_button')?.textContent.trim();
const messageText = container.querySelector('.p-rich_text_section')?.textContent.trim();
return sender && messageText ? `\n${sender}: ${messageText}` : null;
})
.filter(Boolean);
if (!messages.length) {
showPopUp(`Unable to copy ${numberOfMessages} messages.`);
return;
}
const formatted = `${messages.join('\n')}\n\nGuess reply:`;
copyToClipboard(formatted, `Last ${numberOfMessages} messages copied!`);
}
// Copy text to clipboard and show notification
function copyToClipboard(text, message) {
navigator.clipboard.writeText(text)
.then(() => showPopUp(message))
.catch(() => showPopUp('Failed to copy.'));
}
// Send predefined message
function sendMessage(message) {
const textBox = document.querySelector('[data-message-input="true"] .ql-editor');
const sendButton = document.querySelector('[data-qa="texty_send_button"]');
if (textBox) {
textBox.focus();
document.execCommand('insertText', false, message);
setTimeout(() => sendButton?.click(), 500);
} else {
showPopUp('Message box not found.');
}
}
// Smooth animated pop-up notification
function showPopUp(message) {
const popUp = document.createElement('div');
Object.assign(popUp.style, {
position: 'fixed', bottom: '245px', right: '100px',
backgroundColor: '#A294F9', color: '#FFFFFF',
padding: '10px 15px', borderRadius: '16px 16px 0px 16px', fontSize: '14px',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.3)',
animation: 'fadeInOut 3s ease-in-out', zIndex: '9999'
});
popUp.textContent = message;
document.body.appendChild(popUp);
// Remove the pop-up after animation completes
setTimeout(() => popUp.remove(), 3000);
}
// Add CSS animation for fadeInOut
const styleSheet = document.createElement('style');
styleSheet.type = 'text/css';
styleSheet.innerText = `
@keyframes fadeInOut {
0% {
opacity: 0;
transform: translateY(20px);
}
10% {
opacity: 1;
transform: translateY(0);
}
90% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
`;
document.head.appendChild(styleSheet);
// Start script
waitForSlackInterface();
})();