如何制作一個Chrome擴展程序

1、CHROME EXTENSION谷歌瀏覽器擴展程序在看PPT之前教你區(qū)分“插件”與“擴展程序”插件對應的是“Plugin”，擴展對應的是“Extension”，所以它倆背后其實是兩個完全不同的詞。插件并不會增加瀏覽器自身的功能，可調(diào)用操作系統(tǒng)的API，并且不同操作系統(tǒng)的插件一般不能混用。我們經(jīng)常遇到的插件有：Flash插件、PDF插件、Java插件等等。相比較之下，擴展則可以增加瀏覽器本身的功能，也可以調(diào)用瀏覽器的API，并且同一個瀏覽器的擴展一般也都是可以跨操作系統(tǒng)使用的。PS:其實多數(shù)人平時并沒有區(qū)分這兩個詞，包括我自己插件擴展程序vs什么是瀏覽器擴展程序？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.通俗的講，瀏覽器擴展程序就是一個通過調(diào)用瀏覽器API實現(xiàn)擴展瀏覽器功能的小程序。但這又不是我們通常講的可執(zhí)行程序。它其實就是一個文件包，直接加載到瀏覽器里面就可以工作。瀏覽器擴展程序可以用來干什么？當瀏覽器無法完成你想做的事，或者網(wǎng)站本身功能存在局限時。你不妨考慮自己做個擴展來幫助你。情景1

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

4、展程序文件目錄分析谷歌翻譯多功能翻譯迅雷下載插件manifest.json（清單文件） manifest_version: 2, name: 我的應用, 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（后臺頁面）每個擴展程序最多只能有一個“background page”后臺網(wǎng)頁是一個 HTML 頁面（也可以只是一個腳本），在擴展程序

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