使用 Data URL 或是 Blob URL，開新視窗

 想把所有 HTML 內容和資料通通集中在 contentscript.js 裡維護，又不想去多建立一個 popup.html 檔案，最穩定、100% 成功、且不佔用實體檔案空間的官方標準解法叫做：「使用 Data URL 或是 Blob URL，直接把 HTML 當成網址傳給後台開啟」！

請為我看看並改用以下這個極致精簡的改法，保證新視窗一跳出來就有內容：

🛠️ 終極無檔案開窗法：Data URL 注入

我們可以直接把你想寫的 HTML 原始碼轉成一個網址字串（Data URL），直接讓後台去建立這個網窗。這樣前台不需要隔空抓取 window 控制權，新視窗誕生時就自帶內容！

1. 前台 contentscript.js

直接在字串裡面把 HTML 結構、CSS 樣式與你反白的短網址資料通通串好，然後透過 btoa（Base64 編碼）轉成一個虛擬網址傳給後台：


// contentscript.js 內部的全新極簡觸發函式

function showPopupInNewWindow(selectedText) {
    // 1. 這裡是你原本寫在同一個檔案裡的 HTML 內容，資料 (${selectedText}) 直接填入
    const htmlContent = `
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>短網址還原工具箱</title>
            <style>
                body { font-family: sans-serif; padding: 20px; background: #f5f5f5; color: #333; }
                h3 { color: #27ae60; margin-top: 0; }
                .content-box { background: white; padding: 12px; border-radius: 6px; border: 1px solid #ddd; word-break: break-all; font-size: 14px; }
                button { background: #e74c3c; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
            </style>
        </head>
        <body>
            <h3>🔍 蝦皮短網址精確還原結果</h3>
            <div class="content-box">${selectedText}</div>
            <br>
            <button onclick="window.close()">關閉視窗</button>
        </body>
        </html>
    `;

    // 2. 將 HTML 字串安全地轉換為 Base64 網址格式
    // unescape(encodeURIComponent) 是為了完美防呆，防止中文字元在轉碼時出現亂碼
    const base64Html = btoa(unescape(encodeURIComponent(htmlContent)));
    const dataUrl = `data:text/html;charset=utf-8;base64,${base64Html}`;

    // 3. 把這個自帶內容的魔術網址傳給後台
    chrome.runtime.sendMessage({
        action: "openWindowWithUrl",
        url: dataUrl
    });
}

// 測試觸發
// showPopupInNewWindow("https://shopee.tw...");

2. 後台 background.js

後台程式碼變得更單純，它不需要管什麼非同步回傳或抓取 ID，純粹當個開窗工具人，直接把前台丟過來的 dataUrl 當作普通網址打開：


// background.js 一行收工

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "openWindowWithUrl" && message.url) {
        // 直接開啟這個已經塞滿 HTML 的虛擬網址
        chrome.windows.create({
            url: message.url,
            type: "popup",
            width: 450,
            height: 320
        });
    }
});

為什麼這個做法最優、絕對不會出現空白頁？

  1. 擺脫進程監聽問題：原來的寫法是「開窗 ➔ 隔空抓取 ➔ 寫入」，這中間只要慢了 0.01 秒，瀏覽器就會漏掉控制權。現在的寫法是「內容在誕生前就打包在網址裡」，新視窗在開窗的瞬間就是帶著你的 HTML 出生的，絕對不可能出現白色空白頁。

  2. 依舊維持單一檔案：完美實現你原本的期望，所有的排版、中文字、CSS 依然通通寫在同一個 contentscript.js 檔案中，不需要多建立任何外掛檔案。

  3. 完美支援中文字：程式碼中加入了 unescape(encodeURIComponent()) 防護，你寫在 HTML 裡面的「短網址還原結果」等中文字體，在新視窗中顯示時絕對不會變成怪異的亂碼。

留言

張貼留言

這個網誌中的熱門文章

