文章目錄
一、manifest.json
注意：json 文件中不允許使用註釋！
這是一個Chrome插件最重要也是必不可少的文件，用來配置所有和插件相關的配置，必須放在根目錄。
其中，manifest_version、name、version 3個是必不可少的，description和icons是推薦的。
1.1 name 插件的名字
1.2 version 插件的版本
1.3 manifest_version 清單文件的版本
- manifest_version: 清單文件(Json)的版本，這個必須寫，而且必須是2
1.4 description 插件描述
```javascript
{
"name":"Peng Gang's first Plug-in",
"version":"1.0.0",
"manifest_verson":"2",
"description":"這是我的第一個Chrome插件"
}
1.4 icons 設置圖標的圖片
2.2 有講如何將我們插件安裝到擴展程序面板
"icons":{
"16":"image/tools.png",
"32":"image/tools.png",
"128":"image/tools.png"
}
效果:
二、content_scripts
所謂content-scripts，其實就是Chrome插件中向頁面注入腳本的一種形式（雖然名爲script，其實還可以包括css的），藉助content-scripts我們可以實現通過配置的方式輕鬆向指定頁面注入JS和CSS
最常見的比如：廣告屏蔽、頁面CSS定製，等等。
例：
{
// 需要直接注入頁面的JS、css
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多個JS按順序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS的注入可以隨便一點，但是CSS的注意就要千萬小心了，因爲一不小心就可能影響全局樣式
"css": ["css/custom.css"],
// 代碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最後一個表示頁面空閒時，默認document_idle
"run_at": "document_start"
}
],
}
特別注意，如果沒有主動指定run_at爲document_start（默認爲document_idle），下面這種代碼是不會生效的：
document.addEventListener('DOMContentLoaded', function()
{
console.log('我被執行了！');
});
- addEventListener(參數1，參數2) 方法用於向指定元素添加事件句柄。
參數一：必須。字符串，指定事件名。
參數二：必須。指定事件觸發時執行的函數。
詳細介紹參考:菜鳥教程 - DOMContentLoaded
當初始的 HTML 文檔被完全加載和解析完成之後，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子框架的完成加載。
注意：它和load方法功能上很相似，但卻又有細微的差別：
load:應該僅用於檢測一個完全加載的頁面。 - 區別:頁面的load事件會在DOMContentLoaded被觸發之後才觸發,也就是DOMcontentLoaded早於load
content-scripts和原始頁面共享DOM，但是不共享JS，如要訪問頁面JS（例如某個JS變量），只能通過injected js來實現。
content-scripts不能訪問絕大部分chrome.xxx.api，除了下面這4種：
- chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
- chrome.i18n
- chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
- chrome.storage
其實看到這裏不要悲觀，這些API絕大部分時候都夠用了，非要調用其它API的話，你還可以通過通信來實現讓background來幫你調用（關於通信，後文有詳細介紹）。
2.1 matches 設置匹配url的規則
如果要匹配所有網頁，可以使用 all_urls
{
"name":"Peng Gang's first Plug-in",
"version":"1.0.0",
"manifest_version":2,
"content_scripts":[
{
"matches":["<all_urls>"],
"js":["index.js"]
}
]
}
index.js
alert('我的插件裏邊的index.js');
如果滿足條件就執行js裏邊的文件
2.2 加載我們的插件
1、打開 設置-更多工具-擴展程序
2、打開開發者模式
3、選擇 加載已解壓的擴展程序
然後我們隨便進入一個網站測試以下
效果:
可以發現我們的插件成功執行!
匹配所有bilibili開頭的url,
"content_scripts":[
{
"matches":["https://www.bilibili.com/*"],
"js":["index.js"]
}
]
注意：每次修改過manifest.json文件後我們都要重啓一下插件
三、broswer_action 與 page_action
-
browser_action 是瀏覽器右邊的小按鈕圖標 一直存在
例如：
![在這裏插入圖片描述]()
-
page_action 是內置到瀏覽器url裏邊的小按鈕 只有在匹配某些特定的網頁時才顯示
例如：
![在這裏插入圖片描述]()
3.1 default_icon 設置圖標的圖形
"browser_action":{
"default_icon": "image/tools.png"
}
效果:
3.2 default_title 鼠標懸停時的文字
"browser_action":{
"default_icon": "image/tools.png",
"default_title": "作者:瘋狂的地球人"
}
效果:
3.3 default_popup 點擊彈出框
幾乎所有的插件點擊過後都有一個頁面彈出，類似這種:
那這是怎麼製作出來的呢？這時候就該我們的 default_popup 出場了！
-
default_popup 可以設置當用戶點擊按鈕過後顯示的頁面(例3.3)
-
popup可以包含任意你想要的HTML內容，並且會自適應大小。可以通過default_popup字段來指定popup頁面，也可以調用setPopup()方法。
需要特別注意的是，由於單擊圖標打開popup，焦點離開又立即關閉，所以popup頁面的生命週期一般很短，需要長時間運行的代碼千萬不要寫在popup裏面。 -
在權限上，它和background非常類似，它們之間最大的不同是生命週期的不同，popup中可以直接通過chrome.extension.getBackgroundPage()獲取background的window對象。
例3.3：
"browser_action":{
"default_icon": "image/tools.png",
"default_title": "作者:瘋狂的地球人",
"default_popup": "popup.html"
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
span{
color: white;
font-size: 20px;
background: linear-gradient(to right,red,purple);
white-space: nowrap;
}
</style>
</head>
<body>
<span>
CSDN:瘋狂的地球人出品
</span>
</body>
</html>
效果：
3.3.1 default_popup 打開的文件不能直接寫js文件。
在 default_popup打開的文件中，不能直接在script 標籤中寫腳本。只能使用引入的方式使用js文件。
例如：
四、permissions 聲明需要使用到的API
官網API接口說明：Chrome API Permission
聲明要使用那些API：
例如：
"permissions":["tabs"],
五、background.js
up主:只要你打開瀏覽器，它就是會執行。
"background":{
"scripts":["background.js"]
"persistent": false
},
}
background.js
chrome.browserAction.onClicked.addListener(function(){
//chrome.tabs.create({url:"https://www.baidu.com"});
chrome.tabs.create({url:"popup.html"});
});
上面這段代碼的作用是監聽 browser_acction 的點擊事件，當發生點擊事件的時候，調用chrome的API tabs 創建一個指定目錄的標籤頁。
注意：browser_action 的default_popup 方法的優先級高於這個接口
5.1 persistent 開啓狀態
Persistent background pages：一直開啓
需要時開啓，可通過將persistent設置爲false來設置
開啓時機：
- 首次安裝或更新完版本時
- 觸發特定事件時
- content script 向其發送消息時
- 其他頁面（例如popup）調用runtime.getBackgroundPage時