Приложения Electron невероятно легко распаковываются! Нет, серьезно. Теперь вы действительно получаете что-нибудь от их распаковки? В большинстве случаев нет. Обычно приложения Electron — это прославленные веб-интерфейсы, которые просто обращаются к API, где находится весь секретный «соус», но это не значит, что у него нет своего применения!

Иногда мне нравится играть в League of Legends (я знаю… я знаю… я токсичное существо). Я использую приложение, созданное OP.GG, которое автоматически импортирует мои руны и создает для меня предметы. К сожалению, у OP.GG есть раздражающая навязчивая реклама, которая отображается на боковой панели, и удалить ее невозможно. Я был бы не против заплатить премию, чтобы насладиться опытом без рекламы! Зачем мне что-то, что постоянно показывает рекламу и снижает даже 0,1% моего FPS?

Поэтому я решил избавиться от них (извините, OP.GG), и я поделюсь, как вы также можете удалить эти раздражающие факторы!

Сначала вы хотите найти местоположение вашего приложения Electron, например, в моем случае оно было расположено по адресу

C:\Users\cristian\AppData\Local\Programs\OP.GG

Перейдите в подкаталог ресурсов

C:\Users\cristian\AppData\Local\Programs\OP.GG\resources

В этом каталоге находится файл .asar. Обычно он называется app.asar, но я также видел core.asar, чтобы декомпилировать этот файл asar, мы будем использовать пакет с именем «asar». Вот команда, которую мы будем запускать в этом каталоге.

npx asar extract app.asar unpackedcopy

Это создаст папку в том же месте с декомпилированным исходным кодом для вашего приложения Electron. Я открыл эту папку (в моем случае «unpackedcopy») в VSCode и установил необходимые пакеты с помощью npm install.

Теперь, хотя мы можем ясно видеть весь код React, используемый для создания этого приложения Electron, обратите внимание, что приложение Electron на самом деле не читает их, поэтому простое редактирование только этих компонентов ничего не даст, поскольку Electron будет считывать минимизированный вывод при создании вашего приложения. Реагировать приложение. В моем случае он находится по адресу

/unpackedcopy/assets/react

Теперь вы можете зайти и отредактировать уменьшенный JS, но он непослушный и его трудно читать даже после правильного форматирования. Мое решение состояло в том, чтобы вместо этого сделать копию папки «unpackedcopy», и на данный момент это будет наш «нетронутый» код, потому что позже нам придется пересобрать это приложение React, и нам нужны только восстановленные мини-файлы JS. Чем меньше кода вы меняете, тем меньше шансов, что что-то сломает все приложение Electron.

Теперь мы собираемся внести нужные изменения в приложение React. В моем случае я перешел к корневому компоненту приложения, где импортировался компонент «Реклама», и просто полностью удалил его.

Теперь, когда мы достигли нашей цели по удалению этих гигантских объявлений из приложения, пришло время создать приложение React, чтобы мы могли получить новый минимизированный ресурс js, отражающий внесенные нами изменения.

npm run build

Приведенная выше команда обычно работает, но проверьте ваш package.json, потому что разработчики могут изменить его. В моем случае это было

npm run react:build

После завершения сборки у вас должен быть новый минифицированный актив JS. Его имя также, вероятно, изменилось, поэтому мы заранее сделали копию исходной папки. Поскольку имя недавно созданного минифицированного JS-ассета меняется при каждой сборке, все, что на него ссылается, также будет ожидать это новое имя. Что мы здесь сделаем, так это просто скопируем весь код из нашего нового актива JS. Например, мой находился по адресу

unpackedcopy\assets\react\src.5f5b20b7.js

и замените все в нашем старом ассете, вставив его в наш нетронутый скопированный минимизированный ассет JS

untouched\assets\react\src.ec226be7.js

Делая это, мы изменяем наименьшее возможное количество файлов. Вы также можете просто полностью перестроить приложение, а затем переупаковать его, но по моему опыту, это сломало пару вещей, поэтому я остановился на этом решении.

Когда все готово, все, что нам нужно сделать, это перепаковать наш файл asar и запустить наше приложение Electron. Для этого сначала мы переименуем наш оригинальный app.asar или просто удалим его полностью, а затем упакуем новый, используя «нетронутую» исходную папку, в которой мы изменили один актив JS.

npx asar pack untouched app.asar

Теперь, когда мы запускаем наше приложение Electron. Он будет работать с измененным ресурсом сборки, который мы предоставили, и наши изменения отразятся в пользовательском интерфейсе.