製做一個簡單的chrome插件

開始

既然是簡單的插件，那麼咱們就只要一些必須有的。
首先建立一個文件夾,個人文件夾叫作ChromeExtensions，而後在文件夾中創建兩個文件，分別是manifest.json和index.js，注意：manifest的文件名不能改，可是index隨便看你本身喜歡。項目文件目錄如圖

而後就是開始編輯了。
接下來部分實現的是把百度的全部網頁的背景變爲黑色
接下來就是輸入代碼了
在manifest文件中輸入如下代碼

{ 
    "name": "Handsome Wu's first extension",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [
        {  "matches": ["<all_urls>"], "js": ["index.js"] }
    ]
}

前三行是必須有的，具體什麼意思想必會點英語都能懂，能夠看成是默認要求的寫
解釋一下"content_scripts"這一塊的意思：
使用"content_scripts"你能夠修改你當前訪問的頁面的dom，主要是靠js實現的，裏面的"matches"是一個數組，裏面裝的是一些匹配的規則，意思就是當你的頁面的地址知足數組裏面的值的時候就會操做js文件，若是你只想要某個網頁實現效果而不是整個百度都實現時，那你就把all_urls改爲你想要的網址就好了。而"js"裏面的是具體的操做，具體操做就是要本身寫了。

index.js文件裏面代碼就一行

document.body.style.background = "#000";
/* *document是獲取的是網頁的文檔 *body獲取的是網頁文檔中body部分 *style是樣式屬性 *background是背景屬性 *#000是黑色 *灰色部分是註釋你能夠不要輸入進去 */

而後你就完成了全部輸入工做。nice~
最後的工做就是加入把這個腳本放入到chrome瀏覽器中，操做如圖

1

2

而後就能夠用了，效果如圖

另外再寫一點js的其餘效果，要實現的話本身到js文件裏面去添加就行

//能夠實現每次打開新頁面時在瀏覽器輸出一句話
alert('在這輸入你想顯示的話') 

/**************************************************/

//實現輸出該頁面有多少張圖片
var imgs = document.querySelectorAll('img');  
alert(imgs.length);
//ps：這個方法若是遇到頁面裏面不少圖片可能要加載好久才能出來

附言

作一個chrome插件運用到的有html，css，JavaScript，以及json這幾種語言，固然，不會也不要緊，若是不是須要實現一些牛逼的功能，那就不過是依葫蘆畫瓢罷了。
當你們真的認真去看文章的時候其實會發現作一個插件其實真的不難，就像是給我點個贊和關注那麼簡單嘿嘿