Chrome 如何使用JavaScript打开扩展的弹出窗口?

lawou6xi  于 2023-02-06  发布在  Go
关注(0)|答案(6)|浏览(387)

我正在尝试编写一个JavaScript函数,它可以像单击扩展图标一样打开扩展。我知道如何在新标签页中打开扩展:

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

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

mcvgt66p

mcvgt66p1#

Chromium开发团队已经明确表示不会启用此功能。请参阅Feature request: open extension popup bubble programmatically
浏览器和页面操作弹出窗口的理念是它们必须由用户操作触发。我们的建议是使用新的html通知功能...
Desktop notifications可以通过编程的方式向用户显示一个类似于弹出窗口的小HTML页面,它不是一个完美的替代品,但它可能提供了您需要的功能类型。

sirbozc5

sirbozc52#

Chrome团队 * 确实 * 创建了一个以编程方式打开弹出窗口的方法,但出于安全考虑,它只作为一个私有API和plans to make it generally available have stalled启用。
所以,截止到2018年3月截止到现在,还是不行。

ibps3vxo

ibps3vxo3#

简短的回答是你不能以编程方式打开browserAction。但是你可以用你的内容脚本创建一个dialog来模拟你的browserAction,并显示它是ntead(以编程方式)。但是你不能像从popup.html那样直接从这个弹出窗口访问你的扩展的background page。你必须使用pass message来代替你的扩展。

xn1cxnb4

xn1cxnb44#

如前所述,没有用于此目的的公共API。

我想到的一个解决方案是通过单击按钮将扩展作为content script中的iframe启动,这样后台脚本将向内容脚本发出扩展URL,将其设置为iframe的src,如下所示。

  • 背景.js*
browser.runtime.onMessage.addListener((request) => {
  if (request.open) {
    return new Promise(resolve => {
      chrome.browserAction.getPopup({}, (popup) => {
        return resolve(popup)
      })
    })
  }
})
  • 内容-脚本.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中打开扩展。您还需要将下面的添加到清单中。

  • 清单.json*
....
"web_accessible_resources": [
  "popup.html"
]
....
vm0i2vca

vm0i2vca5#

您可以通过在页面上与弹出窗口相同的位置显示一个固定的html元素来模拟弹出窗口,并将其样式设置为类似于弹出窗口。

vddsk6oq

vddsk6oq6#

我也有同样的要求:当用户点击扩展图标时,一个小的弹出窗口会打开。在我的例子中,我写了一个扩展,当图标被点击时,它会给予选择性股票的更新。这是我的弹出窗口看起来的样子。

如果您有相同的要求,请阅读下面的答案。
这是我的manifest.json文件的外观。

所有繁重的工作都是由manifest.json文件处理的。有一个browser_action部分,其中有一个名为default_popup的键,只需输入您希望弹出窗口显示的HTML文件的名称。
我希望我的扩展可以在所有页面上工作,这就是为什么我在content_scripts下添加了属性matches。我真的不需要把jquery文件jquery-3.2.1.js放在js数组中,但是扩展管理器不允许我保持该数组为空。
希望这有帮助,做评论,如果你有任何疑问的答案。

相关问题