2020国产成人精品视频,性做久久久久久久久,亚洲国产成人久久综合一区,亚洲影院天堂中文av色

分享

Chrome擴(kuò)展開發(fā)指南(2)——概述

 cuso4321 2010-04-13

  

Chrome擴(kuò)展開發(fā)指南(2)——概述

這篇文章翻譯自http://code.google.com/chrome/extensions/overview.html,我還沒有真正做過插件,翻譯這篇文章算是班門弄斧,有翻譯的不好的地方請(qǐng)一定指出來,希望能夠達(dá)到完美!

( 對(duì)新手說的話:文章涉及到的一些術(shù)語,對(duì)沒有任何網(wǎng)頁知識(shí)的新手來說還是挺難懂的,可以借助Google/baidu看一下,其實(shí)不懂也沒多大關(guān)系,這篇文章只是一個(gè)概述,完全可以跳過這些術(shù)語,希望大家對(duì)制作插件不要失去信心。)

只要看完這篇文章,并且做過入門指南中的例子,你就可以真正開始開發(fā)屬于自己的Chrome插件了。

基礎(chǔ)知識(shí)

一個(gè)Chrome擴(kuò)展是由HTML、CSS、JavaScript、圖片等文件壓縮而成。擴(kuò)展實(shí)際上就是一個(gè)web頁面,你可以用任何瀏覽器提供給web頁面的接口,從XMLHttpRequest 到JSON ,再到HTML本地緩存都可以使用。

Chrome擴(kuò)展能做什么呢?我們肯定使用過一些擴(kuò)展,會(huì)發(fā)現(xiàn)有些擴(kuò)展在Chrome地址欄右側(cè)區(qū)域增加一個(gè)圖標(biāo)。還有些擴(kuò)展能夠和瀏覽器的一些元素(如書簽、tab導(dǎo)航標(biāo)簽)交互。擴(kuò)展還可以和web頁面交互,甚至是從web服務(wù)器獲取數(shù)據(jù)。更加詳細(xì)的內(nèi)容可以從Developer's Guide看到。

Chrome擴(kuò)展的組成文件

每個(gè)擴(kuò)展由下列文件組成:

  • 一個(gè)manifest文件(主文件,json格式)
  • 至少一個(gè)HTML文件(主題可以沒有HTML文件)
  • JavaScript文件 (可選,非必須)
  • 任何其他你需要的文件(比如圖片)

當(dāng)你開發(fā)一個(gè)擴(kuò)展的時(shí)候,需要把這些文件放在一個(gè)文件夾里,當(dāng)你發(fā)布這個(gè)擴(kuò)展的時(shí)候,這個(gè)文件夾下的所有文件將會(huì)打包成一個(gè)特殊后綴.crx的ZIP文件。


引用文件

你可以放置任何文件到你的擴(kuò)展里面,但是怎么調(diào)用這些文件呢?一般來說,使用相對(duì)地址調(diào)用,類似HTML中調(diào)用文件。下面是個(gè)例子,在子文件夾images中有個(gè)圖片myimage.png,我們可以這樣調(diào)用它

  1. <img src="images/myimage.png">
復(fù)制代碼

其中images/myimage.png表示這個(gè)文件。

也許你注意到當(dāng)使用Google Chrome debugger查看這些文件的時(shí)候給,每個(gè)文件的地址是下面這種格式

  1. chrome-extension://<extensionID>/<pathToFile>
復(fù)制代碼

這個(gè)地址中,<extensionID>是你制作的擴(kuò)展的唯一標(biāo)示符,也就是擴(kuò)展的身份證編號(hào)。<pathToFile>是文件相對(duì)擴(kuò)展頂級(jí)文件夾得位置。

manifest文件

