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/ 便可發現，擴展欄多了一個圖標，點擊既可顯示。
源碼下載調試