比想象中要簡單javascript
// 簡單的demo目錄 ├── icon.png ├── manifest.json ├── popup.html └── popup.js
打開chrome://extensions/
開啓開發者模式,html
選擇加載已解壓的擴展程序
vue
選中本身的項目文件便可上手調試java
manifest.json 配置文件
{ // 必須 "manifest_version": 2, "name": "個人擴展程序", "version": "版本字符串", // 可選:瀏覽器按鈕能夠包含圖標、工具提示、徽章和彈出內容。 "browser_action": { "default_title": "get cookie In chrome", // 鼠標移動到插件icon會tips "default_popup": "popup.html", // 點擊以後popup出來的部分 "default_icon": "icon.png", // 插件的icon // page_action 配置的是指瀏覽器地址欄中的一些交互,較少人這麼用 "background": { // 後臺運行程勳/腳本配置 "scripts": ["eventPage.js"], // 腳本, "page": "background.html", // 也能夠是html "persistent": false // 是否長期運做 }, "permissions": [ // 權限配置,表示在js執行過程能使用的權限 "tabs", // 擁有使用chrome tab的權限 "bookmarks", // 可使用書籤的權限 "http://www.blogger.com/", // 設置站點權限 "http://*.google.com/", "unlimitedStorage" // 不限制存儲 ...// 詳細配置請看下面 ], .... }, }
上面提到部分的詳細說明文檔:jquery
permissions 權限清單git
1.chrome.runtime.sendMessage
適合github
content.js => background.js 通信 content.js => popup.js 通信 background.js => popup.js 通信
2.chrome.tabs.sendMessage
適合ajax
background.js => content.js popup.js => content.js
3.接受信息用chrome.runtime.onMessage.addListener
chrome
4.popup
頁面能夠經過chrome.extension.getBackgroundPage()
方式調用background
的函數json
1.引入vue
會出現 安全性問題,須要在manifest.json
中設置
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
2.若是須要在background
中使用jquery
, 須要提早將jquery
在background.js
以前引入 ,
如 :
"background": { "scripts": [jquery-3.4.1.min.js", "background.js"], "persistent": true },
3.每一個運行環境都有本身的devTools
,好比popup
界面須要調出開發者工具須要對着插件的icon
點擊右鍵,而後點擊審查彈出內容
,須要調出background
須要在chrome://extensions/
找到插件,若是background.js
配置成功的話 會有一個背景頁
的連接,點擊就會調出開發者工具
4.官方說在background
寫定時任務須要使用到alarm
可是實際上settimeout
和setintervel
也是能夠的(另外若是防止chrome
殺掉後臺程序,須要設置manifest.json
中的persistent = true
)
5.在background 程序中能夠發器ajax請求,可是須要api所在服務器支持跨域設置
6.html
中的inline javascript
不會被執行
https://github.com/spademan/g...
但願能給個小星星