从零开始写一个chrome插件（-）

  1. 创建一个应用文件夹
    1
    mkdir myChromeExtension
  2. 建一个如下的json文件作为入口文件,并写插件的基本配置
    1
    2
    3
    4
    5
    6
    {
      "name":"我的第一个chrome插件",
      "description": "这是我的第一个chrome插件",
      "version": "1.0",
      "manifest_version":2
    }
    3.在上面的json中加入扩展的icon和文件，如下：
    1
    2
    3
    4
    "browser_action":{
        "default_popup": "index.html",
        "default_icon": "default.png"
      }
    加入后如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
      "name":"我的第一个chrome插件",
      "description": "这是我的第一个chrome插件",
      "version": "1.0",
      "manifest_version":2,
      "browser_action":{
        "default_popup": "index.html",
        "default_icon": "default.png"
      }
    }
  3. 将default.png放入myChromeExtension文件夹下面。
  4. 编辑index.html
    1
    2
    3
    4
    5
    6
    7
    8
    <html>
       <head>
         <meta charset="utf8">
       </head>
       <body>
         <h1>我的第一个chrome插件</h1>
       </body>
    </html>
  5. 安装插件

    chrome插件应用商店下载是.crx文件。实际上就是本地文件写好后压缩的zip文件。
    所以本地安装时没有那么麻烦，按下面的步骤操作就可以成功安装。
    • 点击chrmoe浏览器右上角的三个点>点击更多工具>点击扩展程序>点击加载已解压的扩展程序

      打开myChromeExtension文件夹，选择。这就好了，没有报错的话浏览器右上角已经出现了
      default.png图表。如果报错，轻按报错内容修改。

  6. 点击图标，确认就会弹出我们插件界面了，这是这个界面只能展示很丑的一段字”我的第一个chrome插件”，
    可以在index.html中加入css，使它稍微好看一点。但要想成为真正可以使用的插件，还有一段路要走，需要大家去看文档，英文好的同学
    可以去看谷歌提供的英文文档，英文不好的同学也没关系，去看360翻译的文档。