Chrome 扩展 - 修改 Google 日历事件 UI 以通过输入字段接受扩展属性

Question

我希望创建一个 Chrome 扩展程序，它可以在创建新事件时简单地添加一些功能。我想在“创建事件”视图中插入一个额外的字段，该字段将接受要存储的新元数据，即：项目名称、客户名称等。

到目前为止，我已经设法创建了扩展，设置了一个弹出视图，通过 contentscripts.js 将一些新的 html 插入到核心日历视图中，但我无法弄清楚以下内容：

1) 向事件创建视图添加新的文本输入字段
2) 根据 Google 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(){
    	console.log("clicked reports")
    })
    $('div.quick-settings').on("click",function(){
	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 + "'>",
        "	<th class='ep-dp-dt-th'>",
        "		<label>" + name + "</label>",
        "	</th>",
        "	<td class='ep-dp-dt-td'>",
        "		<div class='ep-dp-" + name + "'>",
        "			<div class='ui-sch'>",
        "				<textarea class='textinput' style='overflow: hidden; resize: vertical;' rows='" + rows + "'>",
        "				</textarea>",
        "			</div>",
        "		</div>",
        "	</td>",
        "</tr>"
      ].join("\n"));

      return text
    }

您可以通过执行以下操作来扩展您的脚本让您的自定义值临时存储在某个地方（可能作为文档中的全局变量），并可能在更改值时更新它们。然后在单击提交按钮时或之后，找出日历和事件 ID 并从存储的值中更新。

但是，如果您不介意尝试不同的方法，我能想到的最佳方法是覆盖创建事件按钮以导航到您创建的自定义事件创建视图。从那里您通过 API 提交所有内容。这肯定会减少机会，特别是如果谷歌改变了界面方面的东西。

同样使用这种方法，您可以让用户导航到该页面（可能通过单击可由 background.js 文件处理的扩展程序图标），而无需访问官方网站本身，因为大部分工作将是由 API 完成。

无论如何，这就是我解决此类问题的方法，它可能不是最好的也不是最好的方法，但我希望它有所帮助。