如何用JavaScript打开我的扩展程序弹出窗口？

Question

我正在尝试编写一个JavaScript函数，它会在点击扩展图标时打开我的扩展程序。我知道如何在新标签中打开我的扩展程序：

var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);

但我想在浏览器的右上角打开一个弹出窗口，就像点击扩展图标一样。

Answer 1

Chromium开发团队明确表示他们不会启用此功能。见Feature request: open extension popup bubble programmatically ：

  

浏览器和页面操作弹出窗口的理念是它们必须由用户操作触发。我们的建议是使用新的HTML通知功能......

可以使用

Desktop notifications以编程方式向用户显示一个与您的弹出窗口类似的小HTML页面。它不是一个完美的替代品，但它可能提供您需要的功能类型。

Answer 2

Chrome小组 创建了一种以编程方式打开弹出窗口的方法，但它仅作为私有API启用，而plans to make it generally available have stalled则出于安全考虑。

所以，截至2018年3月的 截至目前，你仍然无法做到。

Answer 3

简短回答是您无法以编程方式打开browserAction。但是，您可以使用内容脚本创建dialog，该脚本会模拟您的browserAction并显示该内容（以编程方式）。但是，您无法直接从此弹出窗口background page访问您的扩展程序popup.html。您必须pass message代替您的扩展程序。

Answer 4

如前所述，没有公共API。

我想出的一种解决方法是，通过单击按钮，在content script内以iframe的形式启动扩展。从而后台脚本发出内容脚本的扩展URL，以将其设置为iframe的src，如下所示。

background.js

browser.runtime.onMessage.addListener((request) => {
  if (request.open) {
    return new Promise(resolve => {
      chrome.browserAction.getPopup({}, (popup) => {
        return resolve(popup)
      })
    })
  }
})

content-scipt.js

const i = document.createElement('iframe')
const b = document.createElement('button')
const p = document.getElementById('some-id')

b.innerHTML = 'Open'
b.addEventListener('click', (evt) => {
  evt.preventDefault()
  chrome.runtime.sendMessage({ open: true }, (response) => {
    i.src = response
    p.appendChild(i)
  })
})
p.appendChild(b)

这将在脚本运行所在页面的DOM中打开扩展名。您还需要将以下内容添加到清单中。

manifest.json

....
"web_accessible_resources": [
  "popup.html"
]
....

Answer 5

我有同样的要求：当用户点击扩展图标时，应打开一个小弹出窗口。在我的情况下，我正在编写一个扩展程序，只要点击图标就会对选择性股票进行更新。这就是我弹出窗口的样子。

如果您有相同的要求，请阅读以下答案。

这是manifest.json文件的显示方式。

所有繁重的工作仅由manifest.json文件处理。其中有一个browser_action部分，其中有一个名为default_popup的密钥，只需输入您希望弹出窗口显示的HTML文件的名称。

我希望我的扩展能够在matches下添加属性content_scripts的所有页面上工作。我真的不需要将jquery文件jquery-3.2.1.js放在js数组中，但扩展管理器不允许我将该数组保持为空。

希望这有帮助，如果您对答案有任何疑问，请发表评论。