Chrome擴充套件外掛流程

阿新 • • 發佈：2019-01-17

一、瀏覽器外掛基礎步驟：

1、檔案最基礎的配置：

一個manifest檔案、一個或多個html檔案、可選的一個或多個javascript檔案、可選的任何需要的其他檔案，例如圖片；在開發應用（擴充套件）時，需要把這些檔案都放到同一個目錄下。釋出應用（擴充套件）時，這個目錄全部打包到一個應用（擴充套件）名是.crx的壓縮檔案中。如果使用Chrome Developer Dashboard,上傳應用（擴充套件），可以自動生成.crx檔案。

2、建立應用：

建立配置檔案：manifest.json（關於版本資訊等基礎配置）圖示檔案；

3、載入擴充套件：在選單欄選擇更多工具，開啟擴充套件程式，選擇開發者模式，點選“載入已解壓的擴充套件程式（載入正在開發的擴充套件程式）”按鈕，選擇擴充套件檔案所在的目錄檔案，如果擴充套件應用正確，圖示就會顯示在位址列右側；

二、詳細解釋manifest.json檔案配置：

每一個擴充套件、可安裝的WebApp、面板，都有一個JSON格式的manifest檔案，叫manifest.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，它們可以獲取瀏覽器所訪問頁面的詳細資訊，並可以修改這些資訊。

詳情可以檢視文件欄位解釋：

三、舉個栗子：

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);
});

效果如圖：

四、打包擴充套件應用：

Chrome擴充套件外掛流程

Chrome擴充套件外掛流程

寫一個google chrome 擴充套件外掛

Chrome擴充套件外掛-用於API & HTTP 請求除錯：Postman

推薦幾款好用的Chrome擴充套件外掛

在給Chrome新增外掛時提示“無法新增來自此網站的應用、擴充套件程式和應用指令碼”

Vscode外掛 livereload配合chrome擴充套件程式livereload實現網頁自動重新整理(儲存時)

開發順帶NPAPI外掛的Chrome擴充套件

開發附帶NPAPI外掛的Chrome擴充套件

ExtJS4.2學習基於表格的擴充套件外掛---rowEditing

Chrome瀏覽器外掛開發入門

開發Chrome 擴充套件程式Hello

layui form.js select的擴充套件外掛（轉自Author：@賢心）

Chrome擴充套件程式和油猴推薦

手把手教你做一個自己的chrome擴充套件程式

pluginkit 讀取macOS Mojave擴充套件外掛列表的使用方法

vscode-擴充套件外掛-呼叫系統程式

chrome flash外掛改為自動執行

真男人敢嚐鮮：使用Chrome擴充套件iSearch，美化醜陋標籤頁，改造難用的書籤，定期清理快取，提升福利，學術，程式碼等搜尋效率

mqtt推送，Activemq 擴充套件外掛

$.fn.datagrid.methods[_86e] is not a function(easyui擴充套件外掛衝突錯誤,已解決)

Chrome擴充套件外掛流程

相關推薦