原創文章，轉載請注明出處。
作者：簡體字丶馮;
QQ:564372931
1．Chrome能搞這些事情
（1） 操作瀏覽器中打開的頁面DOM
這能做什么哪？譬如說你想修改頁面DOM（DOM是什么，找度娘，這娘們懂得多。），什么CRUD都可以。當然為了安全期間，擴展不允許直接調用頁面中js文件（玩法后邊會講）。
（2） 與服務器通信
插件api提供接口可請求服務器（跨域XMLHttpRequest請求），這意味着你可以給插件做一套后台服務。譬如，印象筆記剪裁就是通過插件獲取頁面數據再發送到后端服務器中。
（3） 使用瀏覽器內部功能
譬如標簽或者書簽等
2．擴展里都是些什么鬼
擴展程序是一個“.crx”文件。“.crx”文件是一種特制的壓縮文件，把后綴改為“.rar”后用解壓軟件可以直接解壓。解壓后你會看到這些東西：
（1） 一個manifest.json文件
這個文件暫且叫它“配置文件”吧，也就是你的插件可以使用那些瀏覽器功能都需要在該文件中配置。
（2） 一個或多個html文件
這類文件一般用不到太多，除非你插件中含有好多頁面
（3） 可選的一個或多個javascript文件
js是用來實現插件功能的主要語言，你可以沒有（意味着插件沒有功能，0.0）
（4） 可選的任何其他有用文件
插件中用到的css、圖片等等。這個文件也可以用到你要操作的頁面中，譬如說你的插件是往每個打開的頁面中插入一個不可描述的圖片[壞笑]。
3．擴展開發最重要的東西
這部分內容是擴展開發中最重要的東西，也是開發基礎（或者說擴展的原理）。
先上手工圖
（1） 概述環境
擴展分為后端環境、前端環境。前端環境是擴展和頁面DOM交互的環境，插件可視化的東西。后端環境是插件處理業務的部分，不能與前端共享數據。
Content_script環境
作為擴展前端環境，負責與頁面DOM進行交互。這部分內容會在加載頁面的時候直接加載進頁面，如圖
（2） Background環境
這部分為擴展后端主要環境，在插件安裝后就開始運行的。插件主要邏輯處理在這邊寫，可以調用瀏覽器api。
（3） Popup環境
當點擊插件圖標時該環境會運行，該環境可以調用background的數據（通過api接口調用）。Popup會在用戶點擊圖標后出現，可以包含任意你想要的HTML內容並會自適應大小。自適應大小有點坑啊，貌似不能自己設計寬高。我測試是這樣，你也可以自己試試。
（4） 設置環境
這部分一般是用來初始化擴展的，比如說你擴展的某些數據需要用戶設置通過改環境。通常插件保存的設置數據保存在storage 中，其實就是chrome對localStorage
的包裝（自行度娘）。
（5） 環境之間的數據傳輸
數據傳輸才是擴展的重中之重，怎么玩？content_script通過js獲取頁面DOM，當然雖然content_script不能直接調用頁面中的js。但是它能監聽頁面中元素的按鈕事件（這句話能解決在什么時候content_script對頁面進行操作）。一直說Content_script能操作DOM，說簡單點就是能在頁面寫入html、js用到css。
content_script通過chrome.extension.sendRequest()接口發送數據到后端background環境，與之相應的接受接口為chrome.extension.onRequest.addListener()。插件支持json數據傳輸！
background與popup之間共享數據及方法，popup通過chrome.extension.getBackgroundPage()獲取background中的數據方法等（設置環境也可以這樣玩）。
4．最實用的東西
對於開發來說最實用的是什么哪，當然是調試了 0.0。
涉及到三個四個環境，content_script、backgroud、popup、設置。
（1） Content_script調試
F12 -> sources -> content scripts
（2） Popup 調試
點擊擴展圖標出現popup頁面后f12 和普通頁面一樣調試即可
（3） Background 設置 調試
瀏覽器設置 -> 擴展程序 ->如圖
點擊相應入口進入后與普通頁面調試方法一致
（4） 一些實用的
在調試過程中，如果修改了manifest.json文件需要刪除插件重新加載，否則去掉“已啟用”按鈕的選擇再選中即可更新插件。
忘記說怎么加載正在開發中的插件了，哈哈。再開發者模式下，通過“加載已解壓的擴展程序”按鈕引入未打包的程序。“打包擴展程序”按鈕是把插件文件打包成“.crx”文件。
