【问题标题】:Open chrome extension in a new tab在新标签页中打开 chrome 扩展
【发布时间】:2012-03-23 12:19:04
【问题描述】:

我已经实现了一个 chrome 扩展。想知道 popup.html 是否可以在新选项卡中打开?每次单击页面,弹出窗口都会消失 :( .. 想知道我是否可以将其粘贴到页面上,或者有没有办法在新页面中打开扩展程序?

【问题讨论】:

    标签: google-chrome google-chrome-extension google-chrome-devtools


    【解决方案1】:

    是的,弹出页面只是一个普通的扩展页面,您可以执行以下操作从后台页面打开一个新的弹出标签。我每次用户第一次安装扩展时都会使用它,我打开关于页面,你可以对弹出页面做同样的事情。

    chrome.tabs.create({url: 'popup.html'}) 
    

    对于我的一个扩展程序My Hangouts,我在弹出窗口中有一个小的“作为选项卡打开”按钮,我绑定了该链接的点击事件以执行此操作:

    chrome.tabs.create({url: chrome.extension.getURL('popup.html#window')});
    

    我传递哈希的原因是因为我想在用户在弹出窗口中打开它时添加更多内容,因为有更多的空间可以玩。

    在弹出窗口中,我使用普通 JavaScript 来区分是在新标签页还是在普通页面中打开标签,如下所示:

    if (window.location.hash == '#window') {
      this.displayAsTab = true;
    }
    

    您可以使用这样的技巧来改善您的扩展程序的用户体验。

    【讨论】:

    • 哇.. 听起来真的很酷.. 我尝试在 popup.html 上执行以下操作,但有点没用。有什么我做错了吗? (我已经包含了 jquery) $(function() { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}); });我也尝试在 background.html 中做同样的事情,但没有奏效。有没有一种简单的方法可以让我看到这项工作?比如,点击一个链接,整个弹出窗口就会在一个新标签页中打开?
    • 当我尝试 $(function() { chrome.tabs.create({'url': chrome.extension.getURL('popup.html'), 'selected': 'true'}) ;});它没有用,但是当我尝试 $(function() { chrome.tabs.create({'url': 'google.com', 'selected': 'true'});});有效。所以对于谷歌来说,它有效,但对于 popup.html 它没有。我在 popup.html 中有上面的代码
    • @paypalcomp 你能发布更多代码吗,也许在 gist.github.com 或 pastebin?您是否检查过控制台是否有错误?右键单击您的弹出窗口,然后选择检查。单击控制台选项卡,然后查看错误。 (您的背景页面也是如此,但它在您的设置/选项窗口中可用。
    【解决方案2】:

    同样的问题:Chrome Extension: onclick extension icon, open popup.html in new tab

    使用:

    chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {
        // Tab opened.
    });
    

    “固定”属性以粘贴标签。

    【讨论】:

    • 哇.. 听起来真的很酷.. 我尝试在 popup.html 上执行以下操作,但有点没用。有什么我做错了吗? (我已经包含了 jquery) $(function() { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}); });我也尝试在 background.html 中做同样的事情,但没有奏效。有没有一种简单的方法可以让我看到这项工作?比如,点击一个链接,整个弹出窗口就会在一个新标签页中打开?
    • 那些chrome.* API只能在扩展进程(背景页、选项页、弹窗等)中调用。你可以使用消息传递。
    猜你喜欢
    • 2017-11-14
    • 2011-06-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-17
    • 1970-01-01
    • 2013-05-06
    • 2015-09-05
    相关资源
    最近更新 更多