從我使用 Chrome 擴展程序注入網頁的 iFrame 中獲取 LocalStorage

Question

我正在使用 Chrome 擴展程序將 iFrame 注入網頁。 iFrame 的來源是我構建的另一個網頁，它只是一個基本的待辦事項列表，將待辦事項存儲在 localstorage 中。

我希望能夠在我的 Chrome 擴展程序中（在后台腳本或內容腳本中）訪問本地存儲中的這些待辦事項。

不過，我對如何執行此操作有些困惑，因為 window.localStorage 只允許我訪問頁面的 localStorage。

如果我檢查 chrome 的控制台並查看應用程序選項卡上的 LocalStorage，我可以看到 iFrame 的 localStorage 中的待辦事項。

如您所見，在 google.com 上，xxxx.github.io 選項卡是我構建的應用程序的 localStorage，並且有關聯的待辦事項作為值。

我希望能夠在我的 chrome 擴展程序中訪問該 localStorage 數據。 但是，每當我使用 window.localStorage 時，我只能訪問“ https://www.google.com ”鍵值對。

是否可以訪問其他站點的鍵值對？

非常感謝您的幫助。

Answer 1

您可以使用postMessage API解決此問題。

使用 window.parent.postMessage("message", "*") 將消息從 iFrame 發送到父窗口。

然后，在您的內容腳本中添加一個消息監聽器來監聽消息。