摘要:擴(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
+ my_clock + images - icon128.png - icon48.png - icon16.png - icon38.png - icon16.png + js - my_clock.js - manifest.json - popup.htmlmanifest.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)試插件的時(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
摘要:目錄結(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ū)...
摘要:跨域請(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....
摘要:目錄結(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: [ ...
摘要:第三章目錄簡(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...
摘要:原文地址在新手學(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://...
閱讀 3771·2021-11-11 16:55
閱讀 1695·2021-10-08 10:04
閱讀 3651·2021-09-27 13:36
閱讀 2869·2019-08-30 15:53
閱讀 1925·2019-08-30 11:17
閱讀 1322·2019-08-29 16:55
閱讀 2159·2019-08-29 13:57
閱讀 2580·2019-08-29 13:13