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完成。无论如何，这只是我将如何解决这样的问题，它可能不是最好的也不是最好的方法，但我希望它有帮助。