Google chrome 为chrome扩展构建一个UI，以显示后台脚本的结果

下面是我的manifest.json文件

{
    "name": "Demo Extension",
    "version": "1.0.0",
    "manifest_version": 2,
    "browser_action": {
    "default_icon": "icon.png"
    },


    "background": {
    "scripts": ["jquery-1.7.2.js","code.js"]
    },

    "content_scripts": [
        {
            "matches": ["*://*/*"],
            "js": ["jquery-1.7.2.js","content.js"],
            "css": ["panel.css"],
            "run_at": "document_end"
        }
    ],

    "permissions": [
        "webRequest",
        "tabs",
        "http://*/*",
        "https://*/*",
    ]
}

我的主要扩展逻辑在code.js文件中，甚至结果也在那里。 现在，我必须将这些结果显示在一个表中给用户。 你建议我做什么

我不知道该怎么办。 我只知道我必须构建一个UI并在上面显示我的表

---

提前感谢大家：）

您可以为您的UI创建一个专用页面，例如，为其命名

UI.html

。然后，您可以在需要时按如下方式打开它：

chrome.tabs.create({url:chrome.extension.getURL("ui.html")});

在该页面中，您可以创建任意UI，并用适当的数据填充，您可以直接从后台页面请求这些数据（假设此处定义了方法

youMethodHere

）：

此

ui.html

页面将显示在单独的选项卡中。您还可以选择创建弹出页面（显示相同的UI），用户可以通过单击浏览器操作按钮打开该页面。只需将以下内容添加到您的清单中：

"browser_action":
{
  "default_title":"some title",
  "default_icon":"some_icon.png",
  "popup":"ui.html"
}

---

我知道这件事……但我想创建一个面板，就像底部firebug lite中的一样。如何将HTML UI作为面板加载到当前选项卡上？不幸的是，这在Chrome中是不可能的（至少目前是这样）。您可能会在其他问题中找到更多细节和解决方法：和。但是firebug lite是如何为chrome做到这一点的呢？他们使用HTML和CSS设计了面板，并将其加载到chome的界面上。这看起来就像你在firefox浏览器的Overlay.XUL上覆盖了你扩展的XUL。你读过我链接的其他人的答案吗？它们与FireBug Lite的功能非常接近。您是否尝试安装FireBug并使用Chrome的开发者工具进行调查实际上，这只是页面底部的一个div。这不是Chrome的本机解决方案，所以我想它在某些情况下可能会有问题，并干扰嵌入它的页面。是的，这就是。。。。。。。正因为如此，我才避免这样做。在文档的dom中附加某些内容并不安全。相反，我希望将其附加到当前选项卡或窗口的dom中。但这样做似乎是不可能的。现在尝试其他方法。

"browser_action":
{
  "default_title":"some title",
  "default_icon":"some_icon.png",
  "popup":"ui.html"
}