JSON.stringify 使用時機

 您觀察得非常仔細！chrome.runtime.sendMessage 的 payload（或訊息物件本身）是否需要 JSON.stringify，主要取決於您要傳遞的數據類型以及您希望如何處理它。

核心原則：

chrome.runtime.sendMessage 的訊息參數（message）必須是 JSON-ifiable 的。這意味著它可以被安全地序列化為 JSON 字串，然後再被反序列化回原始的 JavaScript 類型。

常見的 JSON-ifiable 類型包括：

  • 基本類型： String, Number, Boolean, null.

  • 物件 (Object)： 只包含 JSON-ifiable 值的普通 JavaScript 物件。

  • 陣列 (Array)： 只包含 JSON-ifiable 值的陣列。

不能直接作為訊息傳遞的類型（需要特殊處理或避免）：

  • Functions

  • DOM Nodes

  • undefined (在序列化過程中可能會被忽略或轉為 null，取決於上下文)

  • Dates (會被轉換為 ISO 8601 字串)

  • RegExp

  • Error objects (直接傳遞會丟失很多資訊，最好提取 message 和 stack 作為字串)

  • Map, Set (需要先轉換為 Array 或 Object)

  • 包含循環引用的物件

JSON.stringify 的使用時機：

  1. 不使用 JSON.stringify (推薦的常見情況)：

    • 當您傳遞的 payload 本身就是一個簡單的 JavaScript 物件或陣列，且其所有屬性/元素都是 JSON-ifiable 的時，您不需要手動調用 JSON.stringify。

    • Chrome 的訊息傳遞系統會自動為您處理序列化和反序列化。

    • 示例：

            // popup.js
const itemData = { title: "開會", time: "2024-08-01T10:00:00Z" };
chrome.runtime.sendMessage({ type: 'ADD_ITEM', payload: itemData }); // 直接傳遞物件

// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'ADD_ITEM') {
    console.log(request.payload.title); // 可以直接訪問屬性
  }
});

    • 這是最常見也是最方便的做法。

  2. 使用 JSON.stringify (較少見，特定情況)：

    • 情況 A：如果您想傳遞一個已經是 JSON 字串的數據。 例如，您從某個地方獲取到的是一個 JSON 字串，並且您想原樣傳遞它，讓接收端自己去 JSON.parse。

    • 情況 B：如果您要傳遞的物件中包含一些非標準的 JSON-ifiable 類型，但您希望通過 JSON.stringify 的第二個參數 (replacer function) 或 toJSON 方法來自定義其序列化行為。 這種情況比較高級和少見。

    • 情況 C：如果您在某些特殊情況下，需要確保傳遞的就是一個純粹的字串，避免任何自動轉換。

    • 情況 D（您之前的例子）：傳遞 Error 物件時。

      • 直接傳遞 Error 物件 (chrome.runtime.sendMessage({ type: "AUTH_ERROR", payload: error });) 通常會導致資訊丟失，因為 Error 物件本身不是標準的 JSON-ifiable 結構，其 message, stack, name 等屬性在序列化時可能不會被完整保留。

      • 因此，對於 Error 物件，更好的做法是手動提取其重要屬性並構建成一個普通物件，或者使用 JSON.stringify(error, Object.getOwnPropertyNames(error)) 來嘗試捕獲更多屬性並將其轉換為字串。然後在接收端 JSON.parse。

              // popup.js - 發送 Error
} catch (error) {
    chrome.runtime.sendMessage({
        type: "AUTH_ERROR",
        // 手動構建一個包含錯誤信息的普通物件
        payload: {
            message: error.message,
            name: error.name,
            stack: error.stack // stack 可能是個很長的字串
        }
        // 或者使用您之前的 stringify 方法
        // payload: JSON.stringify(error, Object.getOwnPropertyNames(error))
    });
}

// background.js - 接收 Error
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === "AUTH_ERROR") {
        // 如果 popup 發送的是普通物件
        console.error("Error from popup:", request.payload.message);
        // 如果 popup 發送的是 stringify 後的字串
        // const errorDetails = JSON.parse(request.payload);
        // console.error("Error from popup:", errorDetails.message);
    }
});

總結：

  • 大多數情況下，您不需要手動對 payload 使用 JSON.stringify。 直接傳遞簡單的 JavaScript 物件或陣列，Chrome 會自動處理序列化。

  • 只有在特殊情況下，例如處理 Error 物件、自定義序列化行為、或者您明確需要傳遞一個 JSON 字串時，才需要考慮使用 JSON.stringify。

  • 當您使用了 JSON.stringify 發送數據時，接收端通常需要使用 JSON.parse 來將其還原。

對於您正常的 itemData（包含標題、時間等），直接傳遞物件本身是最佳實踐。對於錯誤處理，像您之前那樣對 Error 物件進行 JSON.stringify 是一種確保能傳遞更多錯誤細節的方法。

留言

張貼留言

這個網誌中的熱門文章

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 (可選)...
閱讀完整內容

計算 Canvas 文字最大字體

 好的，我將產生一個 HTML 頁面，其中包含一個 Canvas 元素和一個文字輸入框。當你在輸入框中輸入文字並點擊按鈕後，程式碼會自動計算出在指定的 Canvas 寬度內，該文字能夠完整顯示的最大字體大小，並將該字體大小的文字繪製在 Canvas 上。 <html> <head> <title>計算 Canvas 文字最大字體</title> <style> #myCanvas { border: 1px solid black; } </style> </head> <body> <div> <label for="inputText">輸入文字:</label> <input type="text" id="inputText" value="Hello"> </div> <div> <label for="canvasWidth">Canvas 寬度:</label> <input type="number" id="canvasWidth" value="300"> </div> <button id="calculateBtn">計算並繪製</button> <canvas id="myCanvas" width="300" height="100"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const inputText = document.getElementById('inputText...
閱讀完整內容