Skip to content

Commit

Permalink
Launch parameters, host commands, fixed zoom, custom configs
Browse files Browse the repository at this point in the history
  • Loading branch information
r57zone committed Oct 19, 2024
1 parent bc92e28 commit 9780a31
Show file tree
Hide file tree
Showing 16 changed files with 744 additions and 270 deletions.
40 changes: 37 additions & 3 deletions README.RU.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,53 @@
[![EN](https://user-images.githubusercontent.com/9499881/33184537-7be87e86-d096-11e7-89bb-f3286f752bc6.png)](https://github.com/r57zone/ProtonShell/blob/master/README.md)
[![RU](https://user-images.githubusercontent.com/9499881/27683795-5b0fbac6-5cd8-11e7-929c-057833e01fb1.png)](https://github.com/r57zone/ProtonShell/blob/master/README.RU.md)
# ProtonShell
Легковесная оболочка для веб-сайтов, простых веб-приложений, работающая на базе системного браузера Microsoft Edge. На её основе можно сделать отдельное окно для Google Docs, ChatGPT, чата Twitch, клиента инстаграмма для ПК, с пользовательским js скриптом или какое-то веб-приложение в своём окне.
Легковесная оболочка для веб-сайтов, простых веб-приложений, работающая на базе системного браузера Microsoft Edge. На её основе можно сделать отдельное окно для сайтов, например, для: YouTube (TV), Google Docs, ChatGPT, чата Twitch, Инстаграмма, с пользовательским js скриптом или какое-то веб-приложение в своём окне. В папке `Apps` можно найти готовые параметры запуска для YouTube TV, ChatGPT, Discord, Instagram, чата Twitch, клиента X, а также простую оболочку для запуска других приложений.

## Скриншоты
![](https://github.com/user-attachments/assets/902b2e58-664d-460f-abfd-37de3c8c920b)
[![](https://github.com/user-attachments/assets/3fb00a8e-e835-45fe-9fa6-46657f4c1e0b)](https://github.com/user-attachments/assets/08b09024-ff66-4e07-837c-5b4d918862d7)
[![](https://github.com/user-attachments/assets/c5f0d903-e7d4-42f3-91ad-38f7b6f08d4b)](https://github.com/user-attachments/assets/22419527-2937-4bdc-a7b8-95097cf25de7)
[![](https://github-production-user-asset-6210df.s3.amazonaws.com/9499881/258204596-0de84193-e560-4165-b104-69c5a0b63d34.jpg)](https://github.com/r57zone/ProtonShell/assets/9499881/6a2701eb-869e-480a-8548-628daec17fe7)
[![](https://github-production-user-asset-6210df.s3.amazonaws.com/9499881/258204442-90eb9ab6-d54b-4131-a8e8-12735213935f.jpg)](https://github.com/r57zone/ProtonShell/assets/9499881/e1ff8392-ba8b-4373-a20b-0d1a29773c10)
[![](https://github.com/user-attachments/assets/773978d5-e43c-4733-b05c-58fcad6c6a40)](https://github.com/user-attachments/assets/a4e77acb-1bfd-4fff-8e31-7415cd8b853a)
[![](https://github.com/user-attachments/assets/1c1a5637-6383-428a-8331-84656150f294)](https://github.com/user-attachments/assets/325c1c6d-8125-4f0a-beab-696e5fe7f19f)

## Настройка
1. Установите [Edge WebView2 Runtime](https://developer.microsoft.com/en-us/microsoft-edge/webview2/).
2. Поместите файл `index.html` в папку с приложением или введите URL адрес, в конфигурационный файл.
3. Измените название, параметры окна, иконку, прокси, UserAgent и так далее, в конфигурационном файле `Config.ini`.
4. При необходимости измените иконку `exe`, с помощью [Resource Hacker](http://www.angusj.com/resourcehacker/).
3. Измените название, параметры окна, иконку, прокси, UserAgent и другие настройки, в конфигурационном файле `Config.ini`.
4. При необходимости измените иконку `exe`, с помощью [Resource Hacker](http://www.angusj.com/resourcehacker/) или укажите иконку в конфигурационном файле.

## Параметры запуска
`-f index.html` - путь до html файла (относительный или полный).

`-a "https://youtube.com/tv"` - адрес веб-сайта.

`-n "My app"` - заголовок приложения.

`-i MyIcon.ico` - путь до иконки.

`-u Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0` - пользовательский агент (user agent).

`-s 1.js` - пользовательский скрипт (userscript).

`-w` - ширина приложения.

`-h` - высота приложения.

`-fullscreen` - полноэкранный режим.

`-p` - изменение системной прокси на заданную (формат: IP:PORT).

`-rp` - возврат прошлой системной прокси, для случаев изменения прокси на другую.

`-b 3` - стиль рамок (None = `0`, Sizeable = `1`, Single = `2`, Dialog = 3, SizeToolWin = `4`, ToolWindow = `5`).

`-t 50` - отступ сверху.

`-l 50` - отступ справа.

`-d` - включение режима отладки.

## Режим отладки
Для быстрой отладки можно включить специальный режим, в котором доступно: изменение размеров, изменение User agent, очистка всех данных. Для включения измените параметр `Debug` на `1`.
Expand Down
40 changes: 37 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,53 @@
← Choose language | Выберите язык

# ProtonShell
Lightweight shell for websites, simple web applications, built on the Microsoft Edge system browser. Based on it you can make a self window for Google Docs, ChatGPT, Twitch chat, Instagram client for PC, with js userscript or some web application in its own window.
A lightweight shell for websites, simple web applications, based on the Microsoft Edge system browser. Based on it, you can make a separate window for websites such as: YouTube (TV), Google Docs, ChatGPT, Twitch chat, Instagram, with custom js script or some web application in its own window. In the `Apps` folder you can find ready-made startup options for YouTube TV, ChatGPT, Discord, Instagram, Twitch chat, X client, and a simple shell to run other applications.

## Screenshots
![](https://github.com/user-attachments/assets/902b2e58-664d-460f-abfd-37de3c8c920b)
[![](https://github.com/user-attachments/assets/3fb00a8e-e835-45fe-9fa6-46657f4c1e0b)](https://github.com/user-attachments/assets/08b09024-ff66-4e07-837c-5b4d918862d7)
[![](https://github.com/user-attachments/assets/c5f0d903-e7d4-42f3-91ad-38f7b6f08d4b)](https://github.com/user-attachments/assets/22419527-2937-4bdc-a7b8-95097cf25de7)
[![](https://github-production-user-asset-6210df.s3.amazonaws.com/9499881/258204596-0de84193-e560-4165-b104-69c5a0b63d34.jpg)](https://github.com/r57zone/ProtonShell/assets/9499881/6a2701eb-869e-480a-8548-628daec17fe7)
[![](https://github-production-user-asset-6210df.s3.amazonaws.com/9499881/258204442-90eb9ab6-d54b-4131-a8e8-12735213935f.jpg)](https://github.com/r57zone/ProtonShell/assets/9499881/e1ff8392-ba8b-4373-a20b-0d1a29773c10)
[![](https://github.com/user-attachments/assets/773978d5-e43c-4733-b05c-58fcad6c6a40)](https://github.com/user-attachments/assets/a4e77acb-1bfd-4fff-8e31-7415cd8b853a)
[![](https://github.com/user-attachments/assets/1c1a5637-6383-428a-8331-84656150f294)](https://github.com/user-attachments/assets/325c1c6d-8125-4f0a-beab-696e5fe7f19f)

## Setup
1. Install [Edge WebView2 Runtime](https://developer.microsoft.com/en-us/microsoft-edge/webview2/).
2. Place the `index.html` file in the application folder or enter the URL address, in the configuration file.
3. Change the name, window parameters, icon, proxy, UserAgent and so on, in the `Config.ini` configuration file.
4. If necessary, change the `exe` icon, using [Resource Hacker](http://www.angusj.com/resourcehacker/).
3. Change the name, window parameters, icon, proxy, UserAgent and other settings, in the `Config.ini` configuration file.
4. If necessary, change the `exe` icon, using [Resource Hacker](http://www.angusj.com/resourcehacker/) or specify the icon in the configuration file.

## Launch options
`-f index.html` - the path to the html file (relative or full).

`-a “https://youtube.com/tv”` - the web site address.

`-n “My app”` - the title of the application.

`-i MyIcon.ico` - path to the icon.

`-u Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0` - user agent.

`-s 1.js` - user script (userscript).

`-w` - width of the application.

`-h` - height of the application.

`-fullscreen` - fullscreen mode.

`-p` - change system proxy to the specified one (format: IP:PORT).

`-rp` - return past system proxy, for cases of changing proxy to another one.

`-b 3` - frame style (None = `0`, Sizeable = `1`, Single = `2`, Dialog = 3, SizeToolWin = `4`, ToolWindow = `5`).

`-t 50` - indent from the top.

`-l 50` - indent to the right.

`-d` - enable debugging mode.

## Debug mode
For fast debugging you can enable a special mode in which the following is available: resizing, changing User agent, clearing all data. To enable it, change the `Debug` parameter to `1`.
Expand Down
1 change: 1 addition & 0 deletions Source/Apps/Apple Notes.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
cmd /d /c start "" /B "..\ProtonShell.exe" -a "https://www.icloud.com/notes/" -n "Notes" -w 720 -h 480 -b 2"
1 change: 1 addition & 0 deletions Source/Apps/ChatGPT.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
cmd /d /c start "" /B "..\ProtonShell.exe" -a "https://chatgpt.com" -n "ChatGPT""
1 change: 1 addition & 0 deletions Source/Apps/Debug mode.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
cmd /d /c start "" /B "..\ProtonShell.exe" -a "https://google.com" -n "Google" -d"
1 change: 1 addition & 0 deletions Source/Apps/Discord.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
cmd /d /c start "" /B "..\ProtonShell.exe" -a "https://discord.com" -n "Discord" -iw"
1 change: 1 addition & 0 deletions Source/Apps/Instagram.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
cmd /d /c start "" /B "..\ProtonShell.exe" -a "https://instagram.com" -n "Instagram" -w 360 -h 640 -u "Instagram 343.0.0.33.101 Android (34/14; 383dpi; 1080x2145; samsung; SM-A156M; a15x; mt6835; pt_BR; 629710169)""
1 change: 1 addition & 0 deletions Source/Apps/TV.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
cmd /d /c start "" /B "..\ProtonShell.exe" -f "Apps\tv.html" -n "TV UI" -fullscreen"
1 change: 1 addition & 0 deletions Source/Apps/Twitch chat.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
cmd /d /c start "" /B "..\ProtonShell.exe" -a "https://www.twitch.tv/popout/residentevil/chat" -n "Twitch chat" -w 360 -h 640 -iw"
1 change: 1 addition & 0 deletions Source/Apps/X.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
cmd /d /c start "" /B "..\ProtonShell.exe" -a "https://x.com" -n "X" -w 480 -h 640"
1 change: 1 addition & 0 deletions Source/Apps/YouTube.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
cmd /d /c start "" /B "..\ProtonShell.exe" -a "https://youtube.com/tv" -u "Roku/DVP-14.0 (14.0.4.12221-CG)" -n "YouTube on TV" -fullscreen -s "YouTube.js""
57 changes: 57 additions & 0 deletions Source/Apps/YouTube.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
// Функция для поиска кнопки и добавления слушателя событий
function trackButton() {
// Получаем все кнопки с указанным классом
const buttons = document.querySelectorAll('.ytlr-button--large-shape');

if (buttons.length > 1) { // Проверяем, есть ли хотя бы две кнопки
const button = buttons[1]; // Выбираем вторую кнопку (индекс 1)

//console.log('Вторая кнопка найдена, создаем дубликат.');

// Создаем дубликат кнопки
const newButton = button.cloneNode(true); // Клонируем кнопку, включая ее содержимое и атрибуты

// Удаляем оригинальную кнопку
const parent = button.parentNode; // Получаем родительский элемент
if (parent) {
parent.removeChild(button); // Удаляем оригинальную кнопку

// Убираем aria-hidden у новой кнопки, чтобы она была доступна
newButton.removeAttribute('aria-hidden'); // Удаляем атрибут aria-hidden
newButton.setAttribute('tabindex', '0'); // Добавляем tabindex, чтобы кнопка могла получать фокус

// Добавляем новый элемент на место оригинала
newButton.addEventListener('click', function(event) {
window.chrome.webview.postMessage('close');
//alert('Кнопка нажата!'); // Показываем алерт
//console.log('Кнопка нажата:', event);
//console.dir(event.target);
});

// Вставляем дубликат в то же место
parent.insertBefore(newButton, button.nextSibling); // Вставляем новый элемент после оригинала
//console.log('Дубликат второй кнопки добавлен с обработчиком клика.');

// Устанавливаем флаг, чтобы избежать повторной обработки
// buttonProcessed = true; // Убираем этот флаг, чтобы кнопка могла заменяться повторно

// Проверяем доступность новой кнопки
//console.log('Новая кнопка:', newButton);
} else {
//console.error('Родительский элемент не найден.'); // Если родителя нет, выводим сообщение об ошибке
}
} else {
//console.log('Недостаточно кнопок. Попробуем снова через 1 секунду.');
}
}

// Дожидаемся полной загрузки документа
//console.log('Документ загружен, ищем кнопки...');

// Пробуем сразу найти кнопки
trackButton();

// Если кнопки не найдены сразу, ищем их периодически
const interval = setInterval(() => {
trackButton(); // Теперь просто вызываем функцию
}, 1000); // Проверяем каждые 1000 миллисекунд (1 секунда)
145 changes: 145 additions & 0 deletions Source/Apps/tv.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TV UI</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background: rgb(0,59,119);
background: radial-gradient(circle, rgba(0,59,119,1) 0%, rgba(42,75,129,1) 100%);
}
.container {
display: grid;
grid-template-columns: repeat(5, 200px);
grid-template-rows: repeat(2, 120px);
grid-gap: 40px; /* Увеличенное расстояние между блоками */
justify-content: center;
}
.block {
width: 200px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
color: white;
font-size: 1.2rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 0 25px rgba(0,0,0, 0.2);
cursor: pointer;
}
.block.selected {
transform: scale(1.2);
box-shadow: 0 0 25px rgba(4,105,226, 0.8);
}
.block:hover {
transform: scale(1.2);
box-shadow: 0 0 25px rgba(4,105,226, 0.8);
}
</style>
<script type="text/javascript">
let container;
let mainPath = '\\Apps\\';

const gradients = [
'linear-gradient(180deg, #e74c3c, #c33425)', // 1 Красный
'linear-gradient(180deg, #1ac6fb, #1d72f2)', // 2 Синий
'linear-gradient(180deg, #ffa601, #f9691d)', // 3 Оранджевый
'linear-gradient(180deg, #2ecc71, #159f50)', // 4 Зелёный
'linear-gradient(180deg, #d46cfb, #862ec3)', // 5 Темно-розовый
'linear-gradient(180deg, #7882ff, #434dcf)', // 6 Фиолетовый
'linear-gradient(180deg, #95a5a6, #626e6f)' // 7 Серый
];

let colorCounter = 0; // Счетчик для градиентов
let selectedIndex = 0;
const appsCountInLine = 5;

function openApp(block) {
window.chrome.webview.postMessage('open ' + block.getAttribute('appPath').replaceAll('\\', '\\\\'));
}

function addApp(fileName) {
const block = document.createElement('div');
block.classList.add('block');
block.textContent = fileName.split('.').slice(0, -1).join('.');
block.setAttribute('appPath', mainPath + fileName);
block.setAttribute('onclick', 'openApp(this)');

// Применение градиента по счетчику
block.style.background = gradients[colorCounter % gradients.length];

// Обработчик наведения мыши
block.addEventListener('mouseover', () => {
selectedIndex = Array.from(container.children).indexOf(block); // Обновляем selectedIndex
updateSelection(); // Обновляем состояние выделения
});

container.appendChild(block);
colorCounter++; // Увеличиваем счетчик
}

function updateSelection() {
const blocks = document.querySelectorAll('.block');
blocks.forEach((block, index) => {
if (index === selectedIndex) {
block.classList.add('selected');
} else {
block.classList.remove('selected');
}
});
}

function handleKeyDown(event) {
const blocks = document.querySelectorAll('.block');
if (event.key === 'ArrowRight') {
selectedIndex = (selectedIndex + 1) % blocks.length;
} else if (event.key === 'ArrowLeft') {
selectedIndex = (selectedIndex - 1 + blocks.length) % blocks.length;
} else if (event.key === 'ArrowDown') {
if (selectedIndex + appsCountInLine < blocks.length) {
selectedIndex += appsCountInLine;
}
} else if (event.key === 'ArrowUp') {
if (selectedIndex - appsCountInLine >= 0) {
selectedIndex -= appsCountInLine;
}
} else if (event.key === 'Enter') {
window.chrome.webview.postMessage('open ' + blocks[selectedIndex].getAttribute('appPath').replaceAll('\\', '\\\\'));
}
updateSelection();
}

function handleMessageFromHost(msg) {
const list = msg.split(/\n/);
list.forEach(item => {
if (!item.endsWith('.js') && !item.endsWith('.html')) {
addApp(item);
}
});
updateSelection(); // Начальное выделение
}

document.addEventListener('DOMContentLoaded', function(){
container = document.getElementById('container');
document.addEventListener('keydown', handleKeyDown);
window.chrome.webview.postMessage('folder ' + mainPath);
});
</script>
</head>
<body>
<div class="container" id="container"></div>
</body>
</html>
1 change: 1 addition & 0 deletions Source/Config.ini
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ HideMaximize=0

# Normal = 0, Maximized = 1, FullScreen = 2
WindowState=0
SaveState=0
StayOnTop=0

# Position
Expand Down
Loading

0 comments on commit 9780a31

Please sign in to comment.