在內容腳本中打開彈出窗口（Chrome 擴展）

Question

我有一個 js 文件應該打開 Chrome 擴展程序的彈出窗口，所以當用戶單擊帶有 jquery 的某些輸入元素時，如何打開彈出窗口。

js：

$(document).ready(function(){
$("input").focus(function(){ 
        //open popup
});

});

Answer 1

如果您真的想自動打開一個“彈出窗口”，您應該將 chromium 的“擴展彈出窗口”轉換為一個看起來像彈出窗口的“擴展窗口”。

例如（假設清單 v3）：

在您的manifest.json中，不要指定彈出窗口。

  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "128": "icon.png"
    }
  }

然后在你的background.js中，當用戶點擊那個彈出窗口時，請記住，在 Manifest v3 中，背景頁面只是事件頁面，所以所有邏輯都應該像當時正在運行的閉包一樣運行：

chrome.action.onClicked.addListener(() => {
  chrome.windows.create({
    focused: true,
    width: 400,
    height: 600,
    type: 'popup',
    url: 'popup.html',
    top: 0,
    left: 0
  },
  () => {})
})

通過一些數學運算，您可以通過調用 window.screen 在您想要的區域彈出window.screen

此外，如果您只想要該彈出窗口的單個實例，您可以查詢所有打開的擴展 windows 以查看該彈出窗口是否打開。