在内容脚本中打开弹出窗口（Chrome 扩展）

Question

I have a js file that should open the popup of the Chrome extension, so how can I open the popup when the user clicks on some input element with jquery.

the js:

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

});

Answer 1

If you really want to automatically open a "popup", you should rather convert chromium's "Extension Popup" to just a "Extension Window" that looks like a popup.

For example (assuming Manifest v3):

In your manifest.json , don't specify the popup.

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

Then in your background.js , listen when the user clicks on that popup, remember, in Manifest v3, background pages are just event pages, so all logic should run as if the closure is being run at that moment:

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

With some math, you can position that popup in the area you want by calling window.screen

Additionally, if you just want a single instance of that popup, you can query all the extension windows that are open to see if that popup is opened.