讓 Line 網頁版開機自動登入+全螢幕顯示

上一篇「讓 Line 網頁版能開機自動執行」留下的小問題是，Line 網頁版每次開機都得重新輸入密碼，本篇將說明如何將這件事程式化，可以開機自動執行，並優化操作界面。 不過必須先提醒，本篇流程包含的知識與技術很複雜，若沒有相當的 Javascript 基礎不容易理解，所以不適合新手閱讀。 (圖片出處: chatgpt.com)

一、原理說明

本篇的任務相當複雜，要解決的狀況很多，以下先一一說明困難點及解法的原理： 1. Puppeteer要讓瀏覽器行為開機自動化執行，必須學會操作 Puppeteer 來控制 Chrome 的所有行為。而 Puppeteer 須在 Node.js 環境執行，所以系統必須先安裝 Node.js 及 Puppeteer。 不熟悉的話可先看我另一篇實作「FB 社團爬蟲實作範例﹍使用 Node.js 操作 Puppeteer」，作為上手參考之用。 2. Chromium 瀏覽器準備動作安裝 Puppeteer 時會自動下載一個 Chromium 瀏覽器，如果直接用 Puppeteer 操作這個 Chromium 無法完成本篇任務，因為這個原始的 Chromium 是空白狀態。 要執行 Line 網頁版得先安裝 Line 套件，所以需先為這個 Chromium 瀏覽器登入、設定一個 Google 帳號，並安裝 Line 套件，供 Puppeteer 呼叫使用者及套件。 3. 載入使用者為了讓 Puppeteer 能啟動 Chromium 時載入特定使用者，花了很多時間嘗試，最後才知道字元格式要完全正確才不會報錯，參數原理可參考這個討論串「In Puppeteer how to switch to chrome window from default profile to desired profile」。 4. 載入套件要讓 Puppeteer 啟動 Chromium 時預先載入特定套件，同樣也不是一件簡單的事，正確作法可參考官網說明文件「Chrome Extensions」。 5. 讓 Puppeteer 背景執行最後一個卡關的坑是，為了開機能執行 Puppeteer 來操作 Chromium，必須寫 .bat 執行檔放入 Windows「啟動」資料夾，但是自動執行後會發現，執行 .bat 檔跳出的那個 DOS 命令視窗，會一直出現在作業系統，如果不小心把這個視窗關了，Puppeteer 也會自動停止執行，這代表 Chromium 會被立即關閉，那麼想當然 Line 網頁版也就消失了。 要解決這件事的話，必須讓執行 Puppeteer 的 .js 檔在背景執行，找到的工具是「PM2」，改用 PM2 來執行 js 再關閉 DOS 視窗就行了。

二、範例程式碼

以下提供 Puppeteer 操作 Line 網頁版的範例程式碼： let puppeteer = require("puppeteer"); let username = "xxxxxxxx"; // 填入帳號 let password = "xxxxxx"; // 填入密碼 (async function() { const browser = await puppeteer.launch({ headless: false, args: ["--user-data-dir=C:\\Users\\使用者名稱\\AppData\\Local\\Google\\Chrome for Testing\\User Data", // 填入 chromium 使用者路徑 "--profile-directory=Default", // 使用第一個預設使用者 "--disable-extensions-except=C:\\Users\\wayne\\AppData\\Local\\Google\\Chrome for Testing\\User Data\\Default\\Extensions\\ophjlpahpchlmihnnnihgmmeilfjmjjc\\3.4.0_0", // 填入 Line 套件路徑 "--load-extension=C:\\Users\\wayne\\AppData\\Local\\Google\\Chrome for Testing\\User Data\\Default\\Extensions\\ophjlpahpchlmihnnnihgmmeilfjmjjc\\3.4.0_0", // 填入 Line 套件路徑 "--disable-infobars" // 隱藏系統訊息欄 ] }); // 所有打開的頁面 const pages = await browser.pages(); // 初始空白頁面 const page = pages[0]; // 設置超時時間為 0 代表無限制 page.setDefaultTimeout(0); await page.goto("chrome-extension://ophjlpahpchlmihnnnihgmmeilfjmjjc/index.html#"); await page.waitForSelector("form"); // 先清空使用者名稱 await page.evaluate(function() { document.querySelector("input[type='email']").value = ''; }); // 模擬輸入帳號密碼 await new Promise(r => setTimeout(r, 500)); await page.type("input[type='email']", username); await new Promise(r => setTimeout(r, 500)); await page.type("input[type='password']", password); await new Promise(r => setTimeout(r, 500)); await page.click("button[type='submit']"); await page.waitForNavigation(); // 最小化 const session = await page.target().createCDPSession(); const { windowId } = await session.send("Browser.getWindowForTarget"); await session.send("Browser.setWindowBounds", { windowId, bounds: { windowState: "minimized" } }); // 全螢幕 await page.evaluate(() => { const elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } }); })();以上紅字需要填入的資訊說明如下：

