chrome擴展(瀏覽器插件)開發實用教程

原創文章，轉載請註明出處。

做者：簡體字丶馮;

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」文件。