成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

chrome擴(kuò)展開(kāi)發(fā)之旅 第一篇

lei___ / 962人閱讀

摘要:擴(kuò)展及應(yīng)用介紹與區(qū)別介紹支持開(kāi)發(fā)者為其編寫(xiě)各種各樣的擴(kuò)展與應(yīng)用來(lái)擴(kuò)充其功能。用處安裝擴(kuò)展之后,就會(huì)讀取擴(kuò)展中的文件。結(jié)語(yǔ)以上就是第一章的總結(jié),接下來(lái)的筆記,敬請(qǐng)期待原書(shū)項(xiàng)目代碼下載擴(kuò)展及其應(yīng)用開(kāi)發(fā)

讀書(shū)筆記介紹

寒假想自己做一個(gè)chrome擴(kuò)展,便從圖書(shū)館借了這本書(shū)。同時(shí),為了培養(yǎng)自己的好習(xí)慣,做沉淀,便讀一章寫(xiě)一篇總結(jié),全書(shū)總共10章,將會(huì)分為10篇博文。歡迎大家多多指正,也希望大家多多支持,謝謝。

chrome擴(kuò)展及應(yīng)用介紹與區(qū)別 介紹

chrome支持開(kāi)發(fā)者為其編寫(xiě)各種各樣的擴(kuò)展與應(yīng)用來(lái)擴(kuò)充其功能。chrome擴(kuò)展與應(yīng)用是一系列文件的集合,這些文件包括HTML,CSS,Javascript,images以及一個(gè)manifest.json文等。

區(qū)別

兩者具有很多相似之初,并且兩者采用了相同的文件結(jié)構(gòu)。

總的來(lái)說(shuō),擴(kuò)展與瀏覽器結(jié)合的更緊密些,更加強(qiáng)調(diào)擴(kuò)展瀏覽器功能。而應(yīng)用無(wú)法像擴(kuò)展一樣輕易獲取用戶在瀏覽器中瀏覽的內(nèi)容并進(jìn)行更改,實(shí)際上應(yīng)用有更加嚴(yán)格的權(quán)限限制,所以應(yīng)用更像是一個(gè)獨(dú)立的與chrome瀏覽器關(guān)聯(lián)不大的程序。

除此之外,chrome應(yīng)用還分為Hosted App(托管應(yīng)用)和PackagedApp(打包應(yīng)用)。
前者更像是一個(gè)高級(jí)的書(shū)簽,這種應(yīng)用只提供一個(gè)圖標(biāo)和manifest.json文件。
后者,顧名思義,就是將所有的文件打包在一起的應(yīng)用,這類應(yīng)用通??梢噪x線使用,因?yàn)樗麄兯枰奈募荚诒镜亍?/p> 文件結(jié)構(gòu)

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

與正常開(kāi)發(fā)的結(jié)構(gòu)類似,唯一多了的一個(gè)是manifest.json這個(gè)文件。

manifest.json用處
安裝擴(kuò)展之后,chrome就會(huì)讀取擴(kuò)展中的manifest.json文件。這個(gè)文件的文件名固定為manifest.json。內(nèi)容是按照一定格式描述的擴(kuò)展相關(guān)信息,如擴(kuò)展名稱,版本,更新地址,請(qǐng)求的權(quán)限,擴(kuò)展的UI界面入口。等等,這樣chrome才能知道如何在瀏覽器中呈現(xiàn)這個(gè)擴(kuò)展,以及這個(gè)擴(kuò)展如何與用戶進(jìn)行交互。

manifest.json規(guī)范說(shuō)明
manifest.json必須包含name,version和manifest_version屬性,目前來(lái)說(shuō)來(lái)manifest_version屬性值只能為數(shù)字2,對(duì)于應(yīng)用來(lái)說(shuō),還必須包含app屬性。其他常用的可選屬性還有browser_action,page-action,background,permissions,options_page,
content_scripts,content_scripts。

當(dāng)有需要時(shí),請(qǐng)自行到官網(wǎng)查看文檔說(shuō)明。
Manifest File Format

制作第一個(gè)擴(kuò)展 目錄結(jié)構(gòu)
  + 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": "我的時(shí)鐘",
      "version": "1.0",
      "description": "我的第一個(gè)Chrome擴(kuò)展",
      "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": "我的時(shí)鐘",
          "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);

使用說(shuō)明
將上述代碼的文件包拖動(dòng)至chrome擴(kuò)展頁(yè)面,也就是 chrome://extensions/ 即可發(fā)現(xiàn),擴(kuò)展欄多了一個(gè)圖標(biāo),點(diǎn)擊既可顯示。
源碼下載

調(diào)試方法

同樣,我們想調(diào)試插件的時(shí)候,也可以直接右鍵點(diǎn)擊該擴(kuò)展,審查元素,即會(huì)彈出一個(gè)開(kāi)發(fā)者工具框,在此便可以開(kāi)始調(diào)試。

結(jié)語(yǔ)

