如何通过background.html以编程方式打开chrome扩展弹出窗口

2mbi3lxu  于 2023-02-01  发布在  Go
关注(0)|答案(6)|浏览(242)

先谢了!
我想实现的是当我的扩展在网页上检测到一个特殊的标签时打开弹出窗口。搜索了一会儿后,似乎只有当用户单击扩展时才能打开弹出窗口。这是真的吗?
或者我可以得到我的扩展图标在浏览器上的位置吗?也许我可以画一个窗口,并显示在扩展图标下,使它看起来像弹出窗口。

rkkpypqq

rkkpypqq1#

This guy想要相反的效果,不能让他的弹出窗口不打开。看看他的代码打开你的弹出页面;)

hmae6n7t

hmae6n7t2#

如果用户不点击扩展窗口,则无法打开该窗口...但是,您可以在新选项卡中打开扩展弹出页面,如下所示:

1)在清单文件中设置background page ...

"background_page": "background.html",

这是你将运行代码,看看是否检测到特殊标记...后台页面可以不断地在后台运行代码,它是由你来设置一个重复循环,以检查你的变量条件是否是真的,每隔一段时间...

2)在清单文件中启用tabs permission ...

"permissions": [ "tabs" ],

步骤3(允许后台页打开新选项卡)需要此权限

3)后台页面调用create,指向扩展弹出url。

if(condition == true){
  chrome.tabs.create({url:"popup.html"});
}
xpszyzbs

xpszyzbs3#

你不能假装点击浏览器动作,但你仍然可以像平常的窗口弹出一样从后台脚本打开弹出页面,它会像预期的那样工作。例如,你的浏览器动作的html页面是“popup.html”

window.open("popup.html", "extension_popup", "width=300,height=400,status=no,scrollbars=yes,resizable=no");

注意:你只能从后台脚本(事件页面)调用它。因此你需要在你的清单文件中注册后台脚本,并添加一个事件处理程序,这将打开弹出窗口。你可以在这里阅读更多关于事件页面的信息https://developer.chrome.com/extensions/event_pages

jvidinwx

jvidinwx4#

如果您所说的弹出窗口是指浏览器操作弹出窗口,那么您是对的,没有办法以编程方式打开它。
你可以通过content script把你需要的任何东西从你的弹出窗口直接嵌入到一个页面中,我认为这将是最好的解决方案。
如果你的弹出窗口不包含任何花哨的东西,也许desktop notifications对你来说就足够了。
创建一个新窗口并将其定位在url栏下将是一个相当笨拙的解决方案,而且不是非常用户友好。

guz6ccqo

guz6ccqo5#

让我补充一下上面的devza。如果弹出窗口不需要与页面通信,那么他的答案是很好的--否则你就有问题了,因为你的内容脚本不与原始窗口交互。这个答案依赖于页面意识到扩展(发送和接收消息)--这意味着你也必须控制页面。我所做的很麻烦,但它很有效:
1.侦听postMessage从页面到后台脚本,并按照devza的建议打开新窗口。
1.将原始页面的url编码为新窗口的名称(该url在消息的事件对象中可用)。
1.当你需要从弹出窗口传播回原始页面时,从弹出窗口调用window.opener.postMessage--这个消息在后台页面的窗口触发,消息应该包括数据和编码的源(= window.name)。
1.在后台脚本中监听消息。当你收到消息时,你可以使用Chrome.tabsapi(在manifest.json中启用"tabs"权限)来查找相关的选项卡-通常这是列表中的第一个选项卡,但现在不是了,这是因为弹出窗口打开的方式不同。编码的源代码在这里很有用--遍历tab数组并找到tab.url ===的选项卡起源。
1.这是要向其发送消息的相关选项卡(=发送到相关内容脚本)。
1.内容脚本应该侦听所述消息,该消息至少应该包括数据。
1.然后,内容脚本可以引发一个事件/使用相关数据来更新DOM。

mu0hgdu0

mu0hgdu06#

对于manifest v3,我做了一些类似的事情。同样,你不能直接这样做,相反,你需要像上面的帖子建议的那样打开一个弹出窗口。

//contentscript.js

chrome.runtime.sendMessage(JSON.stringify({
    left: window.screenLeft + window.outerWidth,
    top: window.screenTop
}), (response) => {});
//backgroundscript.js

chrome.runtime.onMessage.addListener(
    (request, sender, sendResponse) => {
        let data = JSON.parse(request);
        chrome.windows.create({
            url: chrome.runtime.getURL("index.html"),
            type: "popup",
            top: data.top,
            left: data.left-400,
            width: 400,
            height: 600,
        });
    }
);

相关问题