Console mô phỏng DevTools
// ==UserScript==
// @name Mini DevTools Console
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Console mô phỏng DevTools
// @author You
// @match *://*/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
const consoleBox = document.createElement('div');
consoleBox.innerHTML = `
<div id="tm-header">
Mini Console
<button id="tm-close">×</button>
</div>
<div id="tm-output"></div>
<textarea id="tm-input" placeholder="Nhập JavaScript..."></textarea>
<button id="tm-run">Run</button>
`;
Object.assign(consoleBox.style, {
position: 'fixed',
top: '20px',
right: '20px',
width: '500px',
height: '350px',
background: '#1e1e1e',
color: '#fff',
zIndex: '999999',
border: '1px solid #555',
fontFamily: 'monospace',
display: 'flex',
flexDirection: 'column'
});
document.body.appendChild(consoleBox);
const output = consoleBox.querySelector('#tm-output');
const input = consoleBox.querySelector('#tm-input');
Object.assign(output.style, {
flex: '1',
overflow: 'auto',
padding: '5px',
borderBottom: '1px solid #444'
});
Object.assign(input.style, {
height: '80px',
background: '#252526',
color: '#fff',
border: 'none',
resize: 'none'
});
function log(text, color = '#fff') {
const div = document.createElement('div');
div.style.color = color;
div.textContent = text;
output.appendChild(div);
output.scrollTop = output.scrollHeight;
}
const originalLog = console.log;
console.log = (...args) => {
originalLog(...args);
log(args.map(a =>
typeof a === 'object'
? JSON.stringify(a, null, 2)
: String(a)
).join(' '), '#4fc3f7');
};
document.getElementById('tm-run').onclick = () => {
const code = input.value;
try {
const result = eval(code);
log('> ' + String(result), '#90ee90');
} catch (e) {
log('Error: ' + e.message, '#ff6b6b');
}
};
document.getElementById('tm-close').onclick = () => {
consoleBox.remove();
};
input.addEventListener('keydown', e => {
if (e.ctrlKey && e.key === 'Enter') {
document.getElementById('tm-run').click();
}
});
})();