1. 程式人生 > >跟我一起寫一個chrome擴展程序

跟我一起寫一個chrome擴展程序

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擴展程序