開始
既然是簡單的插件，那么我們就只要一些必須有的，
首先創建一個檔案夾,我的檔案夾叫做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這幾種語言，當然，不會也沒關系，如果不是需要實作一些牛逼的功能，那就不過是依葫蘆畫瓢罷了，
當大家真的認真去看文章的時候其實會發現做一個插件其實真的不難，就像是給我點個贊和關注那么簡單嘿嘿
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/193472.html
標籤：python
上一篇：css簡單練習1