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

大家都知道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！

點擊確定后

轉自：http://www.tuicool.com/articles/7ZrEvi