2016-06-07 50 views
0

我想插入一個按鈕的頁面谷歌日曆,但它不工作..Chrome擴展如何插入按鈕的頁面谷歌日曆

的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日曆頁面中,謝謝!

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

enter image description here

+0

不調試彈出窗口,你沒有一個。調試內容腳本。請閱讀官方擴展開發指南,其中解釋了兩者。 –

+0

謝謝你對第二問題的回答,我現在知道如何調試,你能幫我解答第一個問題嗎?如何在pas日曆中插入一個按鈕?非常感謝你 ! – user2262304

回答

0

你有沒有確保谷歌的壓延機的URL是正確的,模式的manifest.json匹配? (不是類似於https://calendar.google.com/calendar?)

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

Screenshot: Chrome Dev Tools > Sources > Content Scripts

+0

我使用'「https://calendar.google.com/calendar/*」'它不起作用,我有第二個問題,我無法調試,調試的按鈕是灰色的....爲什麼?我已更新我的問題進行調試 – user2262304