Chrome擴展插件流程

時間 2019-11-07

原文原文鏈接

1、瀏覽器插件基礎步驟：javascript

一、文件最基礎的配置：css

一個manifest文件、一個或多個html文件、可選的一個或多個javascript文件、可選的任何須要的其餘文件，例如圖片；在開發應用（擴展）時，須要把這些文件都放到同一個目錄下。發佈應用（擴展）時，這個目錄所有打包到一個應用（擴展）名是.crx的壓縮文件中。若是使用Chrome Developer Dashboard,上傳應用（擴展），能夠自動生成.crx文件。html

二、建立應用：java

建立配置文件：manifest.json（關於版本信息等基礎配置）圖標文件；jquery

三、加載擴展：在菜單欄選擇更多工具，打開擴展程序，選擇開發者模式，點擊「加載已解壓的擴展程序（載入正在開發的擴展程序）」按鈕，選擇擴展文件所在的目錄文件，若是擴展應用正確，圖標就會顯示在地址欄右側；web

2、詳細解釋manifest.json文件配置：chrome

每個擴展、可安裝的WebApp、皮膚，都有一個JSON格式的manifest文件，叫manifest.json，裏面提供了重要的信息。最基礎的文件，也是最重要的文件。配置關於項目的相關信息：版本、名稱、描述、圖標等；json

字段說明
   如下是三個必填的字段：

manifest_version：manifest文件內容格式的版本，目前版本爲2，本次介紹的格式都是基於該版本的.
 
version：該瀏覽器插件的版本。
 
name：該瀏覽器插件的名稱。

可選擇的字段：

description：該瀏覽器插件的描述信息；

icons：一個或者多個圖標來表示擴展；

browser_action：用 browser actions 能夠在chrome主工具條的地址欄右側增長一個圖標。做爲這個圖標的延展，一個browser action圖標還能夠有tooltip、badge和popup。
瀏覽器插件的工具欄圖標。和名稱
eg：
"browser_action" : {
        "default_icon": "icons/browser_action_24.png",
        "default_title": "__MSG_extensionName__"   
    }

permissions：瀏覽器插件須要的權限，支持正則匹配；

background：瀏覽器插件後端程序，大部分瀏覽器插件api，以及https網站都須要後端程序來完成。如：獲取瀏覽器插件的版本號。
背景頁是一個運行在擴展進程中的HTML頁面。它在你的擴展的整個生命週期都存在，同時，在同一時間只有一個實例處於活動狀態。
"background" : {
        "persistent" : false,
        "page": "background.html"   //自定義背景文件
    },
   "background": {
    "scripts": ["background.js"]  // 由定義的js文件自動生成背景文件，
  }


content_scripts：頁面注入配置。例如：向域名爲xx的注入一串輸出hello world的腳本，就須要該配置，同時也須要配置擁有該域名xx的權限。
是在Web頁面內運行的javascript腳本。經過使用標準的DOM，它們能夠獲取瀏覽器所訪問頁面的詳細信息，並能夠修改這些信息。

詳情能夠查看文檔字段解釋：後端

http://open.chrome.360.cn/extension_dev/manifest.htmlapi

3、舉個栗子：

manifest.json文件配置：
{
    "name": "第一個擴展",//該插件的名稱
    "version": "1.0", //該插件的版本
    "manifest_version": 2, //文件內容格式的版本，目前版本爲2，本次介紹的格式都是基於該版本
    "description": "擴展", //該插件的描述信息
    "background": { //運行在擴展進程中的HTML頁面,通常背景頁不須要任何HTML，僅僅須要js文件,瀏覽器插件後端程序，大部分瀏覽器插件api，以及https網站都須要後端程序來完成。如：獲取瀏覽器插件的版本號。
        "scripts": ["background.js"]
    },
    "permissions": [//內容腳本能夠做用到模式匹配定義好的URL集合上
        "http://*/",
        "http://*/*",
        "https://*/",
        "https://*/*",
        "bookmarks",
        "contextMenus",
        "activeTab",
        "storage",
        "tabs",
        "cookies"
    ],
    "icons": {//一個或者多個圖標來表示擴展。提供一個128x128的圖標將在webstore安裝時候使用。48x48的圖標擴展管理頁面須要。提供16x16的圖標做爲擴頁面的fa網頁圖標，還將顯示在實驗性的擴展infobar特性上。
        "16": "img/icon-16.png",
        "24": "img/icon-32.png",
        "48": "img/icon-48.png",
        "64": "img/icon-64.png",
        "128": "img/icon-128.png"
    },
    "browser_action": {//工具欄展現的圖標相關信息
        "default_icon": "img/icon.png",
        "default_title": "測試標題",//hover時出現的標題
        "default_popup": "popup.html"
    }
}

popul.html:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Getting Started Extension's Popup</title>
		<style type="text/css">
			body{
			    width: 110px;
			    overflow-x: hidden;
			}
			p,h2{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="demo">
		</div>
		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="popup.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

popup.js文件：

$(document).ready(function(){
    var details = chrome.app.getDetails();
    var html = "<p><img src='"+details.browser_action.default_icon+"'></p>"+
            "<h2>"+details.name+"</h2>"+
            "<p>版本:v"+details.version+"</p>"+
            "<p>做者:simbaLS</p>"+
            "<p>@copyright 2018</p>";
    $("#demo").html(html);
});