在内容脚本中打开弹出窗口（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 以查看该弹出窗口是否打开。