什么樣的產(chǎn)品適合設(shè)計(jì)成一款瀏覽器插件

最近小編在公司接到一個(gè)需求，需要設(shè)計(jì)一個(gè)h5 無(wú)碼可視化埋點(diǎn)工具，把需求詳細(xì)拆解后就是：無(wú)需技術(shù)人員支持、用戶(hù)自由選擇頁(yè)面的埋點(diǎn)元素、保存埋點(diǎn)元素后sdk自動(dòng)上報(bào)事件（sdk指的是開(kāi)發(fā)封裝好的上報(bào)埋點(diǎn)事件的js代碼模塊）。

經(jīng)過(guò)調(diào)研，最終選擇了以chrome插件為載體的形式。

下面一一介紹chrome插件的概念和用途，讓你對(duì)chrome插件特性、開(kāi)發(fā)有所了解，在產(chǎn)品設(shè)計(jì)、提需求、溝通時(shí)帶來(lái)更多的靈感。（ps: chrome插件只是瀏覽器插件的一種，具體插件特性需根據(jù)瀏覽器類(lèi)型而定）

1、chrome插件的概念
2、chrome插件架構(gòu)
3、chrome插件的應(yīng)用

chrome插件的概念

chrome插件也叫擴(kuò)展程序，它是基于web技術(shù)，包括html、css、js等構(gòu)建的可以定制瀏覽體驗(yàn)的小型軟件程序，它們使用戶(hù)根據(jù)個(gè)人需要或偏好來(lái)定制chrome功能和行為。

核心就是可以為你的瀏覽器增加功能。我們點(diǎn)開(kāi)瀏覽器左上角的應(yīng)用就可以打開(kāi)插件商店，自由選擇想要安裝的插件。

chrome插件其實(shí)就是一個(gè)網(wǎng)頁(yè)，它也是由html、css、js三門(mén)語(yǔ)言寫(xiě)出來(lái)的頁(yè)面，

它們可以跟我們平時(shí)的網(wǎng)頁(yè)一樣，可以調(diào)用瀏覽器為網(wǎng)頁(yè)提供的所有 API，例如 XMLHttpRequest、JSON、HTML 5 等等。

但是它跟我們平時(shí)的網(wǎng)頁(yè)不一樣的地方是，它需要安裝，并且它可以把js腳本、css樣式注入到用戶(hù)頁(yè)面代碼中，來(lái)操縱用戶(hù)的頁(yè)面元素。

比如我們常見(jiàn)的網(wǎng)頁(yè)換膚插件（其實(shí)是改變了用戶(hù)的頁(yè)面背景）、暗黑模式插件（把用戶(hù)頁(yè)面背景改成黑色）、過(guò)濾垃圾廣告插件（把用戶(hù)頁(yè)面出現(xiàn)的廣告隱藏）等等。

除此之外，chrome還給插件提供了一套豐富的api，比如開(kāi)啟一個(gè)新的瀏覽器窗口、操縱書(shū)簽、攔截請(qǐng)求做修改等等。

chrome插件架構(gòu)

chrome插件一般由3部分組成，包括插件界面、內(nèi)嵌腳本、網(wǎng)頁(yè)后臺(tái)

1、插件的界面

  1、可以是瀏覽器右上角的按鈕和彈出框

  2、可以是瀏覽器右鍵菜單中的一項(xiàng) 

   比如我們常用選中單詞翻譯插件

2、內(nèi)嵌用戶(hù)界面腳本

如果插件想要和用戶(hù)的網(wǎng)頁(yè)交互，可以編寫(xiě)一個(gè)內(nèi)嵌用戶(hù)界面的腳本，這個(gè)腳本可以操縱用戶(hù)的界面，比如可以在用戶(hù)界面增加一個(gè)按鈕、可以更改用戶(hù)界面的樣式、還可以向用戶(hù)界面發(fā)送消息、交換消息。

3、后臺(tái)網(wǎng)頁(yè)

后臺(tái)網(wǎng)頁(yè)background.js，這里一般會(huì)做一些全局配置，事件監(jiān)聽(tīng)，調(diào)用chrome提供的各種api，比如創(chuàng)建一個(gè)新的瀏覽器窗口、增加修改tab標(biāo)簽頁(yè)、攔截用戶(hù)發(fā)出的請(qǐng)求，做一些更改（比如http請(qǐng)求更改為https）等等。具體的api可以查看chorme插件官方文檔。

chrome插件的應(yīng)用

chrome插件一般可應(yīng)用于以下幾種場(chǎng)景

頁(yè)面輔助工具

截圖工具、頁(yè)面取色器等

頁(yè)面分析工具

頁(yè)面性能分析、爬蟲(chóng)插件、無(wú)碼可視化埋點(diǎn)工具等

功能業(yè)務(wù)程序

翻譯插件、換皮膚插件等

小結(jié)：如果想要在瀏覽器提供一些頁(yè)面輔助、頁(yè)面分析等功能，使用chrome插件是一個(gè)比較好的選擇。

---- 推薦閱讀 ----

| ?? 愛(ài)心三連擊?? 

看到這里了就點(diǎn)個(gè)在看/分享支持下吧，你的點(diǎn)贊、分享、在看是我持續(xù)創(chuàng)作的動(dòng)力！