Chrome擴展程序 - 修改Google日曆事件UI以通過輸入字段接受擴展屬性

Question

我期待創建一個Chrome擴展程序，該程序只是在創建新事件時添加一些功能。我想在「創建事件」視圖中插入一個額外的字段，該視圖將接受要存儲的新元數據，即：項目名稱，客戶端名稱等。

到目前爲止，我設法創建了擴展，設置彈出窗口視圖，插入一些新的HTML到通過contentscripts.js核心日曆視圖，但我無法弄清楚如下：

1）新的文本輸入字段添加到事件創建視圖從
2）保存文本根據谷歌API（https://developers.google.com/google-apps/calendar/extended-properties）以上字段作爲「擴展屬性」以供日後檢索

有沒有人有任何意見或建議想要完成這樣一項任務？

這裏是我的manifest.json文件：

{ 
 
    "name": "DoviChrome", 
 
    "version": "0.1.1", 
 
    "manifest_version":2, 
 
    "description": "DoviChrome", 
 
    "background": { 
 
    "persistent": false, 
 
    "scripts": ["background.html"] 
 
    }, 
 
    "icons": { "16": "icon.png", 
 
      "48": "icon.png", 
 
      "128": "icon.png" 
 
    }, 
 
    "browser_action": { 
 
    "default_icon": {     // optional 
 
     "16": "icon2.png",   // optional 
 
     "24": "icon2.png",   // optional 
 
     "32": "icon2.png"   // optional 
 
    }, 
 
    "default_title": "DoviChrome",  // optional; shown in tooltip 
 
    "default_popup": "popup.html"  // optional 
 
    }, 
 
    "permissions": [ 
 
    "notifications", 
 
    "identity", 
 
    "storage", 
 
    "activeTab" 
 
    ], 
 
    "content_scripts": [ 
 
    { 
 
     // Change 'matches' attribute to load content 
 
     // script only in pages you want to. 
 
     "matches": ["*://calendar.google.com/calendar/render"], 
 
     "css": ["css/style.css"], 
 
     "js": ["js/lib/jquery-3.1.1.min.js", "js/lib/angular1.6.1.min.js", "contentscript.js"], 
 
     "run_at":  "document_idle", 
 
     "all_frames": false 
 
    } 
 
    ], 
 
    "web_accessible_resources": [ "img/*", "node_modules/*","*.png","https://www.parsecdn.com/js/parse-latest.js"], 
 
}

...這是我用我contentscript.js什麼插入在主日曆其他一些功能視圖。

$(document).ready(function() { 
 
    console.log("contentscript.js loaded") 
 
    var iconURL = chrome.extension.getURL("icon.png"); 
 
    console.log("Injecting UI...") 
 
    $("#calcontent #vr-nav").before("<div class='new-menu'>" + 
 
     "<div class='my-logo inline'><img src='" + iconURL + "'/></div>" + 
 
     "<div class='quick-report'>Create Timesheet</div>" + 
 
     "<div class='quick-settings'>Settings</div>" + 
 
     "</div>" 
 
    ) 
 
    $('.quick-report').on("click",function(){ 
 
    \t console.log("clicked reports") 
 
    }) 
 
    $('div.quick-settings').on("click",function(){ 
 
\t console.log("Clicked settings") 
 
    }) 
 
});

Answer 1

好了，我要去假設下面的東西開始：

1. 你的「事件創作觀」的意思是什麼看法改變當你點擊創建按鈕。
2. 你想要這個被納入contentscript.js

如果這兩個條件都爲真，我也許可以幫助你在一定程度上。但是，由於API知識有限，我只能幫助您解決問題的前半部分。

首先，爲了您的設置，我會考慮使用選項頁面。它更清潔，你只需要做很少的事情來改變你的清單。大多數情況下，chrome.storage API用於保存和獲取設置。谷歌開發人員文檔中的頁面是here。其次，你將不得不做很多看Google Calendar page的HTML來更自然地擴展他們的代碼。這裏是我能想到的修改您的contentscript.js，使其擴展事件創建表格的最簡單的方法：

$(document).ready(function() { 
 
     console.log("contentscript.js loaded") 
 
     console.log("Injecting UI...") 
 

 
     // On clicking the button to navigate to event view 
 
     $("div.goog-inline-block.goog-imageless-button.goog-imageless-button-collapse-right").click(function() { 
 

 
      // if the view has been made visible (you may need to add a time delay to make it work) 
 
      if ($("div#coverinner").is(":visible")) { 
 

 
      // selects an appropriate place in the create event view to add custom options 
 
      var target = $("div.ep-dp-dt tbody tr#:3c.reminders-row").next().next().next() 
 

 
      //Add a new option. It will be added at the FRONT of the new options. 
 
      target.after(textInput("Test", 1)) 
 

 
      // More options can be added in a similar style 
 
      } 
 

 
     } 
 
     }); 
 

 
    // This is just an example of a text input generator. I made it by basically copy pasting the html I found in google then modifying it appropriately. 
 
    function textInput(name, rows) { 
 

 
     var text = $([ 
 
     "<tr id='" + name + "'>", 
 
     " \t <th class='ep-dp-dt-th'>", 
 
     " \t \t <label>" + name + "</label>", 
 
     " \t </th>", 
 
     " \t <td class='ep-dp-dt-td'>", 
 
     " \t \t <div class='ep-dp-" + name + "'>", 
 
     " \t \t \t <div class='ui-sch'>", 
 
     " \t \t \t \t <textarea class='textinput' style='overflow: hidden; resize: vertical;' rows='" + rows + "'>", 
 
     " \t \t \t \t </textarea>", 
 
     " \t \t \t </div>", 
 
     " \t \t </div>", 
 
     " \t </td>", 
 
     "</tr>" 
 
     ].join("\n")); 
 

 
     return text 
 
    }

您可以通過以下操作讓你的自定義值擴展您的腳本暫時將自己存儲在某個地方（可能是文檔中的全局變量），也可能會更改它們的值。然後在點擊提交按鈕之後或之後，查找日曆和事件ID並從存儲的值更新。

但是，如果您不介意嘗試不同的方法，我認爲這樣做的最佳方式是覆蓋創建事件按鈕以導航到由您製作的自定義事件創建視圖。從那裏你通過API提交一切。這肯定會減少機會，特別是如果谷歌改變界面的東西。

同樣使用此方法，您可以讓用戶導航到該頁面（可能通過單擊可由background.js文件處理的擴展程序的圖標），而無需前往官方網站本身，因爲大部分工作都會由API完成。無論如何，這只是我將如何解決這樣的問題，它可能不是最好的也不是最好的方法，但我希望它有幫助。