主文件取名manifest.json,用來描述這個(gè)擴(kuò)展,包括擴(kuò)展名字、版本、調(diào)用的文件、可用域等信息。下面是個(gè)典型的manifest文件,這個(gè)擴(kuò)展可以調(diào)用google.com的內(nèi)容。

  1. {
  2.   "name": "My Extension",
  3.   "version": "2.1",
  4.   "description": "Gets information from Google.",
  5.   "icons": { "128": "icon_128.png" },
  6.   "background_page": "bg.html",
  7.   "permissions": ["http://*.google.com/", "https://*.google.com/"],
  8.   "browser_action": {
  9.     "default_title": "",
  10.     "default_icon": "icon_19.png",
  11.     "popup": "popup.html"
  12.   }
  13. }
復(fù)制代碼
擴(kuò)展結(jié)構(gòu)組成結(jié)構(gòu)

絕大部分?jǐn)U展有background文件,一個(gè)不可見的文件控制著整個(gè)擴(kuò)展的運(yùn)行。


上面這個(gè)圖片顯示的瀏覽器至少安裝了兩個(gè)擴(kuò)展:一個(gè)瀏覽器行為擴(kuò)展(黃色的圖標(biāo)),頁面行為擴(kuò)展(藍(lán)色的圖標(biāo))。這個(gè)瀏覽器行為擴(kuò)展的background文件是用一個(gè)HTML文件定義的(background.html),這個(gè)background文件中有JavaScript代碼控制整個(gè)瀏覽器的活動(dòng)。


HTML頁面

background不是唯一存在的HTML文件,比如瀏覽器行為可能是彈出一個(gè)小窗口,這個(gè)小窗口的內(nèi)容就可以調(diào)用一個(gè)HTML文件。Chrome擴(kuò)展也能夠用chrome.tabs.create() or window.open()這種函數(shù)來顯示HTML文件。

擴(kuò)展里面的HTML文件可以互相訪問對(duì)方的DOM結(jié)構(gòu),可以引用其他文件中定義的函數(shù)。

下面的圖展示了瀏覽器彈出一個(gè)窗口這個(gè)功能的結(jié)構(gòu)(這正是我們最開始的例子)。這個(gè)彈出窗口的內(nèi)容是一個(gè)HTML的web文件,這個(gè)彈出窗口不需要包含background文件中的代碼,因?yàn)?,popup.html和background是可以互相訪問的。



內(nèi)容腳本(Content scripts)

如果你插件需要和網(wǎng)頁交互,那么他就需要一個(gè)內(nèi)容腳本(Content scripts),內(nèi)容腳本常由JavaScript編寫,會(huì)在網(wǎng)頁載入完成后調(diào)用。完全可以把內(nèi)容腳本看做是網(wǎng)頁的一部分,而不是擴(kuò)展的一部分。

內(nèi)容腳本可以訪問到當(dāng)前瀏覽器瀏覽的頁面,而且還可以改變網(wǎng)頁的顯示方式(油猴腳本就是內(nèi)容腳本)。下面的圖片中,內(nèi)容腳本可以讀取、更改網(wǎng)頁的DOM。注意,他不能更改background.html中的內(nèi)容。


內(nèi)容腳本也不是和父擴(kuò)展完全隔離開來,他也可以和父級(jí)擴(kuò)展交換信息。如下圖中所示,內(nèi)容腳本在發(fā)現(xiàn)一個(gè)RSS Feed地址后將會(huì)給background.html發(fā)送一個(gè)信息?;蛘遙ackground.html給內(nèi)容腳本發(fā)送一個(gè)信息要求改變網(wǎng)頁外觀。



不同頁面間的交互

一個(gè)擴(kuò)展中的文件常常需要交互。由于擴(kuò)展的所有文件都由同一個(gè)進(jìn)程執(zhí)行,網(wǎng)頁能夠直接給其他頁面發(fā)送命令。

可以使用類似chrome.extension methods such as getViews() and getBackgroundPage()這樣的方法引用擴(kuò)展中的方法。一旦頁面中引用了另外的頁面,第一個(gè)頁面就可以調(diào)用其他頁面的函數(shù),甚至可以控制DOM。


  

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多