http://www.cnblogs.com/oshine/p/5379349.html

瀏覽器插件的介紹

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浏览器插件开发－淘宝自动登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。