chrome做爲目前最流行的瀏覽器,備受前端推崇,緣由除了其對於前端標準的支持這一大核心緣由以外,還有就是其強大的擴展性。
基於其開發規範實現的插件現在已經很是龐大,在國內也是欣欣向榮,如天貓開發了大量的擴展,用於檢測頁面質量以及頁面性能,淘寶開發了許多的擴展以供運營工具的優化等等。其強大性不言而喻。javascript
這裏咱們來說一下其插件開發css
與chrome應用相似,chrome擴展主要是用於擴充chrome瀏覽器的功能。他體現爲一些文件的集合,包括前端文件(html/css/js),配置文件manifest.json。
主要採用JavaScript語言進行編寫。html
個別擴展可能會用到DLL和so動態庫,不過出於安全以及職責分離的考慮,在後續的標準中,將會被捨棄,這裏再也不贅述前端
chrome擴展能作的事情:html5
這裏須要着重提一下,前端開發者喜歡的DevTools工具,在這裏也能進行自定義java
chrome擴展的限制:web
環境限制:基本上功能性操做都須要經過chrome提供的API來完成,這跟實際的頁面js又有一些差別,看上去並無那麼的徹底自由。chrome
如chrome擴展的頁面腳本,能夠獲取並操做頁面dom,可是,出於安全性的考慮,頁面腳本的域是獨立區分開來的,即js成員變量不共享。json
即:插入到用戶頁面的js腳本可執行,可是與原始腳本不一樣執行域,互相不會影響。跨域
content_script不能使用除了chrome.extension以外的chrome.*的接口,不能訪問它所在擴展中定義的函數和變量,不能訪問web頁面或其它content script中定義的函數和變量,不能作cross-site XMLHttpRequests
chrome擴展,其功能受限於chrome的API,好比說文件系統,必須經過chrome的fileSystem接口,而這些接口僅僅只是對html5已有的文件系統接口的擴展,它容許Chrome應用讀寫硬盤中用戶選擇的任意位置,而HTML5自己提供的文件系統接口則只能在沙箱中讀寫文件,並不能獲取用戶磁盤中真正的目錄。
下面以一個簡單的例子來簡述一下咱們開發擴展過程當中會遇到哪些問題
這個栗子主要用於去自定義用戶頁面的樣式(好比此處爲改滾動條樣式),插入一個自定義的腳本到用戶頁面中執行(此處爲輸出一些簡單信息)
./
├─ manifest.json //擴展的配置項
├─ Custom.js //自定義js腳本
├─ Custom.css //自定義css樣式
├─ icon.png //擴展程序的icon
└─ popup.html //擴展的展現彈窗複製代碼
自定義js腳本:瀏覽器中執行,但並不是真正意義上的「插入」,與原來頁面的js域隔離開
例如,custom.js中的window跟頁面js中的window不是同一個對象,變量也沒法共享。
console.log('執行init');
console.log(document.title);
console.log(document.getElementById("abc"));
// 實例函數,能夠供popup.html中調用
function helloWorld(name){
console.log(`${name} say 'hello world!'`);
alert(`${name} say 'hello world!'`);
}
//...複製代碼
這樣的腳本路徑將以 chrome://extensions/擴展的id串碼/path/to/you/js/xxx.js出如今控制檯調試時候。
/* 重置滾動條 */
::-webkit-scrollbar {width:4px!important;height:7px;}
::-webkit-scrollbar-button {display:none;}
::-webkit-scrollbar-thumb {border-radius:3px;background: #45A5DB;}
::-webkit-scrollbar-track {width:4px;height:7px;background:transparent;}
::-webkit-scrollbar-track-piece {background:transparent;}
/* ... */複製代碼
<!doctype html>
<html>
<head>
<title>hello world</title>
</head>
<body>
<h2>hello world</h2>
<p><button onclick="dealClick('王小明')">按鈕</button></p>
<script> function dealClick(name){ //這裏值得注意,大部分功能性操做,好比執行腳本,執行函數,都是不能夠直接執行,而須要經過chrome.*這樣方式進行 chrome.tabs.executeScript( null, { code: `helloWorld('${name}')` // 這裏調用的是上面的custom.js重定義好的function } ); } </script>
</body>
</html>複製代碼
{
"name": "擴展名稱",
"version": "1.0.0",
"manifest_version": 2,
"description": "擴展描述",
"icons" : { // 擴展的icon
"16" : "icon.png",
"48" : "icon.png",
"128" : "icon.png"
},
"browser_action": { // browser_action表示程序圖標會出如今地址欄右側,若要出如今地址欄,則寫成page_action
"default_title": "日報工具",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [ //content_scripts是在Web頁面內運行的javascript腳本。
//經過使用標準的DOM,它們能夠獲取瀏覽器所訪問頁面的詳細信息,並能夠修改這些信息。
{ //這裏的值是數組,能夠針對多個站點進行不一樣的操做配置
"matches": [
"http://www.google.com/*"
],
"css": [
"custom.css"
],
"js": [
"custom.js"
],
"all_frames": true,
"run_at": "document_idle"
}
],
"permissions": [ //一些權限的配置,
"cookies", //好比cookie權限,好比系統通知權限,相似於notify這樣的東西,在window系統上未右下角的小氣泡
"notifications"
]
}複製代碼
page_action,browser_action類型的擴展對應位置
打包擴展程序
按鈕到這步插件其實已經差很少了,固然,這裏的功能都比較簡單,你能夠本身嘗試一些更高級的功能
因爲本身DIY的擴展是沒有發佈到web app store的,因此下次打開瀏覽器時會被禁掉,解決方法見第二篇文章《chrome插件開發簡介(二)——如何添「加瀏覽器擴展白名單」》