Chrome扩展程序：如何创建？

Question

我在HTML和JavaScript方面经验丰富，但从未制作过（真正的）Chrome扩展程序（除了“Hello World”教程）。

我想要做的是制作一个扩展功能，增加查看图像的功能。基本上，当你转到.jpg，.png等时，我想要加载一些JavaScript。页。

我从“Hello World”教程或Docs中得到了很多，我查看了XML Tree中的代码，但是我无法理解它。

我不知道从哪里开始。

Answer 1

由于您在JavaScript和HTML方面经验丰富，请告诉您最佳来源是什么？

---

<强> http://developer.chrome.com/extensions/getstarted.html

---

文档

上面的链接（Chrome扩展程序文档）很容易阅读。例如，当我创建第一个Chrome扩展程序（重新加载所有标签页）时，我不知道 JavaScript 。我建议您阅读文档（只需要一个小时），然后按照您需要的步骤阅读。

1. 确保您了解可以使用的不同用户界面
   1. Browser Actions：您可以使用浏览器操作将图标放入Chrome主工具栏。
   2. Context Menus：您使用上下文菜单将项目添加到Chromes上下文菜单。
   3. Desktop Notifications：使用桌面通知通知用户某些内容非常重要。
   4. Option Pages：如果你想要一个选项页面，这就是你的家伙！
   5. Page Actions：如果您要覆盖某些页面（新标签页，历史记录，书签管理器）
2. 确保您意识到您可以使用许多浏览器互动：
   1. Bookmarks：访问您的书签
   2. Cookies：访问Cookie
   3. History：访问历史记录
   4. Management：访问扩展程序管理
   5. Tabs：访问您的标签
   6. Windows：访问您的Windows（包含标签页）。
3. 确保您了解Background Pages和Content Scripts之间的区别及其限制。
4. 确保您意识到Chrome.* API。
中有一些简洁的功能
5. 确保您了解permissions。
6. 更多

我在Stackoverflow上回答了145个Chrome问题

如果您想了解更多示例，我已回答了many有关Chrome扩展程序的问题，这些问题可能会帮助您入门（例如，回答了145个问题），例如，以下是一些较新的问题：

1. Content Script Skeleton
2. Send data from Background Page to Content Script
3. Communication with the embedding page，Simple fetching of the pages JS variable
4. Taking Screenshots in Chrome
5. Walkthrough building an extension
6. Executing JavaScript when a user clicks on a browser action.
7. How to capture selected text and send it to a web service
8. Walkthrough how to create an extension to access Disqus Comment Box
9. Walkthrough how to highlight the DIV that the mouse if hovering over
10. Walkthrough how to move to the top of the page extension
11. Walkthrough how to create a bubble overlay when you select text.
对于Chrome扩展程序，
12. etc和120 more answers，以上是我从第一页的结果中复制的内容。因此，在Google中进行搜索可以获得很多结果。

我创建的真正的开源扩展

如果你想看到我写的扩展的真实源代码（有些超小，有些超大）：

• Reload all tabs extension
• Open link in a foreground tab extension
• HTML5 Haptics Chrome extension
• Set Wallpaper extension
• Prayer times extension
• Facebook friend exporter extension
• Proxy Anywhere extension

资源

如果您还需要更多资源，可以：

1. 阅读documentation。
2. 阅读Official Chromium Extension Mailing list
3. irc.freenode.net上的非官方互联网中继聊天室#crom-extensions
4. Google（将带您进入Stackoverflow或Quora）

我希望这有帮助！

Answer 2

创建chrome扩展并不是一件难事，任何对HTML，CSS，JavaScript有基本了解的人都可以做到！

如果您想进行扩展，我已经在Medium上写了一篇文章，这里的link

我还在github上附加了我的代码，这里是link

继续学习！