Hi Dai Gei Ho~ 我是Winnie ~

連續幾天我們介紹了需多關於 Chrome Extension 常見API的使用方法。

但在今天文章結束後，此系列方法應用篇將先吿一個段落，我們將朝下一階段『使用Vite＆Vue開發Extension』篇來進行應用介紹了。但但...老話一句，因為在官方文件中還是有提供許多神奇的方法，如有興趣的朋友可以功能需求在文件中查詢相關使用方法 。

接著，在今天文章我們要來介紹 如何將 檔案或者圖片資源 放在 Extension 端。

這是什麼意思呢？

先讓我們來看看，如果分別在Popup 及 Content Script 頁面中加上<img src="./logo.png">會是怎麼樣呢？

首先在 Popup 彈跳視窗中，圖片正常出現

那 Content Script呢？ 應該沒有意外會破圖

這是爲什麼呢?

因為我們在<img src="./logo.png">將圖片路徑指定為相對路徑，自然而然在contentScript中 ./logo.png 就會自動去抓當前頁面的host，以致於當前頁面找不到此圖。

相反的，因為彈跳視窗 與 logo.png 都是存在於 Extension端 ，所以Popup 視窗可以使用相對路徑來取logo圖。

所以為了要讓 圖片可以在 Content Scipt 中顯示，我們可以透過 chrome.runtime.getURL() 來存取到擴充套件內部檔案的 URL 指定給 <img>

註冊 Web 可訪問資源

首先，如果 Web 要讀取 Extension 中任何 圖片或其他檔案 的資源，需透過"web_accessible_resources"聲明資源才可公開訪問其資源，
同樣地，也需在Manifest中進行聲明。

{
  ...
  "web_accessible_resources": [
    {
      "resources": [ "logo.png", "/images/*"],
      "matches": [ "https://*/*" ],
      use_dynamic_url:true;
    }
  ],
  ...
}

在宣告 資源公開的條件中包含以下屬性可以進行設定：

resources:

在 resources 中可以指定 任何檔案，或者透過/image/*來宣告目錄下的檔案

matches:

透過matchese可以指定哪些頁面可以訪問資源的 URL 。

use_dynamic_url:

如果將use_dynamic_url設置為 true，則會生成動態ID，且允許通過動態 ID 訪問資源。它會在在瀏覽器重新啟動或擴展重新加載時重新生成。

extension_ids

透過指定 extension id 可以 指定哪些Extension可以訪問資源。

取得資源

當聲明完可公開資源後，接著我們就可以透過 chrome.runtime.getURL() 可以取得Extension 內部檔案的 URL， 而完整URL樣子為 chrome-extension://[extension ID]/logo.png

 // content.js
 
 const imgURL = chrome.runtime.getURL('logo.png');
 const div = document.createElement('div');
 
 div.innerHTML = `<img src="${imgURL}" alt="logo圖"">`;

 document.body.appendChild(div);
 

以上就是關於 如何將檔案或者圖片資源 放在 Extension 端的介紹，那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!

每日有感而發:

剛剛的地震

晃啊晃的 讓我以為自己寫文章寫暈了
回過神才發現 是地震RRR
今天想分享一首 -> 無眠