將圖標菜單添加到Chrome擴展程序

我成功創建了我的第一個Chrome擴展程序。它現在只在單擊擴展圖標而不是背景時運行，這很好。但是，我想向我的擴展添加更多操作我一直試圖使用擴展彈出來運行其他功能，但我無法使其工作。它不一定要那樣，所以我很樂意提供建議。我不想使用上下文菜單。我希望人們點擊擴展圖標並向他們顯示一個「菜單」。將圖標菜單添加到Chrome擴展程序

現在我的擴展只在發現一個有效頁面（來自mydomain.com）時纔會發出一條消息，並且它找到一個名爲「returnURL」的隱藏字段。它提醒價值。

我希望能夠添加點擊圖標的功能，但是會顯示帶有多個選項的選項菜單。

事情是這樣的：

點擊擴展程序圖標，並顯示兩個選項

獲得響應URL（此選項將運行目前的功能我現在有）
做別的東西（所以我可以在加載的頁面上執行另一個功能）

...和更多選項，如果我需要將它們添加到fu我的擴展的版本。

如何修改我的擴展來完成此操作。

這裏是我的代碼：

的manifest.json



    { 
      "name": "Get Response URL", 
      "version": "1.0", 
      "manifest_version": 2, 
      "browser_action": { 
      "default_icon": "mkto_icon.png", 
      "name": "Click to get URL" 
      }, 
      "background":{ 
       "scripts":["background.js"] 
      }, 
      "permissions":["http://mydomain.com/*"] 
    }

background.js



    chrome.browserAction.onClicked.addListener(function (tab) { //Fired when User Clicks ICON 
     if (tab.url.indexOf("http://mydomain.com/") != -1) { // Inspect whether the place where user clicked matches with our list of URL 
      chrome.tabs.executeScript(tab.id, { 
       "file": "contentscript.js" 
      }, function() { // Execute your code 
       console.log("Script Executed .. "); // Notification on Completion 
      }); 
     } 
    });

contentscript.js



    if (document.getElementsByName("returnURL")){ 
    alert("\nThe Response URL on this form is:\n\n" + document.getElementsByName("returnURL")[0].value); 
    }

我跟着我發現的文檔Ť他是Google擴展程序開發者網站，但我無法使其工作。非常感謝您的幫助。

來源

2013-03-02 Rafael

您無法使用Chrome擴展程序獲得真正的菜單。但是，當點擊按鈕時，您可以顯示HTML頁面（彈出窗口）。您可以在類似於菜單的方式樣式該HTML頁面：

"browser_action": { 
    "default_icon": "mkto_icon.png", 
    "default_title": "Click here to open menu", 
    "default_popup": "popup.html" 
},

文件popup.html添加到你要顯示的擴展和任何內容。彈出頁面加載的腳本可以加載內容腳本並與後臺頁面進行通信。

僅供參考：browser actions documentation。

來源

2013-12-19 13:04:30

將圖標菜單添加到Chrome擴展程序

回答

相關問題