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. 确保您了解可以使用的不同UI
   1. 浏览器操作:您可以使用浏览器操作将图标放入主Chrome工具栏中.
   2. 上下文菜单:使用上下文菜单将项添加到Chromes上下文菜单.
   3. 桌面通知:使用桌面通知通知用户某些内容很重要.
   4. 选项页面:如果你想要一个选项页面,这是你的家伙!
   5. 页面操作:如果要覆盖某些页面("新建"选项卡,"历史记录","书签管理器")
2. 确保您意识到可以使用许多浏览器交互:
   1. 书签:访问您的书签
   2. Cookie:访问Cookie
   3. 历史:访问历史
   4. 管理:访问扩展管理
   5. 标签:访问标签
   6. Windows:访问Windows(具有选项卡).
3. 确保您了解背景页面和内容脚本之间的区别及其限制.
4. 确保您意识到Chrome.*API中有一些简洁的功能.
5. 确保您了解权限.
6. 还有很多

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

如果您想了解更多示例,我已经回答了很多关于Chrome扩展程序的问题,这些问题可能会帮助您入门(例如,回答了145个问题),例如,以下是一些较新的问题:

1. 内容脚本骨架
2. 将数据从背景页面发送到内容脚本
3. 与嵌入页面的通信,简单获取页面JS变量
4. 在Chrome中截取屏幕截图
5. 演练构建扩展
6. 用户单击浏览器操作时执行JavaScript.
7. 如何捕获所选文本并将其发送到Web服务
8. 演练如何创建扩展以访问Disqus评论框
9. 演练如何突出显示鼠标悬停在DIV上的DIV
10. 演练如何移动到页面扩展名的顶部
11. 演练如何在选择文本时创建气泡叠加层.
12. 等等以及针对Chrome扩展程序的120个答案,以上是我从第一页的结果中复制的内容.因此,在Google中搜索会获得很多结果.

我创建的真正的开源扩展

如果你想看到我写的扩展的真实源代码(有些超小,有些超大):

• 重新加载所有标签扩展名
• 在前台标签扩展中打开链接
• HTML5 Haptics Chrome扩展程序
• 设置壁纸扩展
• 祈祷时间延长
• Facebook好友出口商扩展
• Proxy Anywhere扩展

资源

如果您仍需要更多资源,您可以:

1. 阅读文档.
2. 阅读官方Chromium扩展邮件列表
3. irc.freenode.net上的非官方Internet Relay Chatroom#chromium-extensions
4. 谷歌(将带你到Stackoverflow,或Quora)

我希望这有帮助!