如何制作一個(gè)Chrome擴(kuò)展程序

1、CHROME EXTENSION谷歌瀏覽器擴(kuò)展程序在看PPT之前教你區(qū)分“插件”與“擴(kuò)展程序”插件對(duì)應(yīng)的是“Plugin”，擴(kuò)展對(duì)應(yīng)的是“Extension”，所以它倆背后其實(shí)是兩個(gè)完全不同的詞。插件并不會(huì)增加瀏覽器自身的功能，可調(diào)用操作系統(tǒng)的API，并且不同操作系統(tǒng)的插件一般不能混用。我們經(jīng)常遇到的插件有：Flash插件、PDF插件、Java插件等等。相比較之下，擴(kuò)展則可以增加瀏覽器本身的功能，也可以調(diào)用瀏覽器的API，并且同一個(gè)瀏覽器的擴(kuò)展一般也都是可以跨操作系統(tǒng)使用的。PS:其實(shí)多數(shù)人平時(shí)并沒(méi)有區(qū)分這兩個(gè)詞，包括我自己插件擴(kuò)展程序vs什么是瀏覽器擴(kuò)展程序？Google Chrome Ex

2、tensions are browser extensions that modify the Google Chrome browser. These extensions are written using web technologies like HTML, JavaScript, and CSS.通俗的講，瀏覽器擴(kuò)展程序就是一個(gè)通過(guò)調(diào)用瀏覽器API實(shí)現(xiàn)擴(kuò)展瀏覽器功能的小程序。但這又不是我們通常講的可執(zhí)行程序。它其實(shí)就是一個(gè)文件包，直接加載到瀏覽器里面就可以工作。瀏覽器擴(kuò)展程序可以用來(lái)干什么？當(dāng)瀏覽器無(wú)法完成你想做的事，或者網(wǎng)站本身功能存在局限時(shí)。你不妨考慮自己做個(gè)擴(kuò)展來(lái)幫助你。情景1

3、：讀英文網(wǎng)頁(yè)的時(shí)候有的單詞不認(rèn)識(shí)，有的句子不會(huì)翻譯，又不想打開翻譯軟件一個(gè)個(gè)查。（某些瀏覽器并不自帶翻譯功能）情景2：訪問(wèn)網(wǎng)站時(shí)總會(huì)彈出各種廣告，關(guān)都關(guān)不掉。（瀏覽器沒(méi)有屏蔽廣告的功能）情景3：嫌某個(gè)網(wǎng)頁(yè)的背景太丑了，我想自己給他設(shè)置一個(gè)背景。（該網(wǎng)站沒(méi)有為用戶提供背景風(fēng)格切換功能）遇到以上問(wèn)題，你不必忍氣吞聲，現(xiàn)有的一鍵翻譯擴(kuò)展程序，廣告屏蔽插件（擴(kuò)展程序）等均可以解決。用戶如何使用擴(kuò)展程序？Options pageDefault popupContext Menus開始制作你自己的擴(kuò)展程序！Idea 試著去構(gòu)思一個(gè)插件Knowledge 你需要掌握的知識(shí)To do it 你需要參考的文檔擴(kuò)

4、展程序文件目錄分析谷歌翻譯多功能翻譯迅雷下載插件manifest.json（清單文件） manifest_version: 2, name: 我的應(yīng)用, version: 版本字符串, icons: ., browser_action: default_icon: 19: images/icon19.png, 38: images/icon38.png , default_title: Google Mail, default_popup: popup.html ,background: scripts: background.js , content_scripts: matches: ht

5、tp:/ css: mystyles.css, js: jquery.js, myscript.js , options_page: aFile.html, permissions: .,background, default_popup, content_scripts消息傳遞Popup page,Option page,Etc.Background PageContent ScriptsPage ActionBrowser ActionBackground（后臺(tái)頁(yè)面）每個(gè)擴(kuò)展程序最多只能有一個(gè)“background page”后臺(tái)網(wǎng)頁(yè)是一個(gè) HTML 頁(yè)面（也可以只是一個(gè)腳本），在擴(kuò)展程序

6、的進(jìn)程中運(yùn)行，整個(gè)生命周期中都存在。主要用于管理瀏覽器本身的事務(wù)或狀態(tài)。如監(jiān)聽點(diǎn)擊擴(kuò)展圖標(biāo)事件，監(jiān)聽右鍵點(diǎn)擊相應(yīng)菜單，創(chuàng)建菜單，更換圖標(biāo)，對(duì)popup頁(yè)面的請(qǐng)求做出相應(yīng)等Popup page（彈出內(nèi)容）點(diǎn)擊瀏覽器右上角的擴(kuò)展圖標(biāo)時(shí)，有時(shí)會(huì)彈出一個(gè)頁(yè)面，這是HTML頁(yè)面，是default_popup設(shè)置的。如果該參數(shù)為空，則默認(rèn)不彈出頁(yè)面。我們可以通過(guò)這個(gè)頁(yè)面進(jìn)行擴(kuò)展程序的設(shè)置，或者查看擴(kuò)展的工作狀態(tài)。Content Scripts（內(nèi)容腳本）內(nèi)容腳本是在網(wǎng)頁(yè)的上下文中運(yùn)行的 JavaScript 文件，它們可以通過(guò)標(biāo)準(zhǔn)的文檔對(duì)象模型（DOM）來(lái)獲取瀏覽器訪問(wèn)的網(wǎng)頁(yè)詳情，或者作出更改。換句話說(shuō)，Content Scripts可以直接操控用戶打開的網(wǎng)頁(yè)?？梢詫?duì)其DOM作任何操作，但是由于它與網(wǎng)頁(yè)自帶的腳本文件處于不同環(huán)境下。所以不能對(duì)用戶網(wǎng)頁(yè)的方法和變量進(jìn)行訪問(wèn)。一個(gè)簡(jiǎn)單的實(shí)例自動(dòng)轉(zhuǎn)跳文件目錄和manifest參數(shù)Background Page Code我的工作Lofter 標(biāo)簽批量添加器網(wǎng)頁(yè)元素模糊工具Lofter標(biāo)簽批量添加器每添加一個(gè)標(biāo)簽需要點(diǎn)擊1次，加滿標(biāo)簽需要點(diǎn)擊10次將標(biāo)簽分類打包存放，選中類別名稱，則把相應(yīng)標(biāo)簽批量加入標(biāo)簽框Lofter標(biāo)簽管理頁(yè)：