根據(jù)相關(guān)數(shù)據(jù)顯示，谷歌的Chrome瀏覽器目前已達(dá)近七成的市場占有率，成為瀏覽器的“霸主”。大家選擇Chrome，除了是因為性能的優(yōu)越以及強大的兼容性之外，Chrome充足的擴(kuò)展插件，可以讓我們的瀏覽器成為一個“百寶箱”。而谷歌瀏覽器插件更是一種用于定制瀏覽器體驗的小程序，通過插件，我們可以根據(jù)個人的需求定制瀏覽器的行為。Chrome插件是一個用Web技術(shù)開發(fā)的軟件，可以說只要掌握了”前端三兄弟“（html、js、css），相當(dāng)于會了Chrome插件開發(fā)的一大半。

通過Chrome插件，我們可以翻譯網(wǎng)頁上的文字、我們可以拾取網(wǎng)頁上的顏色、我們可以在線查詞，我們甚至可以將一個“Excel“集成到我們的插件中。
相信對于大家對于Chrome插件應(yīng)該不陌生了，多余的話就不多贅述，我們直接開啟插件開發(fā)的入門分享以及教大家如何實現(xiàn)將“Excel”集成到Chrome插件。

讓你的插件說聲“Hello world”

1、創(chuàng)建manifest.json文件。該文件是Chrome插件的入口文件，也就是配置文件，定義了插件的所有信息，這是一個json文件。

我們可以看到這份json文件定義了一些基本的字段，包括插件的名稱、描述、版本等。

2、給我們的插件添加上一個符合插件定位的圖片。放置在default_icon字段下，可以配置不同尺寸的icon。

3、添加一個默認(rèn)的html文件。我們就是通過這個html將點擊插件之后要展示的內(nèi)容彈出。

4、 完成之后，我們將帶有hello.json、hello.png、manifest.json的文件夾加載到瀏覽器中

5、點擊自定義的圖標(biāo)，就可以看到我們第一個自定義的Chrome插件的誕生。至此，我們已經(jīng)完成了Chrome插件的簡單入門。

給你的插件打開“一扇窗”（Popup）

Popup是我們點擊插件之后彈出的一個窗口網(wǎng)頁，用于簡單的臨時交互。當(dāng)我們點擊非瀏覽器區(qū)域時，該窗口就會失去焦點而關(guān)閉，上面所描述的就是一個簡單的例子。其聲明周期就是從打開到關(guān)閉的過程。

Popup簡單來說就是一個html頁面，創(chuàng)建好對應(yīng)的html文件后，我們將其在"browser_action"字段下指定"default_popup"的路徑，就像上一部分的圖2。

想要長時間運行可以用“后臺”（Background）

通過popup我們知道他是生命周期比較短的頁面，要想插件不被點擊的時候也能運行，可以用background。他的生命周期是從瀏覽器打開開始，直至瀏覽器頁面關(guān)閉。

添加的方式也很簡單，我們只需要在manifest.json中添加background字段。注意，可以通過“page”指定網(wǎng)頁，也可以通過“script”指定一個js文件，兩者用其一即可。

右鍵菜單（ContextMenus）將會非常實用

對于插件的形式，不僅僅是在于右上角的圖標(biāo)，定制瀏覽器的右鍵菜單，也是插件的一種。在添加前，我們需要在manifest.json中聲明右鍵菜單的權(quán)限。

然后在我們的js文件中調(diào)用Chrome給我們提供的接口，例如

我們還可以在icon字段添加我們想要實現(xiàn)的右鍵菜單圖標(biāo)。

完成以上操作后，在瀏覽器右鍵點擊時，會出現(xiàn)我們定制的菜單項。

讓你的插件會“說話”（notifications）

Chrome提供了chrome.notifications API,讓我們能夠進(jìn)行一些桌面推送。例如我們的插件需要在后臺進(jìn)行輪詢的時候，可以定時根據(jù)最新的狀態(tài)進(jìn)行一個推送，收到消息、有多少事件待處理這些都是典型的例子。

我們可以直接延續(xù)上面右鍵菜單的例子，把我們的推送和右鍵菜單做一個簡單的結(jié)合。可以看到下面的代碼，我們在右鍵菜單的點擊事件中，加入了chrome提供的API chrome.notifications.create創(chuàng)建一個新的推送。同時我們可以定制這個推送的一些自定義信息，包括推送的類型、圖標(biāo)、名稱、顯示的信息。

將我們的上述代碼保存后，更新我們的插件，通過右鍵菜單點擊，右下角就會進(jìn)行推送。

讓你的插件會“辦公”（嵌入Excel）

Excel是一款十分強大的桌面辦公軟件，缺點是必須要安裝對應(yīng)的客戶端。如果想實現(xiàn)我們在瀏覽器中的”Excel”,而不必安裝任何內(nèi)容，我們可以通過以下內(nèi)容實現(xiàn)：

1、最開始我們先創(chuàng)建插件的文件夾，將我們的配置信息（manifest.json）根據(jù)實需求進(jìn)行填寫。

2、我們需要將組件版編輯器進(jìn)行下載，然后集成到我們的Chrome插件中。我們可以到下方鏈接中進(jìn)行下載，關(guān)于組件版編輯器也有介紹。

下載完成后，我們可以在下面的路徑找到組件版編輯器的示例，我們用purejs的即可。

SpreadJS.Component.Designer.Release.V14.0\Designer Component\samples

3、把這個文件夾復(fù)制到我們的Chrome插件文件夾中，然后把cdn的引用下載下來，改為本地引用（下圖紅框）。并創(chuàng)建一個新的js文件，把內(nèi)嵌式引用改為外鏈?zhǔn)揭茫ㄏ聢D藍(lán)框）。

4、由于內(nèi)容安全策略的限制，為了能正常引入我們的pdf等模塊，我們需要在manifest.json中添加對應(yīng)的聲明。

5、至此，我們要調(diào)整的相關(guān)內(nèi)容已經(jīng)結(jié)束了，下圖是整個插件的目錄結(jié)構(gòu)，我們將其加載到瀏覽器后就可以正常使用了。

6、效果如下圖所示，我們實現(xiàn)了無需安裝任何內(nèi)容，即可在瀏覽器中實現(xiàn)Excel功能。

打包

完成開發(fā)后，我們除了可以通過文件夾在本地引入進(jìn)行訪問，還可以將其打包為一個crx文件，通過Chrome的商城發(fā)布，能夠讓所有人都能使用你開發(fā)的插件。

總結(jié)

以上就是Chrome插件開發(fā)的入門簡介以及實現(xiàn)將“Excel”集成到我們的Chrome插件中。Chrome還為我們提供了豐富的接口包括但不限于消息通信、動態(tài)注入、本地存儲、網(wǎng)絡(luò)請求。通過這些接口，我們可以實現(xiàn)更多有趣、有用的功能。有關(guān)更多Chrome插件開發(fā)的信息可以查看檔，里面會有更加詳細(xì)全面的介紹。插件的形式也不僅限于上面的所描述的，多動手，就能探索更多的可能。

以上就是怎樣制作“別人家的”Chrome插件的詳細(xì)內(nèi)容，更多關(guān)于制作Chrome插件的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論