網站js注入實現自動輸入賬號密碼

網站js注入實現自動輸入賬號密碼

詳細的插件參數配置參考地址：

https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

chrome插件高級篇：https://www.cnblogs.com/zlp520/p/14316470.html

一.需求：

 今天在登錄xx網站時，發現老是要輸入賬號密碼，很累，於是找了下強大的度娘請教一番，度娘給我傳授了如下知識。我分享給大家。

--------------多動手，多動腦，多找度娘。

二.項目結構：

三.制作chrome插件：

1.配置manifest.json文件：

manifest_version：manifest文件內容格式的版本，目前版本為2，本次介紹的格式都是基於該版本的. 

version：該瀏覽器插件的版本。 

name：該瀏覽器插件的名稱。

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

browser_action：瀏覽器插件的工具欄圖標。

permissions：瀏覽器插件需要的權限，支持正則匹配。google對於安全性是相當重視，該配置也是重要的環節！

background：瀏覽器插件后端程序，大部分瀏覽器插件api，以及https網站都需要后端程序來完成。如：獲取瀏覽器插件的版本號。

content_scripts：頁面注入配置。例如：向域名為xx的注入一串輸出hello world的腳本，就需要該配置，同時也需要配置擁有該域名xx的權限。

{
    "manifest_version": 2,
    "version": "1.0.0",
    "name": "baidu",
    "description": "百度插件",
    "browser_action": {},
    "permissions": ["*://www.baidu.com/"],
    "background": {},
    "content_scripts": [{
        "matches": ["*://www.baidu.com/"],
        "js": ["index.js"],
        "run_at": "document_end",
        "all_frames": true
    }]
}

 

2.審查元素：

審查元素，找到文本框的id

 

3.編寫js腳本：

index.js中編寫腳本：

document.getElementById("kw").value = "插入執行一段js腳本";　

4.編寫css樣式：

index.css中編寫樣式：

#kw{
color:red;
}

四.安裝插件：

方式一：如下圖

方式二：直接將制作好的插件包，拖入此處

五.實現后的效果圖：

打開百度看看效果，打開百度后，文本框會自動輸入腳本中寫的內容：

六.常見錯誤：

1.未匹配到：

檢查如下的地址，尤其是尾部的“/”(你需要打開的網址尾部是否有“/”)，根據地址進行調整。