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

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

讓你的插件說聲“Hello world”

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

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

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

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

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

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

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

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

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

想要長時(shí)間運(yùn)行可以用“后臺(tái)”（Background）

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

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

右鍵菜單（ContextMenus）將會(huì)非常實(shí)用

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

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

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

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

讓你的插件會(huì)“說話”（notifications）

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

我們可以直接延續(xù)上面右鍵菜單的例子，把我們的推送和右鍵菜單做一個(gè)簡(jiǎn)單的結(jié)合?？梢钥吹较旅娴拇a，我們?cè)谟益I菜單的點(diǎn)擊事件中，加入了chrome提供的API chrome.notifications.create創(chuàng)建一個(gè)新的推送。同時(shí)我們可以定制這個(gè)推送的一些自定義信息，包括推送的類型、圖標(biāo)、名稱、顯示的信息。

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

讓你的插件會(huì)“辦公”（嵌入Excel）

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

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

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

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

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

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

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

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

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

打包

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

總結(jié)

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

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

最新評(píng)論