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

Question

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

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

1) 将新的文本输入字段添加到事件创建 View
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 中使用的内容，在主日历 View 中插入一些其他功能。

$(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. 您所说的“事件创建 View ”是指当您点击“创建”按钮时 View 会发生变化。
2. 您希望将其合并到 contentscript.js 中

如果这两个都是真的，我也许可以在某种程度上帮助你。但由于对 API 的了解有限，我只能帮助您解决前半个问题。

首先，对于您的设置，我会考虑使用选项页面。它更干净，您只需要做很少的事情即可更改 list 。大多数情况下，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 并从存储的值中更新。

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

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

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