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

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

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

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

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

chrome插件的概念

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

核心就是可以為你的瀏覽器增加功能。我們點開瀏覽器左上角的應用就可以打開插件商店，自由選擇想要安裝的插件。

chrome插件其實就是一個網(wǎng)頁，它也是由html、css、js三門語言寫出來的頁面，

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

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

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

除此之外，chrome還給插件提供了一套豐富的api，比如開啟一個新的瀏覽器窗口、操縱書簽、攔截請求做修改等等。

chrome插件架構(gòu)

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

1、插件的界面

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

  2、可以是瀏覽器右鍵菜單中的一項 

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

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

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

3、后臺網(wǎng)頁

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

chrome插件的應用

chrome插件一般可應用于以下幾種場景

頁面輔助工具

截圖工具、頁面取色器等

頁面分析工具

頁面性能分析、爬蟲插件、無碼可視化埋點工具等

功能業(yè)務程序

翻譯插件、換皮膚插件等

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

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

| ?? 愛心三連擊?? 

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