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

瀏覽器插件的介紹

Chrome瀏覽器插件開(kāi)發(fā)的準(zhǔn)備工作

manifest.json配置介紹

頁(yè)面如何注入scripts文件

一、?瀏覽器插件的介紹

　　瀏覽器插件是一種遵循一定規(guī)范的應(yīng)用程序接口編寫(xiě)出來(lái)的，是對(duì)其進(jìn)行起一個(gè)補(bǔ)充作用的程序，如播放Flash文件，瀏覽器本身是沒(méi)有這個(gè)功能的，所以要通過(guò)插件來(lái)達(dá)到播放的功能。

常用的瀏覽器插件有：

Flash插件、RealPlayer插件、ActiveX插件、雅虎插件，百度，QQ，?搜狗，新浪，360網(wǎng)購(gòu)，搶票工具等。

?

二、Chrome瀏覽器插件開(kāi)發(fā)的準(zhǔn)備工作

?本文主要以google chrome瀏覽器作為教程，其他瀏覽器可以通過(guò)本次案例進(jìn)行舉一反三。

?Google?chrome瀏覽器開(kāi)發(fā)教程為英語(yǔ)，又加上中國(guó)大陸無(wú)法訪問(wèn)google?chrome瀏覽器開(kāi)發(fā)網(wǎng)站，讓開(kāi)發(fā)者帶來(lái)一定的阻礙。

?其實(shí)開(kāi)發(fā)插件非常簡(jiǎn)單，只要你具備javascript、html和css的知識(shí)，編寫(xiě)插件事半功倍。

?

開(kāi)發(fā)工具：

　　瀏覽器：google?chrome瀏覽器

　　IDE：sublime text、notepad＋＋、記事本、phpstorm等任一編輯器即可

?

文件結(jié)構(gòu)：

?????????simple01

???????????????｜－－?manifest.json??工程配置文件，主要文件。

???????????????｜－－xxx.js????????執(zhí)行腳本

??????????????? |??－－xxx.css????樣式文件

??????????????? |?－－?xxx.png???圖片文件

?

測(cè)試環(huán)境：?

?

打包發(fā)布插件：

?

?

?

發(fā)布升級(jí)版本：

?

?

三、manifest.json配置介紹

Manifest工程配置文件：manifest.json，最基礎(chǔ)的文件，也是最重要的文件。

從后綴可以看出它是JSON格式的文件，JSON格式的介紹：

JSON (JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。它基于ECMAScript的一個(gè)子集。 JSON采用完全獨(dú)立于語(yǔ)言的文本格式，但是也使用了類(lèi)似于C語(yǔ)言家族的習(xí)慣（包括C、C++、C#、Java、JavaScript、Perl、Python等）。這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言。 易于人閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成(一般用于提升網(wǎng)絡(luò)傳輸速率)。

［來(lái)自百度百科］

?

案例如下：

?

?

?

manifest_version

manifest文件內(nèi)容格式的版本，目前版本為2，本次介紹的格式都是基于該版本的.

?

version

該瀏覽器插件的版本。

?

name

該瀏覽器插件的名稱(chēng)。

?

description

該瀏覽器插件的描述信息。

?

browser_action

瀏覽器插件的工具欄圖標(biāo)。

?

permissions

瀏覽器插件需要的權(quán)限，支持正則匹配。google對(duì)于安全性是相當(dāng)重視，該配置也是重要的環(huán)節(jié)！

?

background

瀏覽器插件后端程序，大部分瀏覽器插件api，以及https網(wǎng)站都需要后端程序來(lái)完成。如：獲取瀏覽器插件的版本號(hào)。

?

content_scripts

頁(yè)面注入配置。例如：向域名為xx的注入一串輸出hello?world的腳本，就需要該配置，同時(shí)也需要配置擁有該域名xx的權(quán)限。

?

?

四、頁(yè)面如何注入scripts文件

了解如何注入scripts文件，我們先通過(guò)一個(gè)實(shí)例來(lái)了解。

本次案例是如何在淘寶登錄頁(yè)面上自動(dòng)輸入用戶(hù)名和密碼。

?

?

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: 需要注入的腳本頁(yè)面的URL，支持正則表達(dá)式。

　　　　js: 注入的腳本文件，相對(duì)路徑。

　　　　run_at: 注入的位置，document_start文檔的開(kāi)始，document_idel文檔的中間 , document_end文檔的末尾。

　　　　all_frames: 是否全frame注入，比如頁(yè)面使用了iframe或者frame。

?

3.編寫(xiě)taobao_login.js

　　　語(yǔ)法為javascript，當(dāng)然你也可以引入jquery。引入的配置為：

? ? ?

　　本次案例為純javascript，先查看淘寶的登錄頁(yè)面。

?

? ? ?通過(guò)頁(yè)面DOM樹(shù)的查看，我們得知用戶(hù)名和密碼輸入的Dom標(biāo)識(shí)。

?相應(yīng)的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(){//檢測(cè)是否需要安全驗(yàn)證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": "淘寶自動(dòng)登錄助手","description": "淘寶自動(dòng)登錄助手","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}] }

案例結(jié)束！！

總結(jié)

以上是生活随笔為你收集整理的Chrome浏览器插件开发－淘宝自动登录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。