天天看點

怎樣開發Chrome浏覽器的插件

chrome谷歌浏覽器是一款開發者使用的浏覽器,使用者不僅可以使用浏覽器搜尋自己想要的内容,還可以使用浏覽器制作自己想要的功能和插件,這才是這款浏覽器最厲害的地方,那麼這款軟體要如何使用呢,那麼今天就和小編一起來看看,這款軟體到底要如何使用,快速幫助使用者解決各種難題,讓更多的使用者可以擷取自己想要的服務,有興趣的使用者就來一鍵搜尋使用吧!非常的便捷,今天小編就會與大家一起來分享一下這款軟體開發插件的過程和方法。

怎樣開發Chrome浏覽器的插件

建立一個單獨的檔案夾,起個名字吧,比如說我們為百度貼吧開發一個插件,就叫TiebaAddion。之後在這個檔案夾裡建立一個名字為“manifest.json”的檔案,在裡面寫上如下的樣子。

{

“name”: “TiebaAddin”,

“version”: “1.0”,

“description”: “An addin for Tieba.”,

“browser_action”: {“default_icon”: “icon.png”},

“permissions”: [http:///]

}

這裡各項的意義很顯然可以通過名字得之,但如果你想了解更多,請參考“Chrome擴充”文檔(詳見參考資料)

如果你細心看上面的配置檔案,你就會知道,你現在需要找一個圖示,放在這個目錄下,名字叫icon.png,當然,這個名字隻要和上面的配置檔案裡default_icon的屬性一緻就好。

現在,隻要點選Chrome工具條的菜單按鈕選擇裡面的工具(Tools)>> 擴充(Extensions)就好。菜單按鈕如右圖。

選擇開發者模式,選擇加載未打包的插件,然後,選擇第一步中的那個檔案夾即可。好吧,現在我們就可以啟動插件了。

怎樣開發Chrome浏覽器的插件[多圖]

好了,在位址欄的右側出現了我們的圖示,但是點選圖示卻什麼也沒做,這是自然地,因為我們還什麼代碼沒有寫。現在在那個目錄下,建立一個html檔案,并且名字為popup.html,同時在配置檔案裡“browser_action”下加上一條:“popup”: “popup.html”。示範:

{

“name”: “TiebaAddin”,

“version”: “1.0”,

“description”: “An addin for Tieba.”,

“browser_action”: {“default_icon”: “icon.png”,“popup”: “popup.html”},

“permissions”: [http:///]

}

此處注意,每一對大括号裡的最後一項後面都沒有逗号,其餘的每項之間必須用逗号間隔!哪怕是browser_action這樣複合的項目,在他的大括号後也要有逗号。

怎樣開發Chrome浏覽器的插件[多圖]

在Popup.html裡寫上一些html代碼,比如簡單的輸出HelloWorld也好,這個Popup.html和普通的html檔案按沒有任何差别。這就是基本的插件制作方法