Creates a resizeable window on your current tab that displays any website you want!
// ==UserScript==
// @name MiniWindow
// @namespace http://tampermonkey.net/
// @version 1.3
// @description Creates a resizeable window on your current tab that displays any website you want!
// @author iCottage
// @match *://*/*
// @grant none
// @license GNU GPLv3
// ==/UserScript==
(function() {
'use strict';
const createWindow = (url) => {
const win = document.createElement('div');
win.style.width = '400px';
win.style.height = '300px';
win.style.position = 'fixed';
win.style.top = '50px';
win.style.left = '50px';
win.style.border = '1px solid #ccc';
win.style.backgroundColor = '#fff';
win.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
win.style.zIndex = '10000';
win.style.overflow = 'hidden'
const topBar = document.createElement('div');
topBar.style.backgroundColor = '#007BFF';
topBar.style.color = '#fff';
topBar.style.padding = '10px';
topBar.style.cursor = 'move';
topBar.style.display = 'flex';
topBar.style.alignItems = 'center';
topBar.style.justifyContent = 'space-between';
topBar.style.overflow = 'hidden';
const urlInput = document.createElement('input');
urlInput.type = 'text';
urlInput.value = url;
urlInput.style.flex = '1';
urlInput.style.border = 'none';
urlInput.style.padding = '5px';
urlInput.style.borderRadius = '3px';
urlInput.style.marginRight = '10px';
urlInput.style.outline = 'none';
urlInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const newUrl = urlInput.value;
iframe.src = newUrl.startsWith('http') ? newUrl : 'http://' + newUrl;
title.textContent = newUrl;
}
});
const closeButton = document.createElement('button');
closeButton.textContent = 'X';
closeButton.style.background = 'none';
closeButton.style.border = 'none';
closeButton.style.color = '#fff';
closeButton.style.cursor = 'pointer';
closeButton.onclick = () => win.remove();
topBar.appendChild(urlInput);
topBar.appendChild(closeButton);
win.appendChild(topBar);
const iframe = document.createElement('iframe');
iframe.src = url.startsWith('http') ? url : 'http://' + url;
iframe.style.width = '100%';
iframe.style.height = 'calc(100% - 40px)';
iframe.style.border = 'none';
win.appendChild(iframe);
const resizeHandle = document.createElement('div');
resizeHandle.style.width = '15px';
resizeHandle.style.height = '15px';
resizeHandle.style.backgroundColor = '#ccc';
resizeHandle.style.cursor = 'nwse-resize';
resizeHandle.style.position = 'absolute';
resizeHandle.style.bottom = '0';
resizeHandle.style.right = '0';
win.appendChild(resizeHandle);
document.body.appendChild(win);
let isDragging = false;
let offsetX, offsetY;
topBar.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - win.getBoundingClientRect().left;
offsetY = e.clientY - win.getBoundingClientRect().top;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
win.style.left = `${e.clientX - offsetX}px`;
win.style.top = `${e.clientY - offsetY}px`;
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
let isResizing = false;
resizeHandle.addEventListener('mousedown', (e) => {
isResizing = true;
e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
if (isResizing) {
const newWidth = e.clientX - win.getBoundingClientRect().left;
const newHeight = e.clientY - win.getBoundingClientRect().top;
if (newWidth > 150 && newHeight > 100) {
win.style.width = `${newWidth}px`;
win.style.height = `${newHeight}px`;
iframe.style.height = `calc(${newHeight}px - 40px)`;
}
}
});
document.addEventListener('mouseup', () => {
isResizing = false;
});
};
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.shiftKey && e.key === 'E') {
const url = prompt('Enter a full URL to load (include http:// or https://):');
if (url) {
createWindow(url);
}
}
});
})();