使用Chrome扩展程序将按钮插入Google文档

Question

我正在编写Chrome扩展程序，而不是在浏览器工具栏中有一个按钮，我想在Google文档中插入一个按钮。

我无法弄清楚如何使用Chrome扩展程序将按钮插入Google文档工具栏。具体来说，如何将按钮注入Google文档工具栏而不是创建对话框或类似的东西？ （我知道如何在我的content.js文件中执行后者。）

以下链接指向另一个Chrome扩展程序，该按钮会将一个按钮注入Google文档工具栏，正如我要做的那样：https://chrome.google.com/webstore/detail/draftback/nnajoiemfpldioamchanognpjmocgkbg?hl=en-US

Answer 1

我最后通过查看我在问题中链接到的扩展名的content.js文件来搞清楚这一点。

在Chrome扩展程序的content.js文件中，创建一个按钮并定义按钮的HTML：

var $my_button = $('<div role="button" class="goog-inline-block jfk-button jfk-button-standard docs-titlebar-button">My button</div>');

课程定义使用Google Doc的CSS类（我通过检查我想要模拟的按钮找到它），以便它与标题栏混合。

然后，使用＆＃34; .prependTo＆＃34;将按钮注入Google文档标题栏。

$my_button.prependTo($('.docs-titlebar-buttons'));

这创建了一个漂亮的按钮，如下所示：