我正在尝试编写一个 JavaScript 函数来打开我的扩展程序,就像单击扩展程序图标时一样。我知道如何在新标签页中打开我的扩展程序:
var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);
但是我想在浏览器的右上角打开一个弹出窗口,就像单击扩展图标时一样。
我正在尝试编写一个 JavaScript 函数来打开我的扩展程序,就像单击扩展程序图标时一样。我知道如何在新标签页中打开我的扩展程序:
var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);
但是我想在浏览器的右上角打开一个弹出窗口,就像单击扩展图标时一样。
Chromium 开发团队已明确表示他们不会启用此功能。请参阅功能请求:以编程方式打开扩展弹出气泡:
浏览器和页面操作弹出窗口的理念是它们必须由用户操作触发。我们的建议是使用新的 html 通知功能...
桌面通知可用于以编程方式向用户呈现一个小的 HTML 页面,就像您的弹出窗口一样。这不是一个完美的替代品,但它可能会提供您需要的功能类型。
Chrome 团队确实创建了一种以编程方式打开弹出窗口的方法,但它仅作为私有 API 启用,并且由于安全问题,使其普遍可用的计划已经停滞。
所以,截至 2018 年 3 月到目前为止,您仍然无法做到。
简短的回答是您无法以browserAction
编程方式打开。但是您可以dialog
使用您的内容脚本创建一个模拟您的内容browserAction
并显示它的脚本(以编程方式)。但是,您将无法background page
像从popup.html
. 您将不得不pass message
改为您的分机。
如前所述,没有用于此的公共 API。
我想出的一种解决方法是通过单击按钮将扩展作为内容脚本iframe
内部启动。因此,后台脚本将扩展 URL 发送到内容脚本以设置为 iframe 的,如下所示。src
背景.js
browser.runtime.onMessage.addListener((request) => {
if (request.open) {
return new Promise(resolve => {
chrome.browserAction.getPopup({}, (popup) => {
return resolve(popup)
})
})
}
})
内容-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 中打开扩展。您还需要将以下内容添加到清单中。
清单.json
....
"web_accessible_resources": [
"popup.html"
]
....
我有同样的要求:当用户点击扩展图标时,应该会打开一个小弹出窗口。就我而言,我正在编写一个扩展程序,该扩展程序将在单击图标时提供选择性股票的更新。这就是我的弹出窗口的样子。
如果您有相同的要求,请阅读下面的答案。
这就是我的manifest.json
文件的样子。
所有繁重的工作manifest.json
仅由文件处理。有一个部分browser_action
,其中有一个名为 的键default_popup
,只需输入您希望弹出窗口显示的 HTML 文件的名称。
我希望我的扩展能够在所有页面上工作,这就是我matches
在content_scripts
. 我真的不需要将 jquery 文件jquery-3.2.1.js
放在js
数组中,但是扩展管理器不允许我将该数组保持为空。
希望这会有所帮助,如果您对答案有任何疑问,请发表评论。