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

【问题标题】：Open popup.html when click in extension icon单击扩展图标时打开 popup.html
【发布时间】：2016-05-03 04:20:56
【问题描述】：

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

我在这里找到了一些旧的遮阳篷，尝试了一些，但仍然遇到问题。

【问题讨论】：

当你说“我改变了很多并且不断弹出一百个新标签”时，你是什么意思？打开了很多标签？你的整个popup.js 是什么？我的意思是什么时候调用chrome.tabs.create？
是的，打开了许多标签。我改变了 Sid 所说的内容，现在它没有打开新标签，只是弹出扩展程序的按钮。

标签： javascript google-chrome-extension

【解决方案1】：

在浏览器操作（扩展图标）上添加onClicked 监听器：

background.js

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

注意：

onClicked 监听器只会在扩展没有弹出窗口时运行。所以从manifest.json 中删除"default_popup": "popup.html"。还需要在 web_accessible_resources 下添加 popup.html "web_accessible_resources": ["popup.html"]

【讨论】：

现在，当我点击按钮时，我只看到一个小屏幕，而不是一个新标签。
@T.Borges 您是否从 manifest.json 中删除了 "default_popup": "popup.html"？？

【解决方案2】：

我猜你还在你的popup.html 中包含popup.js，这意味着popup.js 被事件页面和弹出页面引用。

当你安装扩展后调用事件页面时，它会调用chrome.tabs.create来创建一个新标签，url为popup.html，popup.html也会调用chrome.tabs.create，因为有一个script标签在popup.html 中引用popup.js。然后它会导致无限循环，并且会打开许多标签。

考虑到你想实现“点击扩展图标然后用popup.html打开一个标签”，你可以在事件页面注册browserAction.onClicked事件监听器并调用chrome.tabs.create创建新标签。示例代码如下所示

manifest.json

{
    "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
    }
}

background.js

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

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

【讨论】：