Chrome擴充套件外掛流程
一、瀏覽器外掛基礎步驟:
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擴充套件外掛流程
一、瀏覽器外掛基礎步驟: 1、檔案最基礎的配置 : 一個manifest檔案、一個或多個html檔案、可選的一個或多個javascript檔案、可選的任何需要的其他檔案,例如圖片;在開發應用(擴充套件)時,需要把這些檔案都放到同一個目錄下。釋出應用(擴充套件)時,這個目錄全部打包到一個應用(擴充套件)名是.c
寫一個google chrome 擴充套件外掛
2012-10-24 周海漢 2012.10.24 chrome外掛開發比ie簡單多了。IE必須開發activex控制元件,不懂com,不懂VC,非常困難。而chrome只需懂點JS,CSS,HTML5就差不多了。 方法如下:
Chrome擴充套件外掛-用於API & HTTP 請求除錯:Postman
Postman 是一個非常棒的Chrome擴充套件,提供功能強大的API & HTTP 請求除錯。它能夠傳送任何型別的HTTP requests (GET, HEAD, POST, PUT..),附帶任何數量的引數+ headers。支援不同的認證機制(ba
推薦幾款好用的Chrome擴充套件外掛
1. Adblock Plus,攔截廣告的神器2. Chrono下載管理器,可以用chrome進行批量下載3. Octotree,開啟github專案時左側可以層級展開,也可以對某個檔案進行單獨下載4. Quick QR Code Generator,快速生成網址二維碼5.
在給Chrome新增外掛時提示“無法新增來自此網站的應用、擴充套件程式和應用指令碼”
在給Chrome新增外掛時突然提示“無法新增來自此網站的應用、擴充套件程式和應用指令碼”。 是因為近日 Google 的 Chrome 瀏覽器宣佈從最新Chrome版本開始預設只允許從 Chrome Web Store 下載安裝擴充套件程式, 而眾多未登陸 Web Stor
Vscode外掛 livereload配合chrome擴充套件程式livereload實現網頁自動重新整理(儲存時)
前段時間電腦系統壞了,重新裝系統後便是繁瑣的軟體重灌了(對於程式猿來說,開發環境才是大事),這不,重灌vscode外掛livereload時,竟然忘了它怎麼用了!!!?於是有要百度一波,但是,查了好幾個部落格才解決了我的問題。。。怪自己記性不好啦。。。好的,進入正題。
開發順帶NPAPI外掛的Chrome擴充套件
開發附帶NPAPI外掛的Chrome擴充套件 1 NPAPI外掛 1.1 NPAPI簡介 NPAPI(Netscape Plugin Application Programming Interface,網景外掛應用程式介面)是網景公司當年制定的開發基於網景瀏覽
開發附帶NPAPI外掛的Chrome擴充套件
NPAPI(Netscape Plugin Application Programming Interface,網景外掛應用程式介面)是網景公司當年制定的開發基於網景瀏覽器,用於在瀏覽器中執行外部應用程式的通用介面。該介面基於外掛機制,制定了一系列的標準和API,因此也
ExtJS4.2學習基於表格的擴充套件外掛---rowEditing
http://blog.csdn.net/z1101385391/article/details/24492247 <strong>比較趕時髦,用了Extjs4.2,今天遇到一個問題,搞了好久。終於找到原因,用RowEditing編輯 新增girdPanel的行時,遇到儲存按鈕變
Chrome瀏覽器外掛開發入門
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
開發Chrome 擴充套件程式Hello
chrome擴充套件程式是基於HTML+CSS+Javascript的工程。 所以開發Web的同學開發這個瀏覽器擴充套件學習起來是非常方便的。專案結構主要包含一個manifest.json檔案來儲存專案資訊。本文參考官方地址:https://developer.chrome.com/extensions
layui form.js select的擴充套件外掛(轉自Author:@賢心)
最近做的需求裡面有類似於下拉框多選的需求,因為本身應用的是layui的元件庫,所以變去借鑑了一下寫法,應用到自己的專案之後的效果那是剛剛的。超級好用,下面先貼上程式碼:/** @Name:layui.form 表單元件 @Author:賢心 @License:MIT */layui.define('l
Chrome擴充套件程式和油猴推薦
擴充套件程式 Adblock Plus 去除廣告的,真的很管用 DrumUp根據你現在所瀏覽的內容推薦一些內容 Enable Copy 有些需要下載券的不能複製,有這個就可以解除網頁JS,可以放心複製了 Full Page S
手把手教你做一個自己的chrome擴充套件程式
手把手教你做一個自己的chrome擴充套件程式 [目錄] first.效果 1.收藏夾修改 (1).滑鼠移動到收藏夾上的動作效果 (2).收藏夾框 (3)百度搜索框功能 2.右上文字修改 3.背景圖片修改 4
pluginkit 讀取macOS Mojave擴充套件外掛列表的使用方法
最近研究macOS Mojave 10.14系統上外掛的使用變化,以便於後續解決惡意擴充套件外掛問題,發現與原來的處理方式改變後,舊有的指令碼還真不一定能找出當前系統的malware,於是還得順應時代改進,還要相容舊的,工作量看著就又要來了。這個過程中發現了一個一直存在卻被忽略,不停被改進的外掛檢視
vscode-擴充套件外掛-呼叫系統程式
呼叫系統程式 (windows的exe) 嘗試了幾個nodejs庫 如 child_process , shelljs 等去執行命令, 均失敗, 但是用純js寫的就可以執行命令. 一度失望, 讓後想到可以使用終端相關api, 在終端中開啟, 嘗試了一下結果ok啊啊啊!!! 喜大普奔…
chrome flash外掛改為自動執行
1.情景展示 國內網頁視訊播放大部分用的都是flash外掛,每次都要將預設改為允許,才能正常播放
真男人敢嚐鮮:使用Chrome擴充套件iSearch,美化醜陋標籤頁,改造難用的書籤,定期清理快取,提升福利,學術,程式碼等搜尋效率
先分享一個牛X的Chrome外掛——iSearch,有時間再寫一篇文章,介紹另外一個實用的小工具。 摘要: 本文介紹,如何使用擴充套件iSearch,打造高隱私,高顏值,高效率的Chrome。 iSearch功能太多,按照使用場景,列舉本人用到的功能。 外掛iSearch的使用場景:
mqtt推送,Activemq 擴充套件外掛
業務場景 工作中使用mqtt做推送,activemq作為broker 問題 (1)認證。客戶端連線broker需要認證 (2)主題許可權。客戶只能訂閱自己有許可權的主題 方案 1 認證 基本原理是activemq支援自定義外掛。 公司系統是前後分離的,我們使用者在登入後,會將token
$.fn.datagrid.methods[_86e] is not a function(easyui擴充套件外掛衝突錯誤,已解決)
出現如下錯誤:$.fn.datagrid.methods[_86e] is not a function 在專案中我出現的問題是使用可編輯表格擴充套件外掛(Cell Editing in DataGrid)的時候沒有相應的效果 後來發現是和datagrid-擴充套件列資訊中的 je