在扩展鼠标单击时打开本地 .html

Question

我正在创建我的第一个 chrome 扩展。单击扩展图标时，我希望 chrome 会打开一个新选项卡，并在那里打开我创建的本地 .html 页面。

按照 Google 文档上的说明，我创建了以下内容：

清单文件

{
  "manifest_version": 2,

  "name": "Notes",
  "version": "1.0",

  "browser_action": {
    "default_icon": "ninjaicon.png",
    "default_popup": "notes.html"
},

  "background": {
    "scripts": ["background.js"]
},

  "permissions": [
    "tabs"
 ]
}

背景.js

chrome.browserAction.onClicked.addListener(function(activeTab){
  chrome.tabs.create({'url': chrome.extension.getURL('notes.html')}, function(tab)
  });
});

当我按下我的扩展程序图标时，会弹出一个包含“notes.html”内容的窗口，但没有像我希望的那样打开新选项卡。

我该怎么做才能正确？一直在这里寻找很多解决方案，但没有奏效。我只想创建一个扩展程序，单击该扩展程序会打开一个带有本地 Web 应用程序的新选项卡。

感谢您的回答。

Answer 1

为此，notes.html应该在您的扩展的根目录中。

default_popup从清单文件中删除

当点击浏览器操作图标时触发 onClicked 事件，但如果浏览器操作有弹出窗口，则不会触发此事件，因为它会覆盖此事件。

此处的文档中提到了这一点，滚动到最后阅读相同内容。

另外，您是否尝试过查看后台页面的控制台。我看到你写的代码是错误的。您的chrome.tabs.create回调函数中没有左大括号。如果您想将代码添加到回调函数中，请修复它，否则您可以简单地这样写：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.create({url: chrome.extension.getURL('notes.html')});
});

我希望这有帮助。

Answer 2

有两种方法可以通过浏览器操作打开本地 html 页面。

1. 作为弹出窗口

清单.json

"browser_action":   {
                            "default_icon"  :   "128.png",
                            "default_popup" :   "localPage.html",
                            "default_title" :   "localPage title"
                        }

2.作为chrome浏览器中的普通页面

清单.json

"background": {
        "scripts": ["background.js"]
    },

背景.js

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