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

好的，我将首先假设以下事项：

“事件创建视图”的含义是单击“创建”按钮时视图的更改。
您希望将其合并到contentscript.js

如果两者都属实，我可以在某种程度上帮助你。但是，由于对API的了解有限，我只能帮助您解决问题的前半部分。

首先，对于您的设置，我会考虑使用选项页面。它更清洁，你只需做很少的改变你的清单。大多数情况下，chrome.storage API用于保存和获取设置。 Google开发者文档中的页面为here。

其次，你必须做很多关注Google Calendar page的HTML来更自然地扩展他们的代码。这是我可以考虑修改contentcript.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完成。

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

Chrome扩展程序 - 修改Google日历事件用户界面以通过输入字段接受扩展属性

1 个答案: