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

資訊專欄INFORMATION COLUMN

chrome擴(kuò)展開發(fā)之旅 第二篇

shadajin / 839人閱讀

摘要：跨域請求跨域問題，是開發(fā)中一直以來需要注意的問題。則發(fā)送通道的發(fā)送給監(jiān)聽此消息的外部擴(kuò)展。完整方法此處，為必選參數(shù)，為回調(diào)函數(shù)。回調(diào)函數(shù)接收到的參數(shù)有三個，分別是和，即消息內(nèi)容，消息發(fā)送者相關(guān)信息和相應(yīng)函數(shù)。是發(fā)起消息的標(biāo)簽。

第二章簡介

第二章較第一章復(fù)雜許多。書中雖寥寥21頁，內(nèi)容卻也不少。涵蓋了8個小節(jié)。

2.1 操作用戶正在瀏覽的頁面

2.2 跨域請求

2.3 常駐后臺

2.4 帶選項(xiàng)頁面的擴(kuò)展

2.5 擴(kuò)展頁面間的通信

2.6 存儲數(shù)據(jù)

2.7 i18n

2.1 操作用戶正在瀏覽的頁面

實(shí)際上就是對用戶當(dāng)前瀏覽器頁面的DOM進(jìn)行操作。通過manifest.json中的content_scripts屬性，可 以指定將哪些腳本注入到哪些頁面中，當(dāng)用戶訪問這些頁面后，相應(yīng)的腳本既可自動運(yùn)行，從而對頁面DOM進(jìn) 行操作。

content_scripts屬性值為數(shù)組類型，數(shù)組的每個元素可以包含如下屬性：

matches  //定義哪些頁面會被注入腳本
exclude_matches  // 定義哪些頁面不會注入腳本
js  // 對應(yīng)要注入的js文件
css  //對應(yīng)要注入的css文件
run_at  //定義何時進(jìn)行注入
all_frames  //定義腳本是否會注入到嵌入式框架中
include_globs  //全局url匹配需要進(jìn)行注入的頁面
exclude_globs  //全局url匹配不被注入的腳本的頁面

簡單的說，如果url匹配matchew的值同時頁匹配include_globs的值，會被注入。
如果url匹配exclude_matches的值或者匹配exclude_globs的值，則不會被注入。

注意：腳本知識共享頁面的DOM,但是DOM中的自定義屬性不會被共享，并且不共享頁面內(nèi)嵌javascript 的命名空間。也就是說，當(dāng)前頁面的javascript有一個全局變量a，注入的腳本中也有一個全局變量a，兩者 不會互相干擾。

2.2 跨域請求

跨域問題，是web開發(fā)中一直以來需要注意的問題。 但是在chrome擴(kuò)展中，為了真正使chrome插件強(qiáng)大起來，chrome允許chrome擴(kuò)展應(yīng)用不必受限于跨域限制。 但是，出于安全考慮，需要在manifest.json文件中的permissions屬性中生命需要跨域的權(quán)限。

舉例如下：

{   
  ...   
  "permissions": [
     "_://_.baidu.com/*"   
     ]
}
2.3 常駐后臺

當(dāng)我們希望擴(kuò)展或應(yīng)用在自動運(yùn)行并常駐后臺時就需要用到本節(jié)的知識了。

在manifest.json中指定background域可以使擴(kuò)展常駐后臺。background包括3中屬性，分別是scripts,
page和persistent。

如果指定了scripts屬性，chrome會在擴(kuò)展啟動時自動創(chuàng)建一個包含所有指定腳本的頁面；

如果指定了page屬性，則chrome會將指定的html文件自動加載作為后臺頁面運(yùn)行；

persistent則定義了常駐后臺的方式，true時，表示一直在后臺運(yùn)行，占用內(nèi)存，不友好，不推薦。false為按需運(yùn)行，也就是chrome后來提出的Event Page，如非必要請?jiān)O(shè)置為false。默認(rèn)值為true。

2.4 帶選項(xiàng)的頁面的擴(kuò)展

有一些擴(kuò)展允許用戶進(jìn)行個性化設(shè)置，這樣就需要向用戶提供一個選項(xiàng)頁面。
同樣，這需要通過在manifest.json中設(shè)置。對應(yīng)的屬性為options_page。

例子如下：

{
  ...
  "options_page": "options.html"
}
2.5 擴(kuò)展頁面間的通信

有時需要讓同一個擴(kuò)展中的不同頁面之間，或者不同擴(kuò)展的多個頁面之間相互傳輸數(shù)據(jù)，以獲得彼此的狀態(tài)。
chrome提供了4個有關(guān)接口，分別是：

runtime.sendMessage
runtime.onMessage
runtime.connect
runtime.onConnect

書中只講解了前者，后者為更高級的接口，留待讀者自己去研究。
此處我查找到一個比較好的文檔，與大家參考。
runtime.connect

