Question

我正在创建我的第一个chrome扩展程序。点击扩展程序图标后，我希望chrome会打开一个新标签页，然后打开我创建的本地.html页面。

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

manisfest.json

{
  "manifest_version": 2,

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

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

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

  "permissions": [
    "tabs"
 ]
}

background.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事件，但如果浏览器操作有弹出窗口，则不会触发此事件，因为它会覆盖此事件。

这在文档here中提到，滚动到最后一个阅读相同的内容。

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

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

我希望这会有所帮助。

Answer 2

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

1。作为弹出窗口

<强>的manifest.json

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

2。作为Chrome浏览器中的普通页面

<强>的manifest.json

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

<强> background.js

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

在扩展鼠标上点击

2 个答案:

1。作为弹出窗口

2。作为Chrome浏览器中的普通页面