chrome擴展開發之旅第一篇

lei___ 發布于2019-08-19 17:25 / 920人閱讀

摘要：擴展及應用介紹與區別介紹支持開發者為其編寫各種各樣的擴展與應用來擴充其功能。用處安裝擴展之后，就會讀取擴展中的文件。結語以上就是第一章的總結，接下來的筆記，敬請期待原書項目代碼下載擴展及其應用開發

讀書筆記介紹

寒假想自己做一個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

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擴展及其應用開發》

云服務器 GPU云服務器第一篇 chrome webrtc 開發開發擴展擴展開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78503.html

chrome擴展開發之旅第四篇

摘要：目錄結構書簽歷史管理擴展與應用標簽書簽第一步，在中聲明書簽的個屬性，并不是每個書簽都有這個對象，如書簽文件夾就不具有屬性。調整書簽位置更新書簽刪除書簽和空的書簽分組刪除包含書簽的書簽分組獲取完整的書簽內容書簽的事件第一步，先行在中聲明。目錄結構 4.1 書簽 4.2 Cookies 4.3 歷史 4.4 管理擴展與應用 4.5 標簽 4.6 overridePages 4.1 書...

jackwang 2019-08-19 17:26 評論0 收藏0
chrome擴展開發之旅第二篇

摘要：跨域請求跨域問題，是開發中一直以來需要注意的問題。則發送通道的發送給監聽此消息的外部擴展。完整方法此處，為必選參數，為回調函數。回調函數接收到的參數有三個，分別是和，即消息內容，消息發送者相關信息和相應函數。是發起消息的標簽。第二章簡介第二章較第一章復雜許多。書中雖寥寥21頁，內容卻也不少。涵蓋了8個小節。 2.1 操作用戶正在瀏覽的頁面 2.2 跨域請求 2.3 常駐后臺 2....

shadajin 2019-08-19 17:25 評論0 收藏0
chrome擴展開發之旅第五篇

摘要：目錄結構下載網絡請求代理系統信息本章講解的是部分較為高級的，以供哪些有更高要求的讀者閱讀。對于目前的網絡請求，筆記實用的功能包括阻斷鏈接，更改和重定向。系統信息聲明方法三個接口都提供了的方法目錄結構 5.1 下載 5.2 網絡請求 5.3 代理 5.4 系統信息本章講解的是部分較為高級的API，以供哪些有更高要求的讀者閱讀。 5.1 下載聲明 permissions: [ ...

NotFound 2019-08-19 17:26 評論0 收藏0
chrome擴展開發之旅第三篇

摘要：第三章目錄簡述右鍵菜單桌面提醒簡述這部分對于前端的人來說是基礎。已經將的權限開放了。制作實時查詢美元價格的擴展代碼部分部分查詢美元當日價格圖片請自行選用。第三章目錄 3.1 CSS簡述 3.2 Browser Actions 3.3 右鍵菜單 3.4 桌面提醒 3.5 omnibox 3.6 Page Actions 3.1 CSS簡述這部分對于前端的人來說是基礎。就不說了 3...

shuibo 2019-08-22 11:00 評論0 收藏0
hello zapi 項目準備工作-CPP開發PHP之旅第一節

摘要：原文地址在新手學堂里面，我們將從零基于開發一個簡單的擴展，這個擴展的名字叫做現在我們著手準備開發需要的環境吧。原文地址: http://www.zendapi.org/manual... 在新手學堂里面，我們將從零基于 zendAPI 開發一個簡單的 PHP 擴展，這個擴展的名字叫做 hellozapi , 現在我們著手準備開發需要的環境吧。 demo 的項目庫地址 https://...

khs1994 2019-06-28 13:50 評論0 收藏0