使用Chrome擴展內容腳本嵌入其他內容

Question

我正在研究將擴展內容添加到特定頁面的Chrome擴展。從我的研究，這聽起來像我想要的是content script將執行適當的網頁。我可以使用content_script.matches manifest.json字段指定「適當的頁面」。

但是，我遇到的問題是內容腳本運行在一個孤立的世界，separate from the rest of your extension。

我如何設想我的擴展是一組UI pages，它將被內容腳本嵌入到適當的頁面中。 background page將包含構建UI頁面內容的代碼。後臺頁面以及擴展後的UI頁面需要訪問各種Chrome API（例如本地存儲），以及能夠進行跨域請求以檢索其數據。但是，似乎這是不可能的，因爲內容腳本運行在一個孤立的世界中，並且無法訪問我需要的Chrome API。

Message passing允許內容腳本從後臺頁面發送和接收數據，但不允許您獲取UI頁面並將其嵌入到當前網頁中。

我最初認爲當我能夠製作jQuery AJAX request from my content script for an UI page時，我在這方面取得了一些進展，但只讓我看到HTML文件本身。我的UI頁面依靠代碼來編程地構建內容 - 它不僅僅是一個靜態的HTML頁面。而且「構建頁面」JavaScript代碼取決於內容腳本不可用的Chrome API。所以，如果我只是試圖製作我所有的UI頁面和JavaScript資源web_accessible_resources，我可以將它們注入頁面，但它們無法運行。

這讓我想到我的問題：內容腳本如何拉下或嵌入UI pages可以調用背景頁面中的代碼？

Answer 1

Tldr：你需要閱讀關於在內容/背景之間發送消息。它在文檔和許多樣本中。

Answer 2

從我所能找到的，我期望的架構（如我的問題所述）在Chrome擴展中是不可能的。 Chrome的安全模式需要採用不同的方法。這是爲我工作的。

• 製作您的模板，JavaScript文件以及您的用戶界面的一部分web_accessible_resources。
• 使用您的內容腳本加載這些資源並在適當的時間/位置將其顯示給用戶。
• （Almost）任何對chrome.* API的調用都需要通過background page或event page完成。在我的情況下，「背景頁面」嚴格來說是JavaScript，沒有HTML。
• 您的內容腳本和用戶界面可以將messages發送到您的背景/活動頁面。

該模型與Web應用程序的傳統客戶端/服務器體系結構不同。 「後臺頁面」就像你的服務器，你的內容腳本可以發送「消息」（認爲是HTTP請求）到「後臺頁面」，就像它可能向你的服務器發送請求一樣。

與服務器一樣，後臺頁面可以訪問內容腳本沒有的資源，例如後臺頁面可以使用更多的chrome APIs。

這一心理比喻幫助我的方式（到目前爲止）以「重新設計」我的應用程序工作Chrome擴展的安全模型中。我原來一直在思考傳統桌面應用程序的更多方面，整個應用程序可以執行跨域請求或寫入文件系統等操作。但是，Chrome擴展程序和應用不能以這種方式工作。