以上就是第一章的總結(jié),接下來(lái)的筆記,敬請(qǐng)期待~
原書(shū)項(xiàng)目代碼下載
《chrome擴(kuò)展及其應(yīng)用開(kāi)發(fā)》

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/78503.html

相關(guān)文章

  • chrome擴(kuò)展開(kāi)發(fā)之旅 第四篇

    摘要:目錄結(jié)構(gòu)書(shū)簽歷史管理擴(kuò)展與應(yīng)用標(biāo)簽書(shū)簽第一步,在中聲明書(shū)簽的個(gè)屬性,并不是每個(gè)書(shū)簽都有這個(gè)對(duì)象,如書(shū)簽文件夾就不具有屬性。調(diào)整書(shū)簽位置更新書(shū)簽刪除書(shū)簽和空的書(shū)簽分組刪除包含書(shū)簽的書(shū)簽分組獲取完整的書(shū)簽內(nèi)容書(shū)簽的事件第一步,先行在中聲明。 目錄結(jié)構(gòu) 4.1 書(shū)簽 4.2 Cookies 4.3 歷史 4.4 管理擴(kuò)展與應(yīng)用 4.5 標(biāo)簽 4.6 overridePages 4.1 書(shū)...

    jackwang 評(píng)論0 收藏0
  • chrome擴(kuò)展開(kāi)發(fā)之旅 第二篇

    摘要:跨域請(qǐng)求跨域問(wèn)題,是開(kāi)發(fā)中一直以來(lái)需要注意的問(wèn)題。則發(fā)送通道的發(fā)送給監(jiān)聽(tīng)此消息的外部擴(kuò)展。完整方法此處,為必選參數(shù),為回調(diào)函數(shù)?;卣{(diào)函數(shù)接收到的參數(shù)有三個(gè),分別是和,即消息內(nèi)容,消息發(fā)送者相關(guān)信息和相應(yīng)函數(shù)。是發(fā)起消息的標(biāo)簽。 第二章簡(jiǎn)介 第二章較第一章復(fù)雜許多。書(shū)中雖寥寥21頁(yè),內(nèi)容卻也不少。涵蓋了8個(gè)小節(jié)。 2.1 操作用戶正在瀏覽的頁(yè)面 2.2 跨域請(qǐng)求 2.3 常駐后臺(tái) 2....

    shadajin 評(píng)論0 收藏0
  • chrome擴(kuò)展開(kāi)發(fā)之旅 第五篇

    摘要:目錄結(jié)構(gòu)下載網(wǎng)絡(luò)請(qǐng)求代理系統(tǒng)信息本章講解的是部分較為高級(jí)的,以供哪些有更高要求的讀者閱讀。對(duì)于目前的網(wǎng)絡(luò)請(qǐng)求,筆記實(shí)用的功能包括阻斷鏈接,更改和重定向。系統(tǒng)信息聲明方法三個(gè)接口都提供了的方法 目錄結(jié)構(gòu) 5.1 下載 5.2 網(wǎng)絡(luò)請(qǐng)求 5.3 代理 5.4 系統(tǒng)信息本章講解的是部分較為高級(jí)的API,以供哪些有更高要求的讀者閱讀。 5.1 下載 聲明 permissions: [ ...

    NotFound 評(píng)論0 收藏0
  • chrome擴(kuò)展開(kāi)發(fā)之旅 第三篇

    摘要:第三章目錄簡(jiǎn)述右鍵菜單桌面提醒簡(jiǎn)述這部分對(duì)于前端的人來(lái)說(shuō)是基礎(chǔ)。已經(jīng)將的權(quán)限開(kāi)放了。制作實(shí)時(shí)查詢美元價(jià)格的擴(kuò)展代碼部分部分查詢美元當(dāng)日價(jià)格圖片請(qǐng)自行選用。 第三章目錄 3.1 CSS簡(jiǎn)述 3.2 Browser Actions 3.3 右鍵菜單 3.4 桌面提醒 3.5 omnibox 3.6 Page Actions 3.1 CSS簡(jiǎn)述 這部分對(duì)于前端的人來(lái)說(shuō)是基礎(chǔ)。就不說(shuō)了 3...

    shuibo 評(píng)論0 收藏0
  • hello zapi 項(xiàng)目準(zhǔn)備工作-CPP開(kāi)發(fā)PHP之旅第一節(jié)

    摘要:原文地址在新手學(xué)堂里面,我們將從零基于開(kāi)發(fā)一個(gè)簡(jiǎn)單的擴(kuò)展,這個(gè)擴(kuò)展的名字叫做現(xiàn)在我們著手準(zhǔn)備開(kāi)發(fā)需要的環(huán)境吧。 原文地址: http://www.zendapi.org/manual... 在新手學(xué)堂里面,我們將從零基于 zendAPI 開(kāi)發(fā)一個(gè)簡(jiǎn)單的 PHP 擴(kuò)展,這個(gè)擴(kuò)展的名字叫做 hellozapi , 現(xiàn)在我們著手準(zhǔn)備開(kāi)發(fā)需要的環(huán)境吧。 demo 的項(xiàng)目庫(kù)地址 https://...

    khs1994 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<