首頁 > 網際網路

chrome外掛怎麼開發

2019-12-19 06:47:31

可以說瀏覽器正是由於外掛的支援,使其功能變得強大和豐富多彩。其實我們也可以根據自己的需要來設計瀏覽器外掛,從而滿足自己的需要。下面小編就以Chrome外掛(應用)開發為例,給大家簡單的講解一下具體的設計方法。


1

首先,我們建立一個資料夾,用於存在Chrome應用(擴充套件)所需要的所有檔案。並在該資料夾中存放三個檔案:

其中 icon.png檔案是一個畫素為32*32的圖示,用於顯示外掛的圖示

manifest.json檔案用於對外掛進行描述

popup.html檔案是一個彈窗網頁檔案,用於在點選外掛圖示後顯示一個視窗。


2

接下來編寫「manifest.json」檔案的內容如下,如圖:

{

"name": "My First Extension",

"version": "1.0",

"manifest_version":2,

"description": "The first extension that I made.",

"browser_action": {

"default_icon": "icon.png",

"default_popup":"popup.html"

},

"permissions": [

"http://api.flickr.com/"

]

}


3

對「popup.html」網頁檔案進行如下內容編輯:

<html>

<body >

<h4 style="text-decoration:underline">百度ID</h4>

<font color=red>feifeidown</font>

</div>

</body>

</html>


4

最後來測試一下該外掛:

開啟Chrome瀏覽器,點選「選單」按鈕,從彈出的擴充套件選單中選擇「工具」->「擴充套件管理」項。


5

在開啟的新頁面中,勾選「開發者模式」,點選「載入正在開發的應用擴充套件」按鈕。


6

從開啟的「瀏覽資料夾」視窗中,選擇外掛所在的資料夾,點選「確定」按鈕。


7

此時該外掛就正式啟動了。


8

點選瀏覽器右側的外掛圖示,就彈出視窗並顯示其中的內容。至此,Chrome瀏覽器外掛開發完成。



IT145.com E-mail:sddin#qq.com