Chrome 扩展程序：如何创建？ [关闭]

Question

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

我想做的是做一个扩展来增加查看图像的功能。基本上，当您转到 .jpg、.png 等文件时，我希望加载一段 JavaScript。页面。

我无法从“Hello World”教程或文档中获得太多信息，并且我查看了 XML Tree 中的代码，但我无法理解它。

我不知道从这里去哪里。

Answer 1

既然您在 JavaScript 和 HTML 方面经验丰富，请告诉您最好的来源是什么？

---

http://developer.chrome.com/extensions/getstarted.html

---

文档

一旦您掌握了上面的链接（Chrome 扩展文档），阅读起来就非常简单。例如，当我创建我的第一个 Chrome 扩展程序（重新加载所有选项卡）时，我不知道 JavaScript。我建议您阅读文档（只需一个小时），然后按照您需要的步骤进行操作。

1. 确保您了解可以点击的不同 UI
   1. Browser Actions：您使用浏览器操作将图标放在 Chrome 主工具栏中。
   2. Context Menus：您使用上下文菜单将项目添加到 Chrome 上下文菜单中。
   3. Desktop Notifications：使用桌面通知通知用户某事很重要。
   4. Option Pages：如果你想要一个选项页面，这就是你的人！
   5. Page Actions: 如果你想覆盖某些页面（新标签页、历史记录、书签管理器）
2. 确保您意识到可以利用许多浏览器交互：
   1. Bookmarks: 访问您的书签
   2. Cookies: 访问 Cookies
   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.
12. etc 和 120 more answers 用于 Chrome 扩展，以上是我从第一页的结果中复制的内容。因此，在 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 上的非官方 Internet 中继聊天室 #chromium-extensions
4. Google（将带您访问 Stackoverflow 或 Quora）

我希望这会有所帮助！

Answer 2

好吧，创建一个chrome扩展并不难，任何对HTML，CSS，Javascript有基本了解的人都可以制作！

如果你想进行扩展，我已经在 Medium 上写过一篇文章，这里的 link 可能很有用

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

继续学习！