Chrome擴展如何插入按鈕的頁面谷歌日曆

Question

我想插入一個按鈕的頁面谷歌日曆，但它不工作..

的manifest.json

{ 
    "name": " Demo ", 
    "description": " demo ", 
    "version": "1.0", 
    "background": { 
    "scripts": ["background.js"] 
    }, 
    "content_scripts": [{"matches": ["https://www.google.com/calendar/*"], 
         "js": ["demo.js"]} 
         ], 
    "permissions": [ 
    "tabs", "http://*/*", "https://*/*", 
    "activeTab" 
    ], 
    "browser_action": { 
    "default_icon": "icon.png" 
    }, 
    "icons" : { 

    "128" : "icon.png" 
    }, 

    "manifest_version": 2 
} 

和content_scripts（demo.js）：

document.addEventListener('DOMContentLoaded', function() { 
         var buttonOnSite = document.getElementById(":10.calendar-row"), 
         parent = buttonOnSite.parentElement, 
         next = buttonOnSite.nextSibling, 
         button = document.createElement("button"), 
         text = document.createTextNode("test"); 
         button.appendChild(text); 
         if (next) parent.insertBefore(button, next); 
         else parent.appendChild(button); 
}); 

然後我打開谷歌日曆......我找不到我的按鈕.. :10.calendar-row是年曆的一個元素的ID ...

如何將一個按鈕插入到Google日曆頁面中，謝謝！

我有第二個問題，我無法調試，調試的按鈕是灰色的....爲什麼？

Answer 1

你有沒有確保谷歌的壓延機的URL是正確的，模式的manifest.json匹配？ （不是類似於https://calendar.google.com/calendar？）

您可以打開Chrome開發工具，然後在Sources選項卡下確保可以找到您的內容腳本。您可以在內容腳本上設置一箇中斷點，以查看它是否實際運行。

Screenshot: Chrome Dev Tools > Sources > Content Scripts