Question

我今天开始学习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.
});

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

Answer 1

在浏览器操作上添加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

Answer 2

我猜您还在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") });
});

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

2 个答案: