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

標籤：chrome外掛程式   helloworld   g-wzj   

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

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

開發工具很簡單，記事本就OK了，當然還要有一個chrome瀏覽器。

建立一個檔案夾，比如，HelloWorld

然後建立一個文字檔，作為這個擴充程式的設定檔，所以檔案名稱是manifest.json，注意副檔名是json，然後輸入如下內容。

{  "name": "第一個Chrome外掛程式",  "manifest_version": 2,  "version": "1.0",  "description": "我的第一個Chrome外掛程式，還不錯吧",  "browser_action": {    "default_icon": "1.png"  }}

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

你的第一個chrome擴充就完成了。

什嗎？完成了？這麼快？

確實是，開啟chrome，開啟菜單，找到擴充程式選項我的在扳手->工具->擴充程式 路徑下。

點擊載入正在開發的擴充程式

可以看到，你的1.png已經作為表徵圖被放在地址欄旁邊了。只不過現在毫無功能。

現在讓我們把helloworld添加進去。在manifest檔案裡添加幾行這樣的代碼。

"content_scripts": [    {      "matches": ["http://www.aaaaa.com/*"],      "js": ["myscript.js"]    }  ]

注意跟之前的代碼用逗號分割開。

可以看到我們新增了一個內容，就是content_scripts，詳細的介紹應該去看官方文檔，我在這裡簡要介紹下，content_scripts是運行在開啟頁面的指令碼，可以拿到整個頁面的DOM對象，所以可以利用該指令碼對頁面進行操作。

建立一個js檔案myscript.js，裡邊代碼很簡單。

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

在擴充程式頁面重新載入外掛程式，就可以去看效果了。

當我開啟百度的時候，Oh，my god！

點擊確定後

醜爆了有木有，但確實變灰了。另外百度，咱就不能換個背景透明的png做logo嗎？