Offscreen Canvas

 你說得完全正確！這是一個非常經典的效能最佳化思路。如果尖刺框的參數沒有改變，重複計算所有尖刺的路徑和幾何形狀確實是一種浪費。 有幾種方法可以「記憶」或快取你畫的尖刺框，避免不必要的重繪計算： 快取到一個離屏 Canvas (Offscreen Canvas) - 最推薦的方法 原理 ：創建一個與主 Canvas 大小相同（或者只需要能容納尖刺框的大小）的隱藏 Canvas。當尖刺框的參數改變時，或者第一次繪製時，將完整的尖刺框（包括尖刺和中間的填充橢圓）繪製到這個離屏 Canvas 上。 後續繪製 ：在主 Canvas 的每一幀渲染時，如果尖刺框的參數沒有改變，你只需要使用 ctx.drawImage() 將離屏 Canvas 的內容直接繪製到主 Canvas 的目標位置即可。這遠比重新計算和繪製所有尖刺要快得多。 優點 ： 效能提升顯著， drawImage 非常快。 代碼結構清晰，繪製邏輯和快取邏輯分離。 可以快取包含複雜效果（如漸層、陰影等）的圖形。 缺點 ： 需要額外的記憶體來儲存離屏 Canvas。對於大多數尖刺框來說，這通常不是問題。 如果尖刺框需要動態改變大小或位置，離屏 Canvas 的管理（重新創建或調整大小）需要考慮。 快取路徑指令 (Path2D Object) - 適用於路徑本身 原理 ： Path2D 物件可以儲存一系列的 Canvas 路徑指令（ moveTo , lineTo , ellipse , bezierCurveTo 等）。當尖刺框的參數改變時，你構建一個或多個 Path2D 物件來代表尖刺框的各個部分（例如，一個 Path2D 給中心橢圓，另一個給所有尖刺的集合）。 後續繪製 ：如果參數未變，你可以直接使用 ctx.fill(cachedPath) 或 ctx.stroke(cachedPath) 來繪製已儲存的路徑。 優點 ： 比重新執行所有 moveTo/lineTo 更快一些，因為路徑已經編譯好了。 記憶體佔用可能比離屏 Canvas 小。 缺點 ： Path2D 只儲存路徑，不儲存樣式（顏色、線寬等）。你仍然需要在繪製時設定 ctx.fillStyle , ctx.strokeStyle , ctx.lineWidth 。 對於你用 drawTaperedLine 繪製的填充錐形尖刺，...
閱讀完整內容

外部網頁新增 Google 日曆行程(URL模板)

  好的，從外部網頁新增 Google 日曆行程，最常用且最簡單的方法是使用 Google Calendar Event Publisher Guide 提供的 URL 模板 。這種方法不需要複雜的 API 整合或使用者授權流程 (OAuth)，只需要產生一個特殊格式的連結即可。 使用者點擊這個連結後，會被導向到他們自己的 Google 日曆，並看到一個預先填好資訊的新增行程頁面，他們只需要確認並儲存即可。 以下是詳細步驟和說明： 方法：使用 Google 日曆事件發布連結 (URL Template) 基本 URL 結構： https: //www.google.com/calendar/render?action=TEMPLATE 添加參數以預填行程資訊： 在基本 URL 後面加上 & 和 參數名稱=參數值 來指定行程細節。重要的參數包括： text : 行程標題 (必填) 。 範例： &text=團隊會議 dates : 行程開始和結束時間 (必填) 。格式非常重要，必須是 ISO 8601 格式，且 強烈建議使用 UTC (世界標準時間) ，以避免時區混淆。 特定時間格式： YYYYMMDDTHHMMSSZ/YYYYMMDDTHHMMSSZ (Z 表示 UTC) 範例 (2024年7月26日 UTC 下午 2:00 到 3:00)： &dates=20240726T140000Z/20240726T150000Z 全天事件格式： YYYYMMDD/YYYYMMDD (結束日期是 不包含 的那一天的日期，所以通常是開始日期加一天) 範例 (2024年7月27日全天)： &dates=20240727/20240728 location : 行程地點 。 範例： &location=台北101會議室 details : 行程說明或備註 。可以包含換行符號 ( \n )。 範例： &details=討論下一季專案規劃。\n請攜帶筆記型電腦。 sprop : 來源網站資訊 (可選，但建議加入)。 範例： &sprop=name:我的網站名稱&sprop=url:https://www.mywebsite.com add : 邀請的賓客 Email (可選)...
閱讀完整內容

批次rename

將 0_1.png 重新命名為 001.png  和  將 0_11.png 重新命名為 011.png Get-ChildItem "*_*.png" | ForEach-Object { $parts = $_ .Name.Split( '_' ) if ( $parts .Length -eq 2) { $prefix = $parts [0] $number = $parts [1].Replace( ".png" , "" ) $newName = "{0}{1:D2}.png" -f $prefix , [int] $number Rename-Item -Path $_ .FullName -NewName $newName } } 指令解說： $parts = $_.Name.Split('_') ：將檔名  0_1.png  用  _  分割成  0  和  1.png  兩部分。 $number = $parts[1].Replace(".png", "") ：取得數字部分，並移除副檔名。 "{0}{1:D2}.png" -f $prefix, [int]$number ：這是最關鍵的一步。 -f  是 PowerShell 的格式化運算子。 {0}  代表第一個變數 ( $prefix )。 {1:D2}  代表第二個變數 ( [int]$number )， D2  的意思是以 整數 (Decimal)  格式輸出，且固定為  2 位數 (2-digits) ，如果不足，左邊會自動補 0。 這行指令會將  0  和  1  組合並格式化成  001.png ，將  0  和  11  組合格式化成  011.png 。 使用 PowerShell (Windows 內建，功能最強) PowerShell 是 Windows 內建的現代化命令列工具，處理這類任務非常靈活且安全。 操作步驟：...
閱讀完整內容