chrome擴(kuò)展開發(fā)幫助手冊(cè)-展示頁(yè)
2025-07-04 06:15本頁(yè)面
【正文】 ckground文件，一個(gè)不可見的文件控制著整個(gè)擴(kuò)展的運(yùn)行。manifest文件，用來描述這個(gè)擴(kuò)展，包括擴(kuò)展名字、版本、調(diào)用的文件、可用域等信息。也許你注意到當(dāng)使用Google Chrome debugger查看這些文件的時(shí)候給，每個(gè)文件的地址是下面這種格式2 chromeextension://extensionID/pathToFile復(fù)制代碼這個(gè)地址中，extensionID是你制作的擴(kuò)展的唯一標(biāo)示符，也就是擴(kuò)展的身份證編號(hào)。引用文件你可以放置任何文件到你的擴(kuò)展里面，但是怎么調(diào)用這些文件呢？一般來說，使用相對(duì)地址調(diào)用，類似HTML中調(diào)用文件。 JavaScript文件 (可選，非必須) 一個(gè)manifest文件(主文件,json格式)s Guide看到。擴(kuò)展還可以和web頁(yè)面交互，甚至是從web服務(wù)器獲取數(shù)據(jù)。Chrome擴(kuò)展能做什么呢？我們肯定使用過一些擴(kuò)展，會(huì)發(fā)現(xiàn)有些擴(kuò)展在Chrome地址欄右側(cè)區(qū)域增加一個(gè)圖標(biāo)?；A(chǔ)知識(shí)一個(gè)Chrome擴(kuò)展是由HTML、CSS、JavaScript、圖片等文件壓縮而成。現(xiàn)在讓我們來看看大家都做出了什么樣的擴(kuò)展，把你的第一個(gè)擴(kuò)展上傳上來讓大家看看吧！這個(gè)是我的：Chrome擴(kuò)展開發(fā)指南(2)——概述這篇文章翻譯自，我還沒有真正做過插件，翻譯這篇文章算是班門弄斧，有翻譯的不好的地方請(qǐng)一定指出來，希望能夠達(dá)到完美！( 對(duì)新手說的話：文章涉及到的一些術(shù)語(yǔ)，對(duì)沒有任何網(wǎng)頁(yè)知識(shí)的新手來說還是挺難懂的，可以借助Google/baidu看一下，其實(shí)不懂也沒多大關(guān)系，這篇文章只是一個(gè)概述，完全可以跳過這些術(shù)語(yǔ)，希望大家對(duì)制作插件不要失去信心。把crx文件發(fā)送給自己的朋友，告訴他們你也會(huì)制作chrome插件吧。我們的第一個(gè)插件算是制作成功了。 回到Chrome的擴(kuò)展中心，點(diǎn)擊插件下的“重新載入 ”。1 {1 name: 第一個(gè)Chrome插件,1 version: ,1 description: 我的第一個(gè)Chrome插件，還不錯(cuò)吧,1 browser_action: {1 default_icon: ,1 popup: 1 }1 }復(fù)制代碼給第一個(gè)插件增加新功能你現(xiàn)在雖然做了第一個(gè)插件，但實(shí)際上他并沒有實(shí)現(xiàn)任何功能，我們點(diǎn)擊圖標(biāo)，沒有任何反應(yīng)?！拜d入正在開發(fā)的擴(kuò)展程序按鈕”，導(dǎo)入剛才創(chuàng)建的文件夾?！伴_發(fā)人員模式”，使得前面的“+”變成“”，打開相應(yīng)的菜單。 把下面兩張圖片保存到文件夾中，圖片一： 圖片二：開始制作第一個(gè)插件Windows下，所有版本的Chrome都可以制作插件。 記事本，用來編寫代碼準(zhǔn)備工具做任何事情都要有個(gè)工具，制作chrome插件需要的工具很少。Chrome擴(kuò)展開發(fā) 入門這是制作chrome擴(kuò)展插件的入門指南，不需要任何編程基礎(chǔ)，看完這個(gè)后，我們就著手做自己的Chrome插件了。好吧，我們現(xiàn)在就開始，其實(shí)我也是個(gè)新手。 Chrome瀏覽器，這個(gè)不能少吧。Linux下需要下載Beta版本，Mac下載dev版本。 在計(jì)算機(jī)中創(chuàng)建一個(gè)目錄來存放插件代碼。 ()，用記事本打開，寫入如下代碼1 {1 name: 第一個(gè)Chrome插件,1 version: ,1 description: 我的第一個(gè)Chrome插件，還不錯(cuò)吧,1 browser_action: {1 default_icon: 1 }1 }復(fù)制代碼 安裝這個(gè)插件:，選擇擴(kuò)展程序，打開擴(kuò)展中心。如果一開始就是“”，那么不用點(diǎn)擊。如果一切順利，你的Chrome地址欄將會(huì)有個(gè)新圖標(biāo)，你的第一個(gè)插件誕生了。下面我們就給他增加點(diǎn)功能。 ，用下面的代碼替換現(xiàn)有的代碼，其實(shí)我們只是加了一行代碼和一個(gè)逗號(hào)而已。 ，用記事本打開，將下面的代碼寫進(jìn)去1 pHello,Chrome!/p1 p我的名字叫ChromeChina!/p1 pa href= target=_blankChrome中文論壇歡迎你/a1 pimg src= //p復(fù)制代碼現(xiàn)在點(diǎn)擊插件圖標(biāo)看看。打包插件我們想把自己制作的插件給其他人用，那么就需要將插件打包。 回到Chrome的插件擴(kuò)展中心，點(diǎn)擊“打包擴(kuò)展程序”按鈕。 選擇剛才創(chuàng)建的文件夾，點(diǎn)擊確定生成后綴為crx和cpm文件各一個(gè)。你可以修改里面的文字圖片，制作出極具個(gè)性的擴(kuò)展來了。)只要看完這篇文章，并且做過入門指南中的例子，你就可以真正開始開發(fā)屬于自己的Chrome插件了。擴(kuò)展實(shí)際上就是一個(gè)web頁(yè)面，你可以用任何瀏覽器提供給web頁(yè)面的接口，從XMLHttpRequest 到JSON ，再到HTML本地緩存都可以使用。還有些擴(kuò)展能夠和瀏覽器的一些元素(如書簽、tab導(dǎo)航標(biāo)簽)交互。更加詳細(xì)的內(nèi)容可以從Developer39。Chrome擴(kuò)展的組成文件每個(gè)擴(kuò)展由下列文件組成： 至少一個(gè)HTML文件(主題可以沒有HTML文件) 任何其他你需要的文件(比如圖片)當(dāng)你開發(fā)一個(gè)擴(kuò)展的時(shí)候，需要把這些文件放在一個(gè)文件夾里，當(dāng)你發(fā)布這個(gè)擴(kuò)展的時(shí)候。下面是個(gè)例子，我們可以這樣調(diào)用它1 img src=images/復(fù)制代碼其中images/。pathToFile是文件相對(duì)擴(kuò)展頂級(jí)文件夾得位置。下面是個(gè)典型的manifest文件。上面這個(gè)圖片顯示的瀏覽器至少安裝了兩個(gè)擴(kuò)展：一個(gè)瀏覽器行為擴(kuò)展(黃色的圖標(biāo)),頁(yè)面行為擴(kuò)展(藍(lán)色的圖標(biāo))。HTML頁(yè)面background不是唯一存在的HTML文件，比如瀏覽器行為可能是彈出一個(gè)小窗口，這個(gè)小窗口的內(nèi)容就可以調(diào)用一個(gè)HTML文件。擴(kuò)展里面的HTML文件可以互相訪問對(duì)方的DOM結(jié)構(gòu)，可以引用其他文件中定義的函數(shù)。這個(gè)彈出窗口的內(nèi)容是一個(gè)HTML的web文件，這個(gè)彈出窗口不需要包含background文件中的代碼，因?yàn)?。完全可以把?nèi)容腳本看做是網(wǎng)頁(yè)的一部分，而不是擴(kuò)展的一部分。下面的圖片中，內(nèi)容腳本可以讀取、更改網(wǎng)頁(yè)的DOM。內(nèi)容腳本也不是和父擴(kuò)展完全隔離開來，他也可以和父級(jí)擴(kuò)展交換信息。不同頁(yè)面間的交互一個(gè)擴(kuò)展中的文件常常需要交互。 methods such a
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1