chrome扩展开发之旅第一篇

时间 2019-12-07

标签 chrome 扩展开发之旅一篇栏目 Chrome 繁體版

原文原文链接

读书笔记介绍

寒假想本身作一个chrome扩展，便从图书馆借了这本书。同时，为了培养本身的好习惯，作沉淀，便读一章写一篇总结，全书总共10章，将会分为10篇博文。欢迎你们多多指正，也但愿你们多多支持，谢谢。html

chrome扩展及应用介绍与区别

介绍

chrome支持开发者为其编写各类各样的扩展与应用来扩充其功能。chrome扩展与应用是一系列文件的集合，这些文件包括HTML，CSS，Javascript，images以及一个manifest.json文等。git

区别

二者具备不少类似之初，而且二者采用了相同的文件结构。github

总的来讲，扩展与浏览器结合的更紧密些，更增强调扩展浏览器功能。而应用没法像扩展同样轻易获取用户在浏览器中浏览的内容并进行更改，实际上应用有更加严格的权限限制，因此应用更像是一个独立的与chrome浏览器关联不大的程序。chrome

除此以外，chrome应用还分为Hosted App(托管应用)和PackagedApp(打包应用)。
前者更像是一个高级的书签，这种应用只提供一个图标和manifest.json文件。
后者，顾名思义，就是将全部的文件打包在一块儿的应用，这类应用一般能够离线使用，由于他们所须要的文件都在本地。json

文件结构

+chromApp
  -index.HTML
  -manifest.json
  +images
  +CSS
  +js

与正常开发的结构相似，惟一多了的一个是manifest.json这个文件。浏览器

manifest.json用处
安装扩展以后，chrome就会读取扩展中的manifest.json文件。这个文件的文件名固定为manifest.json。内容是按照必定格式描述的扩展相关信息，如扩展名称，版本，更新地址，请求的权限，扩展的UI界面入口。等等，这样chrome才能知道如何在浏览器中呈现这个扩展，以及这个扩展如何与用户进行交互。app

manifest.json规范说明
manifest.json必须包含name，version和manifest_version属性，目前来讲来manifest_version属性值只能为数字2，对于应用来讲，还必须包含app属性。其余经常使用的可选属性还有browser_action,page-action,background,permissions,options_page,
content_scripts,content_scripts。工具

当有须要时，请自行到官网查看文档说明。
Manifest File Format插件

制做第一个扩展

目录结构

+ my_clock
    + images
      - icon128.png
      - icon48.png
      - icon16.png
      - icon38.png
      - icon16.png
    + js
      - my_clock.js
    - manifest.json
    - popup.html

manifest.json

{
      "manifest_version": 2,
      "name": "个人时钟",
      "version": "1.0",
      "description": "个人第一个Chrome扩展",
      "icons": {
          "16": "images/icon16.png",
          "48": "images/icon48.png",
          "128": "images/icon128.png"
      },
      "browser_action": {
          "default_icon": {
              "19": "images/icon19.png",
              "38": "images/icon38.png"
          },
          "default_title": "个人时钟",
          "default_popup": "popup.html"
      }
  }

popoup.html

<html>
  <head>
  <style>
  *{
      margin: 0;
      padding: 0;
  }

  body {
      width: 200px;
      height: 100px;
  }

  div {
      line-height: 100px;
      font-size: 42px;
      text-align: center;
  }
  </style>
  </head>
  <body>
  <div id="clock_div"></div>
  <script src="js/my_clock.js"></script>
  </body>
  </html>

my_clock.js

function my_clock(el){
      var today=new Date();
      var h=today.getHours();
      var m=today.getMinutes();
      var s=today.getSeconds();
      m=m>=10?m:('0'+m);
      s=s>=10?s:('0'+s);
      el.innerHTML = h+":"+m+":"+s;
      setTimeout(function(){my_clock(el)}, 1000);
  }

  var clock_div = document.getElementById('clock_div');
  my_clock(clock_div);

使用说明
将上述代码的文件包拖动至chrome扩展页面，也就是 chrome://extensions/ 便可发现，扩展栏多了一个图标，点击既可显示。
源码下载调试

调试方法

一样，咱们想调试插件的时候，也能够直接右键点击该扩展，审查元素，即会弹出一个开发者工具框，在此即可以开始调试。

结语

以上就是第一章的总结，接下来的笔记，敬请期待～
原书项目代码下载
《chrome扩展及其应用开发》

chrome扩展开发之旅 第一篇