把網站變獨立 App 只是入門——PakePlus 冷門功能挖掘

把網站變獨立 App 只是入門——PakePlus 到底藏了什麼

PakePlus 是一款面向普通用戶的網站轉應用工具，主打「不需要寫代碼、跟著界面點幾下就能把任意網站打包成獨立 App」。桌面端支援 Windows、macOS、Linux，手機端覆蓋 Android 與 iOS，整體體量不到 3M，運行起來像原生應用一樣獨立，不受瀏覽器標籤頁干擾。日常把 YouTube、B 站、小紅書這類每天都要開的網站做成獨立客戶端，是大多數人接觸 PakePlus 的第一印象。

但我用了幾個月之後發現，「網站轉 App」其實只是它最表面的一層皮——配置面板深處那些沒有人細看的高級選項，才是這款工具真正的殺手鐧。這篇就聊聊那些我翻了無數次配置頁才挖到的冷門功能，看完你可能會想重頭再打一次。

安裝

PakePlus 的 Android 安裝包體積只有 2.51M，包名 com.xiaoshen.pakeplus.android，最新版本 0.0.1，本身就是一個非常輕量的工具應用。安裝方式相對標準：PakePlus下载 APK 後在手機上點擊安裝，首次安裝同開啟允許「未知來源」應用安裝權限即可。

不過這裡有兩個容易踩的坑值得提前注意：一是舊版本殘留的問題——如果你之前裝過 PakePlus 的早期測試版，卸載時記得順手清理一下應用緩存，不然重新安裝後配置頁可能會出現選項丟失或預設值錯亂的情況；二是這款應用本身就是工具鏈的一個入口，完整的打包流程（尤其是雲端模式）需要搭配 GitHub 賬號授權使用，首次進入配置頁會自動彈出授權對話框，這一環別跳過，跳過之後很多高級功能（包括後面要講的同時編譯多平台）都用不了。

冷門功能一：CSS Selector 過濾元素，一鍵把廣告從源頭拿掉

大多數人打包完一個網站就直接發布了，幾乎沒有人會去碰配置頁裡那個叫作「過濾元素」的輸入框——但這恰恰是 PakePlus 最實用的隱藏功能之一。

簡單來說，你只需要在這個輸入框裡寫入任意 CSS selector，PakePlus 打包出來的 App 在運行時就會自動把頁面上匹配到的 DOM 元素隱藏或移除。實質上相當於 PakePlus 在目標網站加載完畢後悄悄注入了一段腳本：

document.querySelectorAll('你填的 selector').forEach(el => {
  el.style.display = 'none';
  el.remove();
});

最經典的用法就是 去廣告。我自己打包 YouTube 客戶端時就是這麼幹的：F12 打開開發者工具，點一下那個彈窗廣告，從 Elements 面板複製它的 class——.ytd-popup-container，再加幾個常見的廣告 selector，全部用英文逗號隔開粘進去，保存後重點擊預覽，廣告瞬間消失。

這裡有個小技巧：CSS selector 不需要寫得太精確，用 class*="ad" 這種屬性選擇器可以一把覆蓋所有 class 裡面含 "ad" 的元素，比逐個寫具體 class 省事得多。還有 iframe 類廣告（很多第三方廣告走 iframe 嵌入）要記得加 iframe[src*="ads"]，不然光寫頁面元素不夠。

什麼人用得上？經常要把有廣告的網站（技術部落格、資訊站、視頻網站）打包成乾淨客戶端自用的人；什麼人可以無視？本來就沒廣告的網站、或者不介意廣告的普通用戶。

冷門功能二：GitHub Actions 雲端同時編譯，一次發布拿五份安裝包

第二個幾乎沒有人用的功能是它的雲端並行編譯。普通用戶打包完直接出一個平台的包就完事了，但 PakePlus 的雲端模式其實支援一次發布同時出 Windows、macOS（Apple Silicon + Intel）、Linux、Android、iOS 五個平台的安裝包。