runtime.sendMessage完整的方法 
  chrome.runtime.sendMessage(extensionId,message,options,callback)

extensionId為所發(fā)送消息的目標(biāo)擴(kuò)展，默認(rèn)為擴(kuò)展本身。

message 為要發(fā)送的內(nèi)容，類型隨意。

options 為對象類型包含了一個值為布爾型的includeTlsChannelId屬性。true則發(fā)送TLS通道的ID
發(fā)送給監(jiān)聽此消息的外部擴(kuò)展。這個參數(shù)大部分情況下可不必理睬。

callback是回調(diào)函數(shù)，用于接收返回結(jié)果。

runtime.onMessage完整方法

chrome.runtime.onMessage.addListener(callback)
此處，callback為必選參數(shù)，為回調(diào)函數(shù)?；卣{(diào)函數(shù)接收到的參數(shù)有三個，分別是message,
sender和sendResponse，即消息內(nèi)容，消息發(fā)送者相關(guān)信息和相應(yīng)函數(shù)。其中，sender對象包含4個屬性，分別是tab,id,url,tlsChannelId。tab是發(fā)起消息的標(biāo)簽。

2.6 存儲數(shù)據(jù)

三種方法以及適用情況

html5的localStorage //適用于一般的擴(kuò)展

chrome提供的存儲API //適用于保存結(jié)構(gòu)稍微復(fù)雜些的數(shù)據(jù)，可保存任意類型的數(shù)據(jù)

使用Web SQL Database //使用的較少，比較復(fù)雜，需要使用SQL對數(shù)據(jù)庫進(jìn)行讀寫操作，適用于數(shù)據(jù)量龐大的應(yīng)用

localstorage 
localstorage.getItem()
localstorage.setItem()
localstorage.removeItem()
chrome提供的存儲API

使用時必須在manifest.json中的permissions聲明"storage",之后才有權(quán)限調(diào)用。
chrome的存儲API提供兩種存儲區(qū)域，分別是sync與local。區(qū)別在于sync存儲區(qū)域會根據(jù)用戶當(dāng)前在
chrome上登陸的google賬戶自動同步數(shù)據(jù)，當(dāng)無網(wǎng)絡(luò)連接可用時，兩者一致。
chrome提供5種方法，分別是

chrome.storage.sync.get(keys,function(result){})
chrome.storage.sync.getBytesInUse(keys,function(bytes){})
chrome.storage.sync.set(items,function(){})
chrome.storage.sync.remove(keys,function(){})
chrome.storage.sync.clear(function({}))

sync也可以替換為local

使用Web SQL Database

3個核心方法

openDatabase //與數(shù)據(jù)庫建立連接
transaction  //執(zhí)行查詢
executeSql   //執(zhí)行SQL語句
2.7 i18

使用i18n借口實(shí)現(xiàn)擴(kuò)展應(yīng)用程序的國際化。
亮瞎～國際化～
詳情見官方文檔

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/78501.html

相關(guān)文章

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

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

    shuibo 評論0 收藏0

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

    摘要：擴(kuò)展及應(yīng)用介紹與區(qū)別介紹支持開發(fā)者為其編寫各種各樣的擴(kuò)展與應(yīng)用來擴(kuò)充其功能。用處安裝擴(kuò)展之后，就會讀取擴(kuò)展中的文件。結(jié)語以上就是第一章的總結(jié)，接下來的筆記，敬請期待原書項(xiàng)目代碼下載擴(kuò)展及其應(yīng)用開發(fā) 讀書筆記介紹 寒假想自己做一個chrome擴(kuò)展，便從圖書館借了這本書。同時，為了培養(yǎng)自己的好習(xí)慣，做沉淀，便讀一章寫一篇總結(jié)，全書總共10章，將會分為10篇博文。歡迎大家多多指正，也希望大家...

    lei___ 評論0 收藏0

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

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

    jackwang 評論0 收藏0

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

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

    NotFound 評論0 收藏0

  • 【PWA學(xué)習(xí)與實(shí)踐】(5)在Web中進(jìn)行服務(wù)端消息推送

    摘要：本文是學(xué)習(xí)與實(shí)踐系列的第五篇文章。實(shí)際上，消息推送與提醒是兩個功能和。在這一篇里，我們先來學(xué)習(xí)如何使用進(jìn)行消息推送。而當(dāng)服務(wù)端要推送消息時，會使用私鑰對發(fā)送的數(shù)據(jù)進(jìn)行數(shù)字簽名，并根據(jù)數(shù)字簽名生成一個叫請求頭。 《PWA學(xué)習(xí)與實(shí)踐》系列文章已整理至gitbook - PWA學(xué)習(xí)手冊，文字內(nèi)容已同步至learning-pwa-ebook。轉(zhuǎn)載請注明作者與出處。 本文是《PWA學(xué)習(xí)與實(shí)踐》系...

    suemi 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<