chrome擴充程式開發之在目標頁面運行自己的JS

標籤：pre   rmi   提升   scripts   哪些   頁面   網站   arc   入門介紹   

大家都知道JS是運行在用戶端的，所以，如果我們自己寫一個瀏覽器的話，是一定可以往下載下來的網頁原始碼中加入js的。可惜我們沒有這個能力。不過幸運的是，chrome的擴充程式可以幫我們做到這件事。

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

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

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

本文會做一個chrome外掛程式開發的入門介紹，實現利用chrome擴充實現在目標網頁運行我們的js的功能。關於chrome擴充的詳細內容，可以通過官網瞭解。

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

{  "name": "第一個Chrome外掛程式",  "manifest_version": 2,  "version": "1.0",  "description": "我的第一個Chrome外掛程式，還不錯吧",  "browser_action": {    "default_icon": "1.png"  },  "content_scripts": [    {      "matches": ["http://chenyu.mydearest.cn/"],      "js": ["test.js"]    }  ]}

     

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

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

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

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

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

      2.1.png的話，隨便拖一張圖片進來就OK啦。另外需要注意的是，該文字檔需要用UTF8字元集儲存。

      3.建立js檔案test.js

alert("HelloWorld");document.body.style.backgroundColor="gray";

content_scripts是運行在開啟頁面的指令碼，可以拿到整個頁面的DOM對象，所以可以利用該指令碼對頁面進行操作。

      4.開啟chrome，開啟菜單，找到擴充程式選項我的在扳手->工具->擴充程式 路徑下。點擊載入正在開發的擴充程式，添加檔案夾就OK啦！

chrome擴充程式開發之在目標頁面運行自己的JS