单击扩展图标时打开popup.html

时间:2016-05-03 04:20:56

标签: javascript google-chrome-extension

我今天开始学习javascript,而且我正在尝试使用Google Chrome扩展程序。当我点击扩展图标时,我想用主html(popup.html)打开一个新标签。

我遇到了麻烦,因为我改变了这么多,并不断弹出一百个新标签。

这是我的清单:

{
    "manifest_version": 2,
    "name": "Youtube Autoplay",
    "version": "0.1",
    "description": "Autoplay selected YouTube videos from my browser",
    "browser_action":{
        "default_title": "Youtube Autoplay",
        "default_icon": "icons/icon16.png",
        "default_popup": "popup.html"
    },
    "permissions": [
      "tabs"
    ],
    "background":{
      "scripts": ["popup.js"]
    }
}

这是我用来打开新标签的功能

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

我在这里发现了一些旧的发型,尝试了一些但仍然遇到问题。

2 个答案:

答案 0 :(得分:2)

在浏览器操作上添加onClicked侦听器(扩展图标):

<强> background.js

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

注意

onClicked侦听器仅在扩展名没有弹出窗口时才会运行。从"default_popup": "popup.html"移除manifest.json。您还需要在web_accessible_resources "web_accessible_resources": ["popup.html"]

下添加popup.html

答案 1 :(得分:0)

我猜您还在popup.js中添加了popup.html,这意味着popup.js会被事件页面和弹出页面引用。

在安装扩展程序后调用事件页面时,它会调用chrome.tabs.create创建一个包含网址popup.html的新标签页,popup.html也会调用chrome.tabs.create因为script中有一个引用popup.js的{​​{1}}代码。然后它将导致无限循环并且将打开许多选项卡。

考虑到您要实现“点击扩展图标然后打开带有popup.html的标签”,您可以在事件页面中注册popup.html事件监听器并调用browserAction.onClicked来创建新标签。示例代码如下所示

的manifest.json

chrome.tabs.create

background.js

{
    "manifest_version": 2,
    "name": "Youtube Autoplay",
    "version": "0.1",
    "description": "Autoplay selected YouTube videos from my browser",
    "browser_action": {
        "default_title": "Youtube Autoplay"
    },
    "background": {
        "scripts": [
            "background.js"
        ],
        "persistent": false
    }
}

popup.html

chrome.browserAction.onClicked.addListener(function () {
    chrome.tabs.create({ url: chrome.runtime.getURL("popup.html") });
});