- 瀏覽器插件的介紹
- Chrome瀏覽器插件開發的准備工作
- manifest.json配置介紹
- 頁面如何注入scripts文件
一、 瀏覽器插件的介紹
瀏覽器插件是一種遵循一定規范的應用程序接口編寫出來的，是對其進行起一個補充作用的程序，如播放Flash文件，瀏覽器本身是沒有這個功能的，所以要通過插件來達到播放的功能。
常用的瀏覽器插件有：
Flash插件、RealPlayer插件、ActiveX插件、雅虎插件，百度，QQ， 搜狗，新浪，360網購，搶票工具等。
二、Chrome瀏覽器插件開發的准備工作
本文主要以google chrome瀏覽器作為教程，其他瀏覽器可以通過本次案例進行舉一反三。
Google chrome瀏覽器開發教程為英語，又加上中國大陸無法訪問google chrome瀏覽器開發網站，讓開發者帶來一定的阻礙。
其實開發插件非常簡單，只要你具備javascript、html和css的知識，編寫插件事半功倍。
開發工具：
瀏覽器：google chrome瀏覽器
IDE：sublime text、notepad＋＋、記事本、phpstorm等任一編輯器即可
文件結構：
simple01
｜－－ manifest.json 工程配置文件，主要文件。
｜－－xxx.js 執行腳本
| －－xxx.css 樣式文件
| －－ xxx.png 圖片文件
測試環境：
打包發布插件：
發布升級版本：
三、manifest.json配置介紹
Manifest工程配置文件：manifest.json，最基礎的文件，也是最重要的文件。
從后綴可以看出它是JSON格式的文件，JSON格式的介紹：
JSON (JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於ECMAScript的一個子集。
JSON采用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。
這些特性使JSON成為理想的數據交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成(一般用於提升網絡傳輸速率)。
［來自百度百科］
案例如下：
manifest_version
manifest文件內容格式的版本，目前版本為2，本次介紹的格式都是基於該版本的.
version
該瀏覽器插件的版本。
name
該瀏覽器插件的名稱。
description
該瀏覽器插件的描述信息。
browser_action
瀏覽器插件的工具欄圖標。
permissions
瀏覽器插件需要的權限，支持正則匹配。google對於安全性是相當重視，該配置也是重要的環節！
background
瀏覽器插件后端程序，大部分瀏覽器插件api，以及https網站都需要后端程序來完成。如：獲取瀏覽器插件的版本號。
content_scripts
頁面注入配置。例如：向域名為xx的注入一串輸出hello world的腳本，就需要該配置，同時也需要配置擁有該域名xx的權限。
四、頁面如何注入scripts文件
了解如何注入scripts文件，我們先通過一個實例來了解。
本次案例是如何在淘寶登錄頁面上自動輸入用戶名和密碼。
1.manifest.json permissions配置
"permissions":[ "https://login.taobao.com/*" ]
＊正則匹配符
2.manifest.json content_scripts配置
"content_scripts":[ { "matches":["https://login.taobao.com/*"], "js":["taobao_login.js"], "run_at":"document_end", "all_frames":true } ]
matches: 需要注入的腳本頁面的URL，支持正則表達式。
js: 注入的腳本文件，相對路徑。
run_at: 注入的位置，document_start文檔的開始，document_idel文檔的中間 , document_end文檔的末尾。
all_frames: 是否全frame注入，比如頁面使用了iframe或者frame。
3.編寫taobao_login.js
語法為javascript，當然你也可以引入jquery。引入的配置為：
本次案例為純javascript，先查看淘寶的登錄頁面。
通過頁面DOM樹的查看，我們得知用戶名和密碼輸入的Dom標識。
相應的taobao_login.js代碼為：
setTimeout(function(){ var username = document.getElementById('TPL_username_1'); username.focus(); username.value = "oShine"; var password = document.getElementById('TPL_password_1'); password.focus(); password.value = "oShine"; var submitStatic = document.getElementById("J_SubmitStatic"); submitStatic.focus(); setTimeout(function(){ //檢測是否需要安全驗證 var noCaptcha = document.getElementById("nocaptcha"); if(noCaptcha && noCaptcha.className == "nc-container tb-login" && noCaptcha.style.display !="block") { var submitStatic = document.getElementById("J_SubmitStatic"); if(submitStatic) submitStatic.click(); } },2000); },3000);
manifest.json:
{ "manifest_version": 2, "version": "1.0.1", "name": "淘寶自動登錄助手", "description": "淘寶自動登錄助手", "browser_action": { }, "permissions": [ "https://login.taobao.com/*" ], "background": { }, "content_scripts": [ { "matches": ["https://login.taobao.com/*"], "js": ["taobao_login.js"], "run_at": "document_end", "all_frames": true } ] }
案例結束！！
Chrome Extension Developer QQ群： 15785475
下一章節、Chrome瀏覽器插件開發－關於