這背後用的是 GitHub Actions 的 strategy.matrix 機制——在一個 workflow 裡同時啟動多個 Runner，每個 Runner 獨立編譯一個目標平台，互不干擾。如果一次發布要編譯 6 個目標，串行的話每個 3 分鐘總共要 18 分鐘，並行則只需要 3 分鐘（取最慢那個）。目標數量越多優勢越明顯。

還有一個細節很多人不知道：macOS 同時編譯 Apple Silicon 和 Intel 兩個架構後，PakePlus 模板會自動合成一個 Universal Binary——用戶下載一個 .dmg 就能在 M 系列 Mac 和 Intel Mac 上原生運行，不需要 Rosetta 轉譯。這是本地編譯做不到的，本地要同時有兩台 Mac 才行。

資源消耗也要算清楚：桌面三平台大約 15 分鐘/次，全平台（含 Android + iOS）大約 30 分鐘/次，GitHub 免費額度每月 2000 分鐘，大概能跑 60~130 次。超出的話升級 GitHub Pro（4 美元/月）可以拿到 5000 分鐘/月。

什麼人用得上？同時需要向多個平台交付安裝包的獨立開發者或小團隊；什麼人可以無視？只打一個平台自用的普通用戶。

冷門功能三：JS 注入 + MutationObserver，處理動態加載的廣告

上面說的過濾元素其實有個硬傷：它只在頁面初次加載完畢後執行一次。如果廣告是滾動到某個位置才出現、點擊後才加載、或者用 React/Vue 動態渲染的，過濾元素就抓不到了——這時候就要出動另一個隱藏殺手：JS 注入。

配置頁裡有個「腳本文件」輸入框，你可以把任意 JavaScript 貼進去，PakePlus 打包出來的 App 每次啟動都會自動執行它。配合 MutationObserver 就能實時監聽 DOM 變化，動態移除後來加載的廣告：

const observer = new MutationObserver(mutations => {
  document.querySelectorAll('.ad, .banner, [class*="ads"]').forEach(el => {
    el.style.display = 'none';
  });
});
observer.observe(document.body, { childList: true, subtree: true });

把這段腳本粘進腳本文件框，保存預覽，你會發現原來滾動到底部才彈出來的推薦廣告也被乾淨利落地拿掉了。

什麼人用得上？經常遇到動態廣告干擾、或者對打包體驗有極致追求的人；什麼人可以無視？打包的網站本來就比較乾淨，或者不介意偶爾冒出一兩個廣告的人。

坑：過濾元素不是萬能的

最後要說一個坑。過濾元素和 JS 注入本質上是對目標網站做「二次開發」，它們能處理的範圍其實有明確的邊界。有幾種情況是過濾元素完全搞不定的：

• 廣告開關存在 localStorage 裡（過濾元素管不到存儲層）
• 需要網路攔截才能處理的廣告（PakePlus 不支援請求攔截）
• 繞過付費牆（直接走破壞條款，這類乾脆別碰）

還有一個隱患：PakePlus 的打包條款明確寫了「僅限個人使用」，把第三方網站的打包產物批量分發、或者帶去廣告功能的版本公開傳播，可能觸及對方的服務條款。自用沒問題，傳播就要當心。

收尾：把工具用透才是真的省時間

PakePlus 定位是一款「小白也能用」的網站轉應用工具，所以它的高級選項全部藏在配置面板的深處，沒有任何入門引導會告訴你這些功能存在。但恰恰是這些沒有被廣泛討論的冷門配置，把這款工具從一個簡單的打包器變成了一個可以定制體驗、自動化多平台交付的完整工具鏈。

把它用透，其實就是把它當成一個可编程的 WebView 容器來看——打包只是起點，過濾元素、JS 注入、雲端並行編譯這些能力，才是真正讓它在同類產品裡脫穎而出的地方。

本文為個人基於網路公開資料整理編寫，非官方內容，僅供學習交流參考；軟體版權歸原作者所有，請支持正版；使用過程中遇到問題請查閱官方管道，本文不承擔任何責任。