Chrome瀏覽器插件開發－淘寶自動登錄
- 瀏覽器插件的介紹
- 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瀏覽器插件開發－關於
Chrome瀏覽器插件開發－淘寶自動登錄