• 帳號、密碼：請填入自己的 Line 帳號密碼
• chromium 使用者路徑：Puppeteer 自動下載的 chromium 應該會在 Windows 系統的使用者資料夾產生一個 "Chrome for Testing"資料夾，如果你的使用者資料夾有找到類似這裡紅字的路徑，那麼直接把這裡的路徑改成你的使用者名稱即可
• 使用第一個預設使用者：這裡的設定值會抓第一個設定登入的使用者，所以請確認你已經至少設定了一個有登入的使用者
• Line 套件路徑：有兩處要填入裝在 chromium 的 Line 套件路徑，請先確認你已在 chromium 的預設使用者安裝了 Line 套件。然後可在電腦搜尋 Line 的套件 ID 字串 "ophjlpahpchlmihnnnihgmmeilfjmjjc"，找到後查看完整資料夾路徑，後面會有版本編號，將你的版本編號置換原本的字串 "3.4.0_0"

程式碼其他的說明已用註解標示，特別說明以下兩段程式碼的作用：

• 最小化：讓 Line 網頁版執行後可以最小化
• 全螢幕：讓 Line 網頁版顯示的時候能進入全螢幕模式，好處是可隱藏網址列，增加可視範圍

三、完整操作流程

講解完範例程式碼後，以下說明完整的流程如何操作： 1. Puppeteer參考前面說明，安裝 Node.js 及 Puppeteer，完畢後會自動下載 Chromium 瀏覽器。 要執行這個 Chromium 的話，可在電腦中搜尋 chrome.exe，通常會找到兩個，黃色圖示那個是平常執行的 Chrome，藍色圖示那個就是 Chromium。 2. 安裝 Line 網頁版執行剛剛提到的藍色圖示那個 Chromium：

• 登入 Google 帳號，讓瀏覽器右上角出現帳號圖示，這就是預設使用者
• 使用這個帳號安裝 Line 網頁版套件

完成以上流程後，就可在電腦搜尋 Line 的套件 ID 字串 "ophjlpahpchlmihnnnihgmmeilfjmjjc"，找到後查看完整資料夾路徑，後面會有版本編號，將你的版本編號置換範例程式碼中的版本編號。 3. JS 執行檔將範例程式碼的紅字參數都修改完後，存成一個 .js 檔，並記住路徑，例如： D:\startUp\line.js4. 安裝 PM2參考官網說明「Installing PM2」來安裝，例如執行以下命令： npm install pm2 -g5. 製作 .bat 檔將以下內容存成 .bat 檔，例如 line.bat： @echo off pm2 start D:\startUp\line.js exitline.js的路徑請改為前面自己儲存的 .js 檔案路徑。 6. 開機執行 .bat 檔最後將這個 line.bat(或自訂檔名) 放入 Windows 啟動資料夾，路徑如下： C:\Users\使用者名稱\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup將「使用者名稱」改成自己的名稱即可，開機就會看到 Line 網頁版啟動、自行輸入帳號密碼，然後視窗自動縮小的畫面了。