打造的Chrome擴展程序的用戶界面，從後臺腳本

顯示結果下面是我的manifest.json文件打造的Chrome擴展程序的用戶界面，從後臺腳本

{ 
    "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文件，甚至結果可在那裏。現在，我必須將這些結果dsiplay到用戶的表中。你會建議我做什麼。

我不知道該怎麼做。只是我知道我必須建立一個用戶界面，並顯示我的表。

感謝大家提前:)

來源

2012-11-07 Ni3

您可以爲您創建一個專用頁面UI，例如，給它一個名字ui.html。然後你就可以打開它，當你需要它，如下所示：

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

在頁面，您可以創建任意UI，並用適當的數據，你可以直接從你的背景頁面要求填寫（假設方法youMethodHere定義有）：

chrome.extension.getBackgroundPage().youMethodHere();

這ui.html頁面將在一個單獨的標籤被顯示。您還可以選擇創建一個彈出頁面（呈現相同的用戶界面），用戶可以通過單擊瀏覽器操作按鈕打開該頁面。只需添加到您的清單：

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

來源

2012-11-07 09:35:08 Stan

我知道那件事.........但我想創建一個面板，就像在底部的firebug lite。如何在當前選項卡上將我的HTML UI作爲面板加載？ – Ni3

不幸的是，這在Chrome中是不可能的（至少現在是這樣）。您可能會在其他問題中找到更多詳細信息和一種解決方法：[here]（http://stackoverflow.com/questions/6199184/creating-a-panel-in-google-chrome）和[here]（http：/ /stackoverflow.com/questions/10102997/chrome-extension-how-to-dock-extensions-html-page-to-current-web-page）。 – Stan

但是那麼firebug lite是怎麼做到的呢？他們使用HTML和CSS設計了他們的面板，並通過Chome的界面加載它。它看起來像你在Firefox中的瀏覽器的overlay.xul你的擴展的XUL覆蓋。 – Ni3

打造的Chrome擴展程序的用戶界面，從後臺腳本

回答

相關問題