利用Google Chrome開發外掛程式，在網頁中植入js代碼

標籤：des   style   blog   http   java   color   使用   檔案   

Google Chrome是一個很強大的瀏覽器，提供了各種各樣的外掛程式，大大提升了使用了的效率，比如vimium、honx等。

Google在提供這些外掛程式的同時還允許使用者開發自己的外掛程式。

最近在寫js的指令碼採集程式，需要測試在網頁中的運行情況，因此可以利用Chrome外掛程式進行測試。

 

1.首先第一步是建立一個檔案夾，並建立一個manifest.json檔案，內容如下

{  "manifest_version": 2,  "name": "Js implants",  "description": "在網頁中植入寫好的js",  "version": "1.0",  "icons": {    "128" : "icon.png"  },  "permissions": [    "tabs", "http://*/*","https://*/*"  ],  "content_scripts": [    {"js":["maidian.js"],"matches":["http://www.baidu.com/"]}  ]}

欄位解釋：

manifes_version聲明是我們使用的版本。

name和description分別代表我們外掛程式的名稱和描述，version則是外掛程式本身的版本號碼，這些是用來向使用者展示所安裝的外掛程式的相關資訊。

icons指外掛程式顯示在的表徵圖。

permissions是外掛程式使用的許可權，tabs允許使用chrome.tabs和chrome.windows的api，後面則是匹配模式，指可以和該模式的網站啟動並執行代碼進行互動。

Content scripts是在Web頁面內啟動並執行javascript指令碼。通過使用標準的DOM，它們可以擷取瀏覽器所訪問頁面的詳細資料，並可以修改這些資訊。其中js指的是要注入的指令碼，marches定義了在哪些頁面注入Content scripts。

 

2.然後要定義好在manifest.json中聲明的資源檔，如上包括了icon.png和maidian.js，然後把檔案放在manifest.json的同級目錄下。

3.接著需要做的事就是載入我們自訂的外掛程式了，開啟chrome的拓展程式面板，選擇“載入正在開發的拓展程式”，選擇我們上述建立的檔案夾，然後就可以看到我們自己的已經運行在chrome中了。

4.看看外掛程式的運行情況。

可以看到我的js指令碼已經作用在百度首頁，並成功擷取到了我們需要的資料。

 

官方教程及api：https://developer.chrome.com/extensions/getstarted