柚子快報激活碼778899分享：前端 my-plugin

http://yzkb.51969.com/

SwitchyOmega Proxy

功能：你懂的。

Hello World

manifest.json

Chrome 瀏覽器插件沒有嚴格的文件結(jié)構(gòu)約束，只需要保證文件夾根目錄有 manifest.json 文件**，**該文件的內(nèi)容會概括插件所需的資源、權(quán)限等等。

一個段簡單的示例：

{

“manifest_version”:?2,?//?必填

“name”:?“my-plugin”,?//?必填

“version”:?“0.1.0”?//?必填

}

manifest_version：代表了manifest文件的版本，瀏覽器會根據(jù)這個值去指定該版本擁有的功能。

name：插件的名稱。

version：插件版本。

將manifest.json文件放到一個文件夾內(nèi)。

chrome://extensions/

在瀏覽器地址欄輸入chrome://extensions/打開“拓展程序”頁面。

注意：需要啟用右上角的 “開發(fā)者模式” 才能加載已解壓的插件文件：

加載已解壓的插件

啟用之后點擊加載已解壓的拓展程序，選擇剛剛我們放入了manifest.json的文件夾，之后你會看到：

新增了一個我們剛剛添加的插件，而且瀏覽器右上角也會有我們的一個圖標：

此時已經(jīng)加載了一個插件了，但是這個插件除了占用瀏覽器的一個位置除外，沒有任何作用。

如果沒有設置插件圖標，那么插件的第一個字符會成為插件的默認icon。

讓插件看起來更“插件”一點

為了讓這個插件更“完善”一點，我們給它加一個icon和描述，并且點擊出現(xiàn)一個popup頁面，popup 頁面一般用來承載臨時性的交互，且生命周期很短：單擊圖標打開popup，焦點離開又立即關(guān)閉，可以通過default_popup字段來定義。

{

…

“description”:?“這是一段描述”,

//?插件管理頁面的icon

“icons”:?{

“84”:?“./icon/ball.png”

},

//?瀏覽器右上角的圖標和內(nèi)容

“browser_action”:?{

“default_icon”:?“./icon/ball.png”,

“default_title”:?“我的插件”,

“default_popup”:?“./html/popup.html”

}

}

此時我們的目錄結(jié)構(gòu)也變成了這樣：

給popup.html加上內(nèi)容：

my-plugin

hello?world!!

之后，我們點擊插件右下角的“刷新”按鈕：

你會發(fā)現(xiàn)插件有了icon和描述：

并且右上角的icon也變了，點擊一下，會彈出我們剛剛編寫的popup.html頁面：

現(xiàn)在，我們一個“完整”的插件就已經(jīng)做好了。

柚子快報激活碼778899分享：前端 my-plugin

http://yzkb.51969.com/

參考鏈接