chrome扩大开辟之旅 第一篇

2019年8月30日 212次阅读 来源: WilsonLiu95

读书笔记引见

寒设想本身做一个chrome扩大，便从藏书楼借了这本书。同时，为了造就本身的好习惯，做沉淀，便读一章写一篇总结，全书统共10章，将会分为10篇博文。迎接人人多多斧正，也愿望人人多多支撑，感谢。

chrome扩大及运用引见与区分

引见

chrome支撑开辟者为其编写林林总总的扩大与运用来扩大其功用。chrome扩大与运用是一系列文件的鸠合，这些文件包括HTML，CSS，Javascript，images以及一个manifest.json文等。

区分

二者具有许多相似之初，而且二者采用了雷同的文件构造。

总的来讲，扩大与阅读器连系的更严密些，越发强调扩大阅读器功用。而运用没法像扩大一样随意马虎猎取用户在阅读器中阅读的内容并举行变动，实际上运用有越发严厉的权限限定，所以运用更像是一个自力的与chrome阅读器关联不大的顺序。

除此之外，chrome运用还分为Hosted App(托管运用)和PackagedApp(打包运用)。
前者更像是一个高等的书签，这类运用只提供一个图标和manifest.json文件。
后者，望文生义，就是将一切的文件打包在一起的运用，这类运用一般能够离线运用，由于他们所须要的文件都在当地。

文件构造

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

与一般开辟的构造相似，唯一多了的一个是manifest.json这个文件。

manifest.json用途
装置扩大以后，chrome就会读取扩大中的manifest.json文件。这个文件的文件名固定为manifest.json。内容是根据肯定花样形貌的扩大相干信息，如扩大称号，版本，更新地点，要求的权限，扩大的UI界面进口。等等，如许chrome才晓得如安在阅读器中显现这个扩大，以及这个扩大怎样与用户举行交互。

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扩大及其运用开辟》

    原文作者：WilsonLiu95
    原文地址: https://segmentfault.com/a/1190000004321986
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