Chrome瀏覽器插件開發－淘寶自動登陸

時間 2019-11-08

標籤 chrome 瀏覽器插件開發淘寶自動登陸欄目 Chrome 简体版

原文原文鏈接

瀏覽器插件的介紹
Chrome瀏覽器插件開發的準備工做
manifest.json配置介紹
頁面如何注入scripts文件

1、瀏覽器插件的介紹

　　瀏覽器插件是一種遵循必定規範的應用程序接口編寫出來的，是對其進行起一個補充做用的程序，如播放Flash文件，瀏覽器自己是沒有這個功能的，因此要經過插件來達到播放的功能。javascript

經常使用的瀏覽器插件有：php

Flash插件、RealPlayer插件、ActiveX插件、雅虎插件，百度，QQ，搜狗，新浪，360網購，搶票工具等。css

2、Chrome瀏覽器插件開發的準備工做

本文主要以google chrome瀏覽器做爲教程，其餘瀏覽器能夠經過本次案例進行觸類旁通。html

Google chrome瀏覽器開發教程爲英語，又加上中國大陸沒法訪問google chrome瀏覽器開發網站，讓開發者帶來必定的阻礙。java

其實開發插件很是簡單，只要你具有javascript、html和css的知識，編寫插件事半功倍。jquery

開發工具：正則表達式

　　瀏覽器：google chrome瀏覽器chrome

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

文件結構：後端

simple01

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

｜－－xxx.js 執行腳本

| －－xxx.css 樣式文件

| －－ xxx.png 圖片文件

測試環境：

打包發佈插件：

發佈升級版本：

3、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的權限。

4、頁面如何注入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
    }
  ]
}