跟我一起寫一個chrome擴展程序
阿新 • • 發佈:2019-01-12
user for mpat 之前 small 接下來 desc 我們 div
在我沒有看這本書之前,我都想象不到,原來chrome擴展程序可以這樣寫,真的非常有意思。
就是用最簡單最基礎的代碼,然後就實現了一些非常有意思的玩意兒。
先看效果圖
這個就是一個很簡單的例子,當我們輸入facebook網站,就會彈出一個彈框,然後我們輸入名字,這個網站就會被我們輸入的名字所代替。
這個網站換成隨便什麽網站都是可以的。接下來我們來實現這個small擴展程序吧。
新建文件夾寫入如下文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>for devTools</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script src="./kittenbook.js"></script> </body> </html>
var userName=prompt('Hello,what\syour name');
document.body.innerHTML='hello'+userName+'!';
{ "manifest_version":2, "name":"kittenbook", "description":"replace photos on facebook with kittens", "version":"0.0.1", "content_scripts":[ { "matches":["*://www.facebook.com/*"], "js":["kittenbook.js"] } ] }
接下來將我們的小demo變成chrome擴展程序吧
這個非常有意思的小demo是我從learning to program 一路編程這本書上看到的。
其實用一些很簡單的代碼就可以實現一些很有意思的玩意兒。
跟我一起寫一個chrome擴展程序