Chrome 扩展(插件) 开发教程

    官方中文版教程

    Blog

    Github

    官方中文版教程

    Blog

    Github

    ## # 什么是扩展 扩展是可定制化浏览体验的小程序,它们使用户可以根据个人需要或者偏好定制 Chrome 的功能和行为。它们基于 Web 技术(例如 HTML,JavaScript 和 CSS)构建。 扩展必须满足狭义定义且易于理解的单一目的(译者注:功能简单易懂化)。一个扩展可以包括多个组件和一系列功能,只要所有的内容都有助于实现共同的目标。 用户交互界面应尽量小且有意图。他们的范围从简单的图标,如右侧显示的 Google Mail Checker 扩展, 到覆盖整个页面。gmail-smal 扩展文件压缩到单个 .crx 包中,用户可以下载并安装。这意味着扩展与普通的 Web 应用程序不同,它不依赖于 Web 上的内容。 扩展程序通过 Chrome 开发者管理后台 分发,并发布到 Chrome 网上应用商店。有关更多信息,请参阅商店开发人员文档。 ### # Hello 扩展 通过这个快速的 Hello 扩展示例,让大家对扩展有一点了解。 首先创建一个新目录来放置扩展的文件,或者从示例页面下载它们。 接下来,添加一个名为 manifest.json 的文件,并包含以下代码:
    1. {
    2. "name": "Hello Extensions",
    3. "description" : "Base Level Extension",
    4. "version": "1.0",
    5. "manifest_version": 2
    6. }
    每个扩展都需要一个 mainfest,尽管大多数扩展的 mainfest 没有多大作用。为了快速入门,该扩展程序在 browser_action 字段下声明了一个弹出文件和图标:
    1. {
    2. "name": "Hello Extensions",
    3. "description" : "Base Level Extension",
    4. "version": "1.0",
    5. "manifest_version": 2,
    6. "browser_action": {
    7. "default_popup": "hello.html",
    8. "default_icon": "hello_extensions.png"
    9. }
    10. }
    下载 hello_extensions.png 然后创建一个文件名:hello.html
    1. <html>
    2. <body>
    3. <h1>Hello Extensions</h1>
    4. </body>
    5. </html>
    单击该图标后,扩展会显示 hello.html。 下一步是在 manifest.json 中包含一个启用键盘快捷键的命令。 此步骤很有趣,但不是必需的:
    1. {
    2. "name": "Hello Extensions",
    3. "description" : "Base Level Extension",
    4. "version": "1.0",
    5. "manifest_version": 2,
    6. "browser_action": {
    7. "default_popup": "hello.html",
    8. "default_icon": "hello_extensions.png"
    9. },
    10. "commands": {
    11. "_execute_browser_action": {
    12. "suggested_key": {
    13. "default": "Ctrl+Shift+F",
    14. "mac": "MacCtrl+Shift+F"
    15. },
    16. "description": "Opens hello.html"
    17. }
    18. }
    19. }
    最后一步是在本地计算机上安装扩展。 - 在浏览器地址栏中输入 chrome://extensions。 你还可以通过点击功能框右上角的 Chrome 菜单,将鼠标悬停在 更多工具 上,然后选择 扩展程序 ,以访问此页面。 - 选中开发人员模式旁边的框。 - 单击加载解压缩的扩展名,然后选择Hello扩展的目录。 恭喜你! 现在,你可以通过单击 hello_world.png 图标或按键盘上的 Ctrl+Shift+F 来使用基于弹出窗口的扩展。 - - - 关注 微信公众号「程序化思维」 获取最新 Chrome 插件开发教程。 mp_wechat Chrome 扩展变现的9种策略 入门教程