background.js

// 監聽套件被初始安裝或更新時、瀏覽器更新時
chrome.runtime.onInstalled.addListener(() => {
  // 一次性的創建一個右鍵選單項目
  chrome.contextMenus.create({
    // 給予此選單項目的 ID
    "id": "showImageUrl",
    // 給予此選單項目顯示的名稱
    "title": "ShowImageURL",
    // 指定只在圖片上點擊右鍵才會顯示此選單項目
    "contexts": ["image"],
  })
})

// 監聽當點擊右鍵選單某個項目時
chrome.contextMenus.onClicked.addListener(function (info, tab) {
  // 確認點擊的項目 id 是 showImageUrl
  if (info.menuItemId !== "showImageUrl") { return }
  // 傳送訊息給目前頁面的內容腳本
  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
    chrome.tabs.sendMessage(tabs[0].id, { getUrl: true })
    // 套用（注入）報表用的 CSS 
    chrome.tabs.insertCSS({
      file: 'content.css'
    })
  })
})