chrome瀏覽器擴展應用開發之旅（一）

01-28

在接下來的一段時間內，我會在知乎專欄內陸續分享關於chrome插件的開發以及其他關於前端好玩有趣的東西。希望大家持續關注。

今天的主題是教大家開發一個簡單的chrome瀏覽器插件。

什麼是chrome瀏覽器插件？

chrome瀏覽器插件說白了就是一個用html、javascript、css組成的一個webapp；相比於通常的app，chrome插件除了普通js的功能外，還可以調用瀏覽器層面的api，包括書籤、歷史記錄等。

詳細了解去google開發者官網：https://developer.chrome.com/extensions/getstarted

go！開發

老規矩，先給大家看一下最簡單項目的目錄結構

簡單介紹一下：

html：存放html頁面
image：存放插件圖標
script：存放js文件
maniifest.json：一些關於插件的元數據，作為chrome入口文件

關於manifest更詳細的信息，可以訪問 Manifest File Format documentation.

下面我把構成最簡單chrome插件的最簡單代碼貼上來：

demo01.html

<!DOCTYPE html>n<html lang="en">n<head>n <meta charset="UTF-8">n <title>測試</title>n</head>n<body>n <h2>go</h2>n</body>n</html>n

demo01.js

(function(){n console.log(插件已經運行！);n})();n

maniifest.json

{n "name": "go",n "version": "0.0.1",n "manifest_version": 2,n // 描述n "description": "my first chrome plug",nn // 瀏覽器actionn "browser_action": {n "default_icon": "image/icon.png",n "default_popup": "html/demo01.html"n },nn // 腳本引入n "content_scripts": [n {n "js": ["script/demo01.js"],n // 匹配規則，在什麼情況下使用該腳本n "matches": [n "http://*/*",n "https://*/*"n ],n // 什麼情況下運行【文檔載入開始】n "run_at": "document_start"n }n ],n // 應用協議頁面n "permissions": [n "http://*/*",n "https://*/*"n ]n}n

我們這個插件最後的效果就是，點擊插件之後會顯示一個h2的「go」文字框，js裡面那段立即執行函數會在控制台列印出「插件已經運行！」，最後的maniifest.json也已經寫好注釋，基本上都是見名知意。

go！安裝運行

現在基本上已經大功告成了，一個最簡單的chrome插件就已經完成了，是真的很簡單吧。

現在把我們的第一個插件安裝一下，在chrome瀏覽器中輸入chrome://extensions，這時候會進入chrome擴展插件頁面，如下：

在安裝之前需要勾選上開發者模式，然後點擊左上角"載入已解壓的擴展程序"，選擇項目的根目錄，我的根目錄是chrome插件，所以直接選擇該目錄，chrome就可以根據maniifest.json的元數據對你的插件進行初始化了。

當然你也可以把剛剛我們做的項目打包，我們暫時不討論這個問題。

好了，到目前為止，我們的插件已經可以正常工作了，來看看效果吧！

是不是，我們的的go已經顯示出來啦！說明demo01.html已經正常工作了，那麼我們再測試一下demo01.js能不能正常工作，我們隨便打開一個網頁，Windows下F12打開控制台，可以看到我們列印的文字已經成功顯示出來了。

第一篇之結束語

相信不少同學在看完了我們開發之旅的第一篇文章之後，對chrome插件開發已經不陌生了，甚至已經覺得很簡單了，那麼請呵呵的笑一下，因為他確實簡單，也確實不簡單。插件這個東西難點不在技術，而在好的創意，插件是工具，工具就是用來解決問題的。

如果你跟著我的文章把目錄和文件都建好了，根據流程一步一步的做下去，那麼你的第一個插件也應該可以成功運行了，當然如果中間還有一些小的問題，我會根據文後評論區同學們的意見在第二篇的時候給大家詳細解答，並且下一篇文章chrom瀏覽器插件開發之旅（二）會給大家更深一點的介紹chrome插件。

後面的幾節課程會陸續開發幾個新奇有意思的chrome插件，大家拭目以待吧！