web_accessible_resources

描述

有時，您會希望將資源（例如圖片、HTML、CSS 或 JavaScript）打包到擴充套件程式中，並使其可供網頁和其他擴充套件程式訪問。

例如，Beastify 示例擴充套件會用使用者選擇的野獸圖片替換網頁。野獸圖片隨擴充套件程式打包。為了使選定的圖片可見，擴充套件程式會新增 <img> 元素，其 src 屬性指向野獸的圖片。為了讓網頁能夠載入這些圖片，它們必須設為 Web 可訪問。

使用 web_accessible_resources 鍵，您可以列出所有希望提供給網頁的打包資源。您將它們指定為相對於 manifest.json 檔案的路徑。

請注意，內容指令碼不需要列為 Web 可訪問資源。

如果某個擴充套件程式希望使用 webRequest 或 declarativeNetRequest 將公共 URL（例如 HTTPS）重定向到打包在擴充套件程式中的頁面，那麼該擴充套件程式必須在 web_accessible_resources 鍵中列出該頁面。

Manifest V2 語法

在 Manifest V2 中，Web 可訪問資源會以陣列的形式新增到鍵下，如下所示：

"web_accessible_resources": [
  "images/my-image.png"
]

Manifest V3 語法

在 Manifest V3 中，web_accessible_resources 鍵是一個物件陣列，如下所示：

{
  // …
  "web_accessible_resources": [
    {
      "resources": ["test1.png", "test2.png"],
      "matches": ["https://web-accessible-resources-1.example.com/*"]
    },
    {
      "resources": ["test3.png", "test4.png"],
      "matches": ["https://web-accessible-resources-2.example.com/*"],
      "use_dynamic_url": true
    }
  ]
  // …
}

每個物件都必須包含一個 "resources" 屬性，以及以下屬性中的 "matches" 或 "extension_ids" 屬性之一：

使用 web_accessible_resources

假設您的擴充套件程式包含一個圖片檔案，路徑為 images/my-image.png，如下所示：

my-extension-files/
    manifest.json
    my-background-script.js
    images/
        my-image.png

要使網頁能夠使用 <img> 元素，其 src 屬性指向此圖片，您需要如下指定 web_accessible_resources：

"web_accessible_resources": ["images/my-image.png"]

然後，可以透過類似以下的 URL 訪問該檔案：

moz-extension://<extension-UUID>/images/my-image.png"

<extension-UUID> **不是**您的擴充套件程式的 ID。此 ID 是為每個瀏覽器例項隨機生成的。這可以防止網站透過檢查使用者安裝的擴充套件程式來對其進行指紋識別。

獲取資源 URL 的推薦方法是使用 runtime.getURL，並傳入相對於 manifest.json 的路徑，例如：

browser.runtime.getURL("images/my-image.png");
// something like:
// moz-extension://944cfddf-7a95-3c47-bd9a-663b3ce8d699/images/my-image.png

此方法可以為您提供正確的 URL，而不管您的擴充套件程式執行在哪個瀏覽器上。

萬用字元

web_accessible_resources 條目可以包含萬用字元。例如，以下條目也可以包含 "images/my-image.png" 處的資源：

  "web_accessible_resources": ["images/*.png"]

安全

如果您使某個頁面 Web 可訪問，任何網站都可以連結或重定向到該頁面。然後，該頁面應將任何輸入（例如 POST 資料）視為來自不受信任的來源，就像普通網頁一樣。

Web 可訪問的擴充套件資源不會被 CORS 或 CSP 阻止。由於能夠繞過安全檢查，擴充套件程式應儘可能避免使用 Web 可訪問的指令碼。Web 可訪問的擴充套件指令碼可能會被惡意網站意外濫用，從而削弱其他網站的安全性。請遵循 安全最佳實踐，避免在網頁中注入 moz-extension:-URL，並確保第三方庫是最新的。

示例

Manifest V2 示例

"web_accessible_resources": ["images/my-image.png"]

使 "images/my-image.png" 處的檔案的 Web 可訪問，以便任何網站和擴充套件程式都可以訪問。

Manifest V3 示例

"web_accessible_resources": [
  {
    "resources": [ "images/my-image.png" ],
    "extension_ids": ["*"],
    "matches": [ "*://*/*" ]
  }
]

使 "images/my-image.png" 處的檔案的 Web 可訪問，以便任何網站和擴充套件程式都可以訪問。

建議僅在需要時指定 extension_ids 或 matches。例如，如果資源只需要在 example.com 的網頁上可訪問：

"web_accessible_resources": [
  {
    "resources": [ "images/my-image.png" ],
    "matches": [ "https://example.com/*" ]
  }
]

擴充套件程式示例

• beastify
• dnr-redirect-url

瀏覽器相容性