Chrome插件開發之manifest.json

時間 2019-11-24

標籤 chrome 插件開發 manifest.json manifest json 欄目 Chrome 简体版

原文原文鏈接

廣而告之：javascript

Chrome插件之一鍵保存網頁爲PDF1.1發佈

http://www.cnblogs.com/bdstjk/p/3179543.htmlhtml

最近作「一鍵保存網頁爲PDF」過程當中，對Chrome插件的開發也有些心得，在這裏分享給你們。java

在這裏我將我用我插件做爲例子給你們講解，雖然我這篇文章是講manifest.json文件，不過在這過程當中會同時介紹一些相關的東西。jquery

整個Chrome插件開發最核心的就是manifest.json，熟悉了它，其它的都很容易了。chrome

首先看個人插件的manifest.json文件：json

{
  
	"manifest_version": 2,
  
	"name": "保存網頁爲PDF",
  
	"version": "1.1.7.80",
  
	"description": "保存網頁爲PDF【做者：塗劍凱，郵箱：bdstjk@qq.com】",

	"icons":{"16":"Images/16.png","48":"Images/48.png","128":"Images/128.png"},

	"background": {
		"page": "background.html"
	},

	"options_page": "options.html",
  
	"browser_action": 
	{
    
		"default_icon": "Images/16.png",
    
		"name": "保存網頁爲PDF"
  
	},
  
	"permissions": [
		"tabs",
		"http://localhost:9240/",
		"activeTab",
		"notifications","storage","http://*/"
	],

	"update_url": "http://localhost:9240/SaveService/GetUpdateXML"
}

必須屬性：name、version、manifest_version

一、name 顧名思義就是你的插件的名稱；api

二、version 指你的插件的版本號；瀏覽器

三、manifest_version 指定清單文件格式的版本，在Chrome18以後，應該都是2，因此這個值直接設定爲2就OK了；app

推薦屬性：description、icons、default_locale

一、description 插件描述，簡單介紹插件用途；ide

二、icons 插件圖標，需準備16*16（擴展信息欄）、48*48（擴展管理頁面）、128*128（用在安裝過程當中）的三個圖標文件，建議爲PNG格式，由於PNG對透明的支持最好；

三、default_locale 國際化支持，支持何種語言的瀏覽器，雖然官方推薦，不過我沒用；

background

這是一個比較重要的屬性，若是你須要運行一些後臺腳本，好比監聽用戶在擴展信息欄按下你的插件圖標，或者你要監聽用戶新建tab頁，這個時候你就須要有一個background的頁面。background你能夠指定一個HTML頁面（如個人插件），也能夠指定一個JS文件，如：

{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js"]
  },
  ...
}

View Code

須要注意兩點：

一、是HTML不能寫JS代碼，JS代碼須要寫到JS文件中後引入；

二、不能使用jquery（沒有詳細測試，多是我沒用正確）；

監聽用戶在擴展信息欄按下你的插件圖標時，顯示當前活動頁的URL：

chrome.browserAction.onClicked.addListener(function (tab) {
alert(tab.url);
});

View Code

參見：https://developer.chrome.com/extensions/background_pages.html

options_page

options_page指定你的插件設置頁面，這個看我的需求而定，能夠不設置。

須要注意兩點：

一、你須要將JS寫到一個JS文件中後引入；

二、不能有HTML元素的內聯事件（如<button onclick="...">），你須要經過JS給HTML元素綁定事件如：

$(document).ready(function () {
    $("#btnOpenSetting").click(function () {
        OpenSetting();
    });
});

View Code

browser_action

browser_action能夠設置擴展信息欄的圖標、圖標懸浮提示、點擊圖標是彈出窗口（個人插件不須要彈出窗口因此未設置）；

給你們看一個完整例子：

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {                    // optional
      "19": "images/icon19.png",           // optional
      "38": "images/icon38.png"            // optional
    },
    "default_title": "Google Mail",      // optional; shown in tooltip
    "default_popup": "popup.html"        // optional
  },
  ...
}

View Code

permissions

permissions對於manifest.json來講雖然不是必要屬性，可是對於咱們開發插件來講倒是必要的manifest.json，咱們總要向chrome申請點權限，才能完成咱們的插件；

這裏我就只介紹個人插件裏面用到的權限（固然其實有點權限我最後也沒用）：

"tabs", 訪問瀏覽器選項卡
"http://localhost:9240/", AJAX訪問localhost:9240的權限
"activeTab", 獲取當前活動選項卡
"notifications", 瀏覽器通知（基於HTML5的通知實現）
"storage", 存儲,但願存儲一些設置的話，就須要用到
"http://*/" 訪問任意域名的權限

update_url

update_url指定自動更新地址，若是你是經過chrome官方發佈插件，這個屬性不須要設置；但若是跟我同樣經過非官方發佈，這個屬性就很巴適了；你只須要第一次拖拽安裝插件，之後都能自動更新了。這裏給一個update_url須要返回的數據格式例子：

<?xml version='1.0' encoding='UTF-8'?>
<gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
  <app appid='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'>
    <updatecheck codebase='http://myhost.com/mytestextension/mte_v2.crx' version='2.0' />
  </app>
</gupdate>