点击扩展鼠标打开本地.html

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

背景.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.作为弹出窗口

manifest.json

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

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

manifest.json

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

背景.js

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

Answer 3

用这个

chrome.action.onClicked.addListener(function() {
  chrome.tabs.create({url: 'index.html'});
});

Answer 4

在清单版本 3 中 用这个

`chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.create({
    url: "your_html_.html"
  });
 })`