1. 瀏覽器外掛的介紹
2. Chrome瀏覽器外掛開發的準備工作
3. manifest.json配置介紹
4. 頁面如何注入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