chrome插件 DIY

1 前言

對於一個web前端開發者,chrome瀏覽器是一個工作,學習和生活的必備工具。除了chrome本身的基本能力(控制檯等)外,能大幅提高這個神器的使用體驗的是,可擴展能力(插件)以及豐富的插件生態。

每個人根據使用習慣會有自己的一套插件配置(鼠標手勢、代理配置等等),這些插件包括具體的插件的配置信息,甚至可以和你的google賬號綁定,當你換一臺電腦,只要使用相同的google賬號登錄chrome,就會享受到一致的使用體驗。

當你打開chrome的“擴展程序”界面,看著琳琅滿目的插件,有沒有想過親自動手,打造一個自己的插件呢?當然,這種想法不應該是閒著某個部位疼,刻意的去開發一個連自己都不會實際使用的插件。而應該是發現現在的插件庫裡,沒有一個能解決自已在使用chrome過程中某個痛點的插件。

好,假設現在你在chrome的使用上想要一個擴展功能,但用各種關鍵字在各種可能找到答案的地方都搜索了,仍然沒有看到想要的插件。這個時候,就可以考慮自己開發了。如果剛好你是一個web前端開發者,那麼恭喜你,幾乎沒有門檻(只要有能看懂chrome extentions API文檔就行),因為所有用到的技術都是你所熟悉的: json配置, js邏輯, css+html展示。

2 初步探索

chrome extension的官方文檔上,有著簡單的demo指引,全面的API文檔,以及對於各種API的豐富例子。對於初次開發chrome插件的人來說,建議先看入門指引小demo,篇幅很小,很快可以看完。看完之後對chrome插件的基本配置和文件結構會有一個大致的認識,同時也學會了如何在chrome上加載自己在本地開發的插件。

chrome extention支持的擴展點以及擴展功能很多,對於初學者不可能一下子看完官方所有文檔再去動手。而應該是先根據自己用過的插件,腦海中有個大致的印象:插件可以在哪些地方起到效果。chrome插件最常見的功能莫過到url欄右側的那些小圖標了,就是這些:

1 前言

對於一個web前端開發者,chrome瀏覽器是一個工作,學習和生活的必備工具。除了chrome本身的基本能力(控制檯等)外,能大幅提高這個神器的使用體驗的是,可擴展能力(插件)以及豐富的插件生態。

每個人根據使用習慣會有自己的一套插件配置(鼠標手勢、代理配置等等),這些插件包括具體的插件的配置信息,甚至可以和你的google賬號綁定,當你換一臺電腦,只要使用相同的google賬號登錄chrome,就會享受到一致的使用體驗。

當你打開chrome的“擴展程序”界面,看著琳琅滿目的插件,有沒有想過親自動手,打造一個自己的插件呢?當然,這種想法不應該是閒著某個部位疼,刻意的去開發一個連自己都不會實際使用的插件。而應該是發現現在的插件庫裡,沒有一個能解決自已在使用chrome過程中某個痛點的插件。

好,假設現在你在chrome的使用上想要一個擴展功能,但用各種關鍵字在各種可能找到答案的地方都搜索了,仍然沒有看到想要的插件。這個時候,就可以考慮自己開發了。如果剛好你是一個web前端開發者,那麼恭喜你,幾乎沒有門檻(只要有能看懂chrome extentions API文檔就行),因為所有用到的技術都是你所熟悉的: json配置, js邏輯, css+html展示。

2 初步探索

chrome extension的官方文檔上,有著簡單的demo指引,全面的API文檔,以及對於各種API的豐富例子。對於初次開發chrome插件的人來說,建議先看入門指引小demo,篇幅很小,很快可以看完。看完之後對chrome插件的基本配置和文件結構會有一個大致的認識,同時也學會了如何在chrome上加載自己在本地開發的插件。

chrome extention支持的擴展點以及擴展功能很多,對於初學者不可能一下子看完官方所有文檔再去動手。而應該是先根據自己用過的插件,腦海中有個大致的印象:插件可以在哪些地方起到效果。chrome插件最常見的功能莫過到url欄右側的那些小圖標了,就是這些:

chrome插件 DIY

如果看完上入門指引小demo後,你肯定知道了怎麼樣實現這樣一個功能。這裡就不講官方文檔裡已經講過的細節,主要講一下比較重要的配置文件 manifest.json 。官方小demo的配置文件內容如下:

{ "manifest_version": 2, // 插件標準版本,目前統一是2"name": "Getting started example", // 插件名稱,顯示在插件詳情和插件商店中"description": "This extension shows a Google Image search result for the current page", // 簡介"version": "1.0", // 插件版本,發佈到插件商店後,如果有修改插件代碼,需要修改這裡"browser_action": { // 就是url欄右側那些小圖標啊"default_icon": "icon.png", // 展示出來的圖標圖片"default_popup": "popup.html" // 點擊圖標後展示的氣泡框頁面(獨立頁面,可加載js / css)}, "permissions": [ // 插件權限設置,規則較多,建議看官方文檔"activeTab", "https://ajax.googleapis.com/"]}

插件配置文件裡配置的文件路徑,都是相對於mainfest.json的相對路徑。所以當插件邏輯並不複雜時,通常就將配置文件和插件代碼直接放在同一層目錄下。插件配置文件中,配置了該插件擴展的描述信息、擴展的功能,以及插件的訪問權限。插件功能除了browser_action配置的popup頁面外,還支持什麼功能呢?用過鼠標手勢類插件的肯定知道,插件可以訪問和修改頁面dom,因為這類插件本質就是在dom上繪製鼠標路徑。那麼在哪裡配置控制頁面dom的代碼呢?在content_scripts中:

{ "name": "My extension",... "content_scripts": [ // 這裡配置的腳本和樣式將直接按順序注入到影響的頁面中{ "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}],...}

content_scripts實際上是運行在受插件影響的頁面中,在devtool中可以看到插件注入的這些內容:

1 前言

對於一個web前端開發者,chrome瀏覽器是一個工作,學習和生活的必備工具。除了chrome本身的基本能力(控制檯等)外,能大幅提高這個神器的使用體驗的是,可擴展能力(插件)以及豐富的插件生態。

每個人根據使用習慣會有自己的一套插件配置(鼠標手勢、代理配置等等),這些插件包括具體的插件的配置信息,甚至可以和你的google賬號綁定,當你換一臺電腦,只要使用相同的google賬號登錄chrome,就會享受到一致的使用體驗。

當你打開chrome的“擴展程序”界面,看著琳琅滿目的插件,有沒有想過親自動手,打造一個自己的插件呢?當然,這種想法不應該是閒著某個部位疼,刻意的去開發一個連自己都不會實際使用的插件。而應該是發現現在的插件庫裡,沒有一個能解決自已在使用chrome過程中某個痛點的插件。

好,假設現在你在chrome的使用上想要一個擴展功能,但用各種關鍵字在各種可能找到答案的地方都搜索了,仍然沒有看到想要的插件。這個時候,就可以考慮自己開發了。如果剛好你是一個web前端開發者,那麼恭喜你,幾乎沒有門檻(只要有能看懂chrome extentions API文檔就行),因為所有用到的技術都是你所熟悉的: json配置, js邏輯, css+html展示。

2 初步探索

chrome extension的官方文檔上,有著簡單的demo指引,全面的API文檔,以及對於各種API的豐富例子。對於初次開發chrome插件的人來說,建議先看入門指引小demo,篇幅很小,很快可以看完。看完之後對chrome插件的基本配置和文件結構會有一個大致的認識,同時也學會了如何在chrome上加載自己在本地開發的插件。

chrome extention支持的擴展點以及擴展功能很多,對於初學者不可能一下子看完官方所有文檔再去動手。而應該是先根據自己用過的插件,腦海中有個大致的印象:插件可以在哪些地方起到效果。chrome插件最常見的功能莫過到url欄右側的那些小圖標了,就是這些:

chrome插件 DIY

如果看完上入門指引小demo後,你肯定知道了怎麼樣實現這樣一個功能。這裡就不講官方文檔裡已經講過的細節,主要講一下比較重要的配置文件 manifest.json 。官方小demo的配置文件內容如下:

{ "manifest_version": 2, // 插件標準版本,目前統一是2"name": "Getting started example", // 插件名稱,顯示在插件詳情和插件商店中"description": "This extension shows a Google Image search result for the current page", // 簡介"version": "1.0", // 插件版本,發佈到插件商店後,如果有修改插件代碼,需要修改這裡"browser_action": { // 就是url欄右側那些小圖標啊"default_icon": "icon.png", // 展示出來的圖標圖片"default_popup": "popup.html" // 點擊圖標後展示的氣泡框頁面(獨立頁面,可加載js / css)}, "permissions": [ // 插件權限設置,規則較多,建議看官方文檔"activeTab", "https://ajax.googleapis.com/"]}

插件配置文件裡配置的文件路徑,都是相對於mainfest.json的相對路徑。所以當插件邏輯並不複雜時,通常就將配置文件和插件代碼直接放在同一層目錄下。插件配置文件中,配置了該插件擴展的描述信息、擴展的功能,以及插件的訪問權限。插件功能除了browser_action配置的popup頁面外,還支持什麼功能呢?用過鼠標手勢類插件的肯定知道,插件可以訪問和修改頁面dom,因為這類插件本質就是在dom上繪製鼠標路徑。那麼在哪裡配置控制頁面dom的代碼呢?在content_scripts中:

{ "name": "My extension",... "content_scripts": [ // 這裡配置的腳本和樣式將直接按順序注入到影響的頁面中{ "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}],...}

content_scripts實際上是運行在受插件影響的頁面中,在devtool中可以看到插件注入的這些內容:

chrome插件 DIY

目前我們已經掌握了插件兩個功能點的配置了。如果用過evernote剪裁插件的人應該知道,插件可以改變chrome在頁面上的右鍵菜單:

1 前言

對於一個web前端開發者,chrome瀏覽器是一個工作,學習和生活的必備工具。除了chrome本身的基本能力(控制檯等)外,能大幅提高這個神器的使用體驗的是,可擴展能力(插件)以及豐富的插件生態。

每個人根據使用習慣會有自己的一套插件配置(鼠標手勢、代理配置等等),這些插件包括具體的插件的配置信息,甚至可以和你的google賬號綁定,當你換一臺電腦,只要使用相同的google賬號登錄chrome,就會享受到一致的使用體驗。

當你打開chrome的“擴展程序”界面,看著琳琅滿目的插件,有沒有想過親自動手,打造一個自己的插件呢?當然,這種想法不應該是閒著某個部位疼,刻意的去開發一個連自己都不會實際使用的插件。而應該是發現現在的插件庫裡,沒有一個能解決自已在使用chrome過程中某個痛點的插件。

好,假設現在你在chrome的使用上想要一個擴展功能,但用各種關鍵字在各種可能找到答案的地方都搜索了,仍然沒有看到想要的插件。這個時候,就可以考慮自己開發了。如果剛好你是一個web前端開發者,那麼恭喜你,幾乎沒有門檻(只要有能看懂chrome extentions API文檔就行),因為所有用到的技術都是你所熟悉的: json配置, js邏輯, css+html展示。

2 初步探索

chrome extension的官方文檔上,有著簡單的demo指引,全面的API文檔,以及對於各種API的豐富例子。對於初次開發chrome插件的人來說,建議先看入門指引小demo,篇幅很小,很快可以看完。看完之後對chrome插件的基本配置和文件結構會有一個大致的認識,同時也學會了如何在chrome上加載自己在本地開發的插件。

chrome extention支持的擴展點以及擴展功能很多,對於初學者不可能一下子看完官方所有文檔再去動手。而應該是先根據自己用過的插件,腦海中有個大致的印象:插件可以在哪些地方起到效果。chrome插件最常見的功能莫過到url欄右側的那些小圖標了,就是這些:

chrome插件 DIY

如果看完上入門指引小demo後,你肯定知道了怎麼樣實現這樣一個功能。這裡就不講官方文檔裡已經講過的細節,主要講一下比較重要的配置文件 manifest.json 。官方小demo的配置文件內容如下:

{ "manifest_version": 2, // 插件標準版本,目前統一是2"name": "Getting started example", // 插件名稱,顯示在插件詳情和插件商店中"description": "This extension shows a Google Image search result for the current page", // 簡介"version": "1.0", // 插件版本,發佈到插件商店後,如果有修改插件代碼,需要修改這裡"browser_action": { // 就是url欄右側那些小圖標啊"default_icon": "icon.png", // 展示出來的圖標圖片"default_popup": "popup.html" // 點擊圖標後展示的氣泡框頁面(獨立頁面,可加載js / css)}, "permissions": [ // 插件權限設置,規則較多,建議看官方文檔"activeTab", "https://ajax.googleapis.com/"]}

插件配置文件裡配置的文件路徑,都是相對於mainfest.json的相對路徑。所以當插件邏輯並不複雜時,通常就將配置文件和插件代碼直接放在同一層目錄下。插件配置文件中,配置了該插件擴展的描述信息、擴展的功能,以及插件的訪問權限。插件功能除了browser_action配置的popup頁面外,還支持什麼功能呢?用過鼠標手勢類插件的肯定知道,插件可以訪問和修改頁面dom,因為這類插件本質就是在dom上繪製鼠標路徑。那麼在哪裡配置控制頁面dom的代碼呢?在content_scripts中:

{ "name": "My extension",... "content_scripts": [ // 這裡配置的腳本和樣式將直接按順序注入到影響的頁面中{ "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}],...}

content_scripts實際上是運行在受插件影響的頁面中,在devtool中可以看到插件注入的這些內容:

chrome插件 DIY

目前我們已經掌握了插件兩個功能點的配置了。如果用過evernote剪裁插件的人應該知道,插件可以改變chrome在頁面上的右鍵菜單:

chrome插件 DIY

這裡在哪裡實現的呢?以上的兩個配置點無法實現,是在background項中配置的:

{ "name": "My extension",... "background": { // 在瀏覽器運行環境中運行的後臺腳本,只要開啟插件就會生效"scripts": ["background.js"]}

瞭解了上面三種擴展點的配置方法後,就可以開始開發功能豐富的插件了。

3 插件開發示例

本人開發了一個插件,通過介紹這個插件的開發流程,讓大家熟悉幾個常用的API。

初衷/痛點:平時看一些文章/博客,要處理手頭上其他事情,不得不中斷。為了下次再看,通常是保存到書籤/筆記。使用書籤/筆記的方法,有兩個弊端:一個是下次再進入時,不記得上次看到哪裡了,又得重頭開始看,或者拼命回憶上次看到哪裡;另一個是,下次根本不記得哪些是沒有看完的(除非專門建一個分類標籤)。

期望:有個插件,能夠記錄那些沒看完,但又非常想繼續看完的文章,即使關閉瀏覽器,換個瀏覽器,也能夠獲取到這些記錄,並且打開再次打開文章時,能自動跳轉到上次看到的位置。

  • 安裝:https://chrome.google.com/webstore/detail/progress-bookmark/ediaiaoabgoimfjpmegbhlhmpajmegoj

  • 源碼: https://github.com/coolriver/smartBookmark

這個插件的主要功能是:

  1. 記錄沒有看完的文章/博客(在頁面上通過右鍵菜單添加標記),保存進度(按高度百分比)。

  2. 下次從記錄(url欄右側插件功能點)中進入文章頁面時,頁面會滾動到上次標記的位置。

3.1 配置文件

這個插件用到了2節中講到了3個插件擴展點: browser_action , content_scriptsbackground。配置文件如下:

{ "manifest_version": 2, "name": "Progress Bookmark", "description": "save progress of articles that has not been read completely", "version": "1.1.5", "browser_action": { "default_icon": "icon48.png", "default_popup": "popup.html", "default_title": "Progress Bookmark", "default_badgetext": "test"}, "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png"}, "background": { "scripts": ["background.js"]}, "content_scripts": [{ "matches": [ "http://*/*", "https://*/*"], "js": [ "jquery-2.2.0.min.js", "content_script.js"], "css": ["mystyle.css"]}], "permissions": [ "contextMenus", "storage", "tabs", "http://*/*", "https://*/*"]}

上面的配置文件已經包含了大部分需要開發的文件名: popup.html, background.js, content_script.js mystyle.css。另外,各種尺寸的icon圖片,用於插件在不同地方(插件logo,pop圖標,插件商店等等)展示。目錄結構如下:

1 前言

對於一個web前端開發者,chrome瀏覽器是一個工作,學習和生活的必備工具。除了chrome本身的基本能力(控制檯等)外,能大幅提高這個神器的使用體驗的是,可擴展能力(插件)以及豐富的插件生態。

每個人根據使用習慣會有自己的一套插件配置(鼠標手勢、代理配置等等),這些插件包括具體的插件的配置信息,甚至可以和你的google賬號綁定,當你換一臺電腦,只要使用相同的google賬號登錄chrome,就會享受到一致的使用體驗。

當你打開chrome的“擴展程序”界面,看著琳琅滿目的插件,有沒有想過親自動手,打造一個自己的插件呢?當然,這種想法不應該是閒著某個部位疼,刻意的去開發一個連自己都不會實際使用的插件。而應該是發現現在的插件庫裡,沒有一個能解決自已在使用chrome過程中某個痛點的插件。

好,假設現在你在chrome的使用上想要一個擴展功能,但用各種關鍵字在各種可能找到答案的地方都搜索了,仍然沒有看到想要的插件。這個時候,就可以考慮自己開發了。如果剛好你是一個web前端開發者,那麼恭喜你,幾乎沒有門檻(只要有能看懂chrome extentions API文檔就行),因為所有用到的技術都是你所熟悉的: json配置, js邏輯, css+html展示。

2 初步探索

chrome extension的官方文檔上,有著簡單的demo指引,全面的API文檔,以及對於各種API的豐富例子。對於初次開發chrome插件的人來說,建議先看入門指引小demo,篇幅很小,很快可以看完。看完之後對chrome插件的基本配置和文件結構會有一個大致的認識,同時也學會了如何在chrome上加載自己在本地開發的插件。

chrome extention支持的擴展點以及擴展功能很多,對於初學者不可能一下子看完官方所有文檔再去動手。而應該是先根據自己用過的插件,腦海中有個大致的印象:插件可以在哪些地方起到效果。chrome插件最常見的功能莫過到url欄右側的那些小圖標了,就是這些:

chrome插件 DIY

如果看完上入門指引小demo後,你肯定知道了怎麼樣實現這樣一個功能。這裡就不講官方文檔裡已經講過的細節,主要講一下比較重要的配置文件 manifest.json 。官方小demo的配置文件內容如下:

{ "manifest_version": 2, // 插件標準版本,目前統一是2"name": "Getting started example", // 插件名稱,顯示在插件詳情和插件商店中"description": "This extension shows a Google Image search result for the current page", // 簡介"version": "1.0", // 插件版本,發佈到插件商店後,如果有修改插件代碼,需要修改這裡"browser_action": { // 就是url欄右側那些小圖標啊"default_icon": "icon.png", // 展示出來的圖標圖片"default_popup": "popup.html" // 點擊圖標後展示的氣泡框頁面(獨立頁面,可加載js / css)}, "permissions": [ // 插件權限設置,規則較多,建議看官方文檔"activeTab", "https://ajax.googleapis.com/"]}

插件配置文件裡配置的文件路徑,都是相對於mainfest.json的相對路徑。所以當插件邏輯並不複雜時,通常就將配置文件和插件代碼直接放在同一層目錄下。插件配置文件中,配置了該插件擴展的描述信息、擴展的功能,以及插件的訪問權限。插件功能除了browser_action配置的popup頁面外,還支持什麼功能呢?用過鼠標手勢類插件的肯定知道,插件可以訪問和修改頁面dom,因為這類插件本質就是在dom上繪製鼠標路徑。那麼在哪裡配置控制頁面dom的代碼呢?在content_scripts中:

{ "name": "My extension",... "content_scripts": [ // 這裡配置的腳本和樣式將直接按順序注入到影響的頁面中{ "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}],...}

content_scripts實際上是運行在受插件影響的頁面中,在devtool中可以看到插件注入的這些內容:

chrome插件 DIY

目前我們已經掌握了插件兩個功能點的配置了。如果用過evernote剪裁插件的人應該知道,插件可以改變chrome在頁面上的右鍵菜單:

chrome插件 DIY

這裡在哪裡實現的呢?以上的兩個配置點無法實現,是在background項中配置的:

{ "name": "My extension",... "background": { // 在瀏覽器運行環境中運行的後臺腳本,只要開啟插件就會生效"scripts": ["background.js"]}

瞭解了上面三種擴展點的配置方法後,就可以開始開發功能豐富的插件了。

3 插件開發示例

本人開發了一個插件,通過介紹這個插件的開發流程,讓大家熟悉幾個常用的API。

初衷/痛點:平時看一些文章/博客,要處理手頭上其他事情,不得不中斷。為了下次再看,通常是保存到書籤/筆記。使用書籤/筆記的方法,有兩個弊端:一個是下次再進入時,不記得上次看到哪裡了,又得重頭開始看,或者拼命回憶上次看到哪裡;另一個是,下次根本不記得哪些是沒有看完的(除非專門建一個分類標籤)。

期望:有個插件,能夠記錄那些沒看完,但又非常想繼續看完的文章,即使關閉瀏覽器,換個瀏覽器,也能夠獲取到這些記錄,並且打開再次打開文章時,能自動跳轉到上次看到的位置。

  • 安裝:https://chrome.google.com/webstore/detail/progress-bookmark/ediaiaoabgoimfjpmegbhlhmpajmegoj

  • 源碼: https://github.com/coolriver/smartBookmark

這個插件的主要功能是:

  1. 記錄沒有看完的文章/博客(在頁面上通過右鍵菜單添加標記),保存進度(按高度百分比)。

  2. 下次從記錄(url欄右側插件功能點)中進入文章頁面時,頁面會滾動到上次標記的位置。

3.1 配置文件

這個插件用到了2節中講到了3個插件擴展點: browser_action , content_scriptsbackground。配置文件如下:

{ "manifest_version": 2, "name": "Progress Bookmark", "description": "save progress of articles that has not been read completely", "version": "1.1.5", "browser_action": { "default_icon": "icon48.png", "default_popup": "popup.html", "default_title": "Progress Bookmark", "default_badgetext": "test"}, "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png"}, "background": { "scripts": ["background.js"]}, "content_scripts": [{ "matches": [ "http://*/*", "https://*/*"], "js": [ "jquery-2.2.0.min.js", "content_script.js"], "css": ["mystyle.css"]}], "permissions": [ "contextMenus", "storage", "tabs", "http://*/*", "https://*/*"]}

上面的配置文件已經包含了大部分需要開發的文件名: popup.html, background.js, content_script.js mystyle.css。另外,各種尺寸的icon圖片,用於插件在不同地方(插件logo,pop圖標,插件商店等等)展示。目錄結構如下:

chrome插件 DIY

3.2 數據存儲和數據流

本插件的功能類似於書籤,需要保存目標頁面的一些信息(標題, url, 進度)。那麼有沒有一種好的方法,可以保存這些數據,並且在同一個google賬號上共享呢?還真有:chrome.storage。官方文檔中詳細介紹了其用法,以及如何在同賬號不同瀏覽器上自動同步數據。

基於chrome.storage,本插件的各種擴展點的數據流操作圖如下:

1 前言

對於一個web前端開發者,chrome瀏覽器是一個工作,學習和生活的必備工具。除了chrome本身的基本能力(控制檯等)外,能大幅提高這個神器的使用體驗的是,可擴展能力(插件)以及豐富的插件生態。

每個人根據使用習慣會有自己的一套插件配置(鼠標手勢、代理配置等等),這些插件包括具體的插件的配置信息,甚至可以和你的google賬號綁定,當你換一臺電腦,只要使用相同的google賬號登錄chrome,就會享受到一致的使用體驗。

當你打開chrome的“擴展程序”界面,看著琳琅滿目的插件,有沒有想過親自動手,打造一個自己的插件呢?當然,這種想法不應該是閒著某個部位疼,刻意的去開發一個連自己都不會實際使用的插件。而應該是發現現在的插件庫裡,沒有一個能解決自已在使用chrome過程中某個痛點的插件。

好,假設現在你在chrome的使用上想要一個擴展功能,但用各種關鍵字在各種可能找到答案的地方都搜索了,仍然沒有看到想要的插件。這個時候,就可以考慮自己開發了。如果剛好你是一個web前端開發者,那麼恭喜你,幾乎沒有門檻(只要有能看懂chrome extentions API文檔就行),因為所有用到的技術都是你所熟悉的: json配置, js邏輯, css+html展示。

2 初步探索

chrome extension的官方文檔上,有著簡單的demo指引,全面的API文檔,以及對於各種API的豐富例子。對於初次開發chrome插件的人來說,建議先看入門指引小demo,篇幅很小,很快可以看完。看完之後對chrome插件的基本配置和文件結構會有一個大致的認識,同時也學會了如何在chrome上加載自己在本地開發的插件。

chrome extention支持的擴展點以及擴展功能很多,對於初學者不可能一下子看完官方所有文檔再去動手。而應該是先根據自己用過的插件,腦海中有個大致的印象:插件可以在哪些地方起到效果。chrome插件最常見的功能莫過到url欄右側的那些小圖標了,就是這些:

chrome插件 DIY

如果看完上入門指引小demo後,你肯定知道了怎麼樣實現這樣一個功能。這裡就不講官方文檔裡已經講過的細節,主要講一下比較重要的配置文件 manifest.json 。官方小demo的配置文件內容如下:

{ "manifest_version": 2, // 插件標準版本,目前統一是2"name": "Getting started example", // 插件名稱,顯示在插件詳情和插件商店中"description": "This extension shows a Google Image search result for the current page", // 簡介"version": "1.0", // 插件版本,發佈到插件商店後,如果有修改插件代碼,需要修改這裡"browser_action": { // 就是url欄右側那些小圖標啊"default_icon": "icon.png", // 展示出來的圖標圖片"default_popup": "popup.html" // 點擊圖標後展示的氣泡框頁面(獨立頁面,可加載js / css)}, "permissions": [ // 插件權限設置,規則較多,建議看官方文檔"activeTab", "https://ajax.googleapis.com/"]}

插件配置文件裡配置的文件路徑,都是相對於mainfest.json的相對路徑。所以當插件邏輯並不複雜時,通常就將配置文件和插件代碼直接放在同一層目錄下。插件配置文件中,配置了該插件擴展的描述信息、擴展的功能,以及插件的訪問權限。插件功能除了browser_action配置的popup頁面外,還支持什麼功能呢?用過鼠標手勢類插件的肯定知道,插件可以訪問和修改頁面dom,因為這類插件本質就是在dom上繪製鼠標路徑。那麼在哪裡配置控制頁面dom的代碼呢?在content_scripts中:

{ "name": "My extension",... "content_scripts": [ // 這裡配置的腳本和樣式將直接按順序注入到影響的頁面中{ "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}],...}

content_scripts實際上是運行在受插件影響的頁面中,在devtool中可以看到插件注入的這些內容:

chrome插件 DIY

目前我們已經掌握了插件兩個功能點的配置了。如果用過evernote剪裁插件的人應該知道,插件可以改變chrome在頁面上的右鍵菜單:

chrome插件 DIY

這裡在哪裡實現的呢?以上的兩個配置點無法實現,是在background項中配置的:

{ "name": "My extension",... "background": { // 在瀏覽器運行環境中運行的後臺腳本,只要開啟插件就會生效"scripts": ["background.js"]}

瞭解了上面三種擴展點的配置方法後,就可以開始開發功能豐富的插件了。

3 插件開發示例

本人開發了一個插件,通過介紹這個插件的開發流程,讓大家熟悉幾個常用的API。

初衷/痛點:平時看一些文章/博客,要處理手頭上其他事情,不得不中斷。為了下次再看,通常是保存到書籤/筆記。使用書籤/筆記的方法,有兩個弊端:一個是下次再進入時,不記得上次看到哪裡了,又得重頭開始看,或者拼命回憶上次看到哪裡;另一個是,下次根本不記得哪些是沒有看完的(除非專門建一個分類標籤)。

期望:有個插件,能夠記錄那些沒看完,但又非常想繼續看完的文章,即使關閉瀏覽器,換個瀏覽器,也能夠獲取到這些記錄,並且打開再次打開文章時,能自動跳轉到上次看到的位置。

  • 安裝:https://chrome.google.com/webstore/detail/progress-bookmark/ediaiaoabgoimfjpmegbhlhmpajmegoj

  • 源碼: https://github.com/coolriver/smartBookmark

這個插件的主要功能是:

  1. 記錄沒有看完的文章/博客(在頁面上通過右鍵菜單添加標記),保存進度(按高度百分比)。

  2. 下次從記錄(url欄右側插件功能點)中進入文章頁面時,頁面會滾動到上次標記的位置。

3.1 配置文件

這個插件用到了2節中講到了3個插件擴展點: browser_action , content_scriptsbackground。配置文件如下:

{ "manifest_version": 2, "name": "Progress Bookmark", "description": "save progress of articles that has not been read completely", "version": "1.1.5", "browser_action": { "default_icon": "icon48.png", "default_popup": "popup.html", "default_title": "Progress Bookmark", "default_badgetext": "test"}, "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png"}, "background": { "scripts": ["background.js"]}, "content_scripts": [{ "matches": [ "http://*/*", "https://*/*"], "js": [ "jquery-2.2.0.min.js", "content_script.js"], "css": ["mystyle.css"]}], "permissions": [ "contextMenus", "storage", "tabs", "http://*/*", "https://*/*"]}

上面的配置文件已經包含了大部分需要開發的文件名: popup.html, background.js, content_script.js mystyle.css。另外,各種尺寸的icon圖片,用於插件在不同地方(插件logo,pop圖標,插件商店等等)展示。目錄結構如下:

chrome插件 DIY

3.2 數據存儲和數據流

本插件的功能類似於書籤,需要保存目標頁面的一些信息(標題, url, 進度)。那麼有沒有一種好的方法,可以保存這些數據,並且在同一個google賬號上共享呢?還真有:chrome.storage。官方文檔中詳細介紹了其用法,以及如何在同賬號不同瀏覽器上自動同步數據。

基於chrome.storage,本插件的各種擴展點的數據流操作圖如下:

chrome插件 DIY

上圖中,content_script和background的腳本運行環境不一樣,通過message來進行通訊。

###3.3 popup頁面 本插件的popup頁面用於展示已經保存記錄的未讀完頁面,頁面展示效果如下:

1 前言

對於一個web前端開發者,chrome瀏覽器是一個工作,學習和生活的必備工具。除了chrome本身的基本能力(控制檯等)外,能大幅提高這個神器的使用體驗的是,可擴展能力(插件)以及豐富的插件生態。

每個人根據使用習慣會有自己的一套插件配置(鼠標手勢、代理配置等等),這些插件包括具體的插件的配置信息,甚至可以和你的google賬號綁定,當你換一臺電腦,只要使用相同的google賬號登錄chrome,就會享受到一致的使用體驗。

當你打開chrome的“擴展程序”界面,看著琳琅滿目的插件,有沒有想過親自動手,打造一個自己的插件呢?當然,這種想法不應該是閒著某個部位疼,刻意的去開發一個連自己都不會實際使用的插件。而應該是發現現在的插件庫裡,沒有一個能解決自已在使用chrome過程中某個痛點的插件。

好,假設現在你在chrome的使用上想要一個擴展功能,但用各種關鍵字在各種可能找到答案的地方都搜索了,仍然沒有看到想要的插件。這個時候,就可以考慮自己開發了。如果剛好你是一個web前端開發者,那麼恭喜你,幾乎沒有門檻(只要有能看懂chrome extentions API文檔就行),因為所有用到的技術都是你所熟悉的: json配置, js邏輯, css+html展示。

2 初步探索

chrome extension的官方文檔上,有著簡單的demo指引,全面的API文檔,以及對於各種API的豐富例子。對於初次開發chrome插件的人來說,建議先看入門指引小demo,篇幅很小,很快可以看完。看完之後對chrome插件的基本配置和文件結構會有一個大致的認識,同時也學會了如何在chrome上加載自己在本地開發的插件。

chrome extention支持的擴展點以及擴展功能很多,對於初學者不可能一下子看完官方所有文檔再去動手。而應該是先根據自己用過的插件,腦海中有個大致的印象:插件可以在哪些地方起到效果。chrome插件最常見的功能莫過到url欄右側的那些小圖標了,就是這些:

chrome插件 DIY

如果看完上入門指引小demo後,你肯定知道了怎麼樣實現這樣一個功能。這裡就不講官方文檔裡已經講過的細節,主要講一下比較重要的配置文件 manifest.json 。官方小demo的配置文件內容如下:

{ "manifest_version": 2, // 插件標準版本,目前統一是2"name": "Getting started example", // 插件名稱,顯示在插件詳情和插件商店中"description": "This extension shows a Google Image search result for the current page", // 簡介"version": "1.0", // 插件版本,發佈到插件商店後,如果有修改插件代碼,需要修改這裡"browser_action": { // 就是url欄右側那些小圖標啊"default_icon": "icon.png", // 展示出來的圖標圖片"default_popup": "popup.html" // 點擊圖標後展示的氣泡框頁面(獨立頁面,可加載js / css)}, "permissions": [ // 插件權限設置,規則較多,建議看官方文檔"activeTab", "https://ajax.googleapis.com/"]}

插件配置文件裡配置的文件路徑,都是相對於mainfest.json的相對路徑。所以當插件邏輯並不複雜時,通常就將配置文件和插件代碼直接放在同一層目錄下。插件配置文件中,配置了該插件擴展的描述信息、擴展的功能,以及插件的訪問權限。插件功能除了browser_action配置的popup頁面外,還支持什麼功能呢?用過鼠標手勢類插件的肯定知道,插件可以訪問和修改頁面dom,因為這類插件本質就是在dom上繪製鼠標路徑。那麼在哪裡配置控制頁面dom的代碼呢?在content_scripts中:

{ "name": "My extension",... "content_scripts": [ // 這裡配置的腳本和樣式將直接按順序注入到影響的頁面中{ "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}],...}

content_scripts實際上是運行在受插件影響的頁面中,在devtool中可以看到插件注入的這些內容:

chrome插件 DIY

目前我們已經掌握了插件兩個功能點的配置了。如果用過evernote剪裁插件的人應該知道,插件可以改變chrome在頁面上的右鍵菜單:

chrome插件 DIY

這裡在哪裡實現的呢?以上的兩個配置點無法實現,是在background項中配置的:

{ "name": "My extension",... "background": { // 在瀏覽器運行環境中運行的後臺腳本,只要開啟插件就會生效"scripts": ["background.js"]}

瞭解了上面三種擴展點的配置方法後,就可以開始開發功能豐富的插件了。

3 插件開發示例

本人開發了一個插件,通過介紹這個插件的開發流程,讓大家熟悉幾個常用的API。

初衷/痛點:平時看一些文章/博客,要處理手頭上其他事情,不得不中斷。為了下次再看,通常是保存到書籤/筆記。使用書籤/筆記的方法,有兩個弊端:一個是下次再進入時,不記得上次看到哪裡了,又得重頭開始看,或者拼命回憶上次看到哪裡;另一個是,下次根本不記得哪些是沒有看完的(除非專門建一個分類標籤)。

期望:有個插件,能夠記錄那些沒看完,但又非常想繼續看完的文章,即使關閉瀏覽器,換個瀏覽器,也能夠獲取到這些記錄,並且打開再次打開文章時,能自動跳轉到上次看到的位置。

  • 安裝:https://chrome.google.com/webstore/detail/progress-bookmark/ediaiaoabgoimfjpmegbhlhmpajmegoj

  • 源碼: https://github.com/coolriver/smartBookmark

這個插件的主要功能是:

  1. 記錄沒有看完的文章/博客(在頁面上通過右鍵菜單添加標記),保存進度(按高度百分比)。

  2. 下次從記錄(url欄右側插件功能點)中進入文章頁面時,頁面會滾動到上次標記的位置。

3.1 配置文件

這個插件用到了2節中講到了3個插件擴展點: browser_action , content_scriptsbackground。配置文件如下:

{ "manifest_version": 2, "name": "Progress Bookmark", "description": "save progress of articles that has not been read completely", "version": "1.1.5", "browser_action": { "default_icon": "icon48.png", "default_popup": "popup.html", "default_title": "Progress Bookmark", "default_badgetext": "test"}, "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png"}, "background": { "scripts": ["background.js"]}, "content_scripts": [{ "matches": [ "http://*/*", "https://*/*"], "js": [ "jquery-2.2.0.min.js", "content_script.js"], "css": ["mystyle.css"]}], "permissions": [ "contextMenus", "storage", "tabs", "http://*/*", "https://*/*"]}

上面的配置文件已經包含了大部分需要開發的文件名: popup.html, background.js, content_script.js mystyle.css。另外,各種尺寸的icon圖片,用於插件在不同地方(插件logo,pop圖標,插件商店等等)展示。目錄結構如下:

chrome插件 DIY

3.2 數據存儲和數據流

本插件的功能類似於書籤,需要保存目標頁面的一些信息(標題, url, 進度)。那麼有沒有一種好的方法,可以保存這些數據,並且在同一個google賬號上共享呢?還真有:chrome.storage。官方文檔中詳細介紹了其用法,以及如何在同賬號不同瀏覽器上自動同步數據。

基於chrome.storage,本插件的各種擴展點的數據流操作圖如下:

chrome插件 DIY

上圖中,content_script和background的腳本運行環境不一樣,通過message來進行通訊。

###3.3 popup頁面 本插件的popup頁面用於展示已經保存記錄的未讀完頁面,頁面展示效果如下:

chrome插件 DIY

該頁面負責展示和刪除保存的記錄,頁面主要邏輯如下:

// popup.js in popup.htmldocument.addEventListener('DOMContentLoaded', function() {loadStorage();bindEvents();});function loadStorage() { // 讀取storage中的記錄並renderchrome.storage.sync.get(null, function(data) { var list = [],prop,html; //console.log(data);for (prop in data) { if (data.hasOwnProperty(prop)) { if (data[prop].pageX !== undefined) {list.push($.extend({}, data[prop], { url: prop}));}}}html = renderList(list);$('#content').html(html);});}function bindEvents() {$(document).on('click', '.js-remove', function(e) { // 監聽和刪除記錄//console.log('click remove');var $this = $(this),$link = $this.closest('tr').find('.text-title a'),url = $link.attr('href');chrome.storage.sync.remove(url, function() {loadStorage();});});}

3.4 content_script

content_script主要有兩個功能:

  1. 在頁面中操作(新增 、滾動到指定位置、刪除)記錄座標的元素 ;

  2. 向background發送座標消息和刪除座標的消息。 主要功能代碼如下:

// content_script.jsfunction checkBookmark(e) { // 初始化時檢測storage中當前頁面的書籤信息var url = location.href;chrome.storage.sync.get(url, function(data) {data = data[url]; if (!data) { return;} //console.log('get: ' + JSON.stringify(data));insertBookTag(data);$scrollElems[0].animate({ scrollTop: data.pageY}, 1000); // body scroll失敗,嘗試html scrollif ($scrollElems[0].scrollTop() !== data.pageY) {$scrollElems[1].animate({ scrollTop: data.pageY}, 1000);}});}function bindEvents() { // 事件和消息$doc.on('mouseup', function(e) { // 右鍵記錄當前位置,併發送message給background//console.log(e.which);if (e.which === 3) {chrome.runtime.sendMessage({ type: 'bookmark-position', pageX: e.pageX, pageY: e.pageY, title: document.title, progress: Math.floor(e.pageY * 100 / $doc.height())});}}).on('ready', checkBookmark).on('click', '#book-mark-tag .js-delete', function(e) {chrome.runtime.sendMessage({ type: 'remove-bookmark'});});chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) { // background返回的回調消息if (request.type === 'add-bookmark-cb') {insertBookTag(request);} else if (request.type === 'remove-bookmark-cb') {deleteTag();}});}

3.5 background

background負責的任務有:

  1. 添加右鍵菜單

  2. 接收content_script發來的消息並處理

// background.jsfunction createMenu() { // 添加右鍵菜單var contexts = ["page", "selection", "link", "editable", "image", "video", "audio"];contextId = chrome.contextMenus.create({ "title": 'Set progress tag here', "contexts": contexts, "onclick": menuHandle});}function menuHandle() { // 右鍵菜單點擊時的處理函數//console.log('click');var value = {},key = senderCur.url,obj = {};value.pageX = requestCur.pageX;value.pageY = requestCur.pageY;value.progress = requestCur.progress;value.title = requestCur.title;obj[key] = value; //console.log(obj);chrome.storage.sync.set(obj, function() { //console.log('send callback');chrome.tabs.query({ // 查找當前tabactive: true, currentWindow: true}, function(tabs) { // 發送消息到當前tab,添加書籤相關dom節點chrome.tabs.sendMessage(tabs[0].id, { type: 'add-bookmark-cb', pageX: requestCur.pageX, pageY: requestCur.pageY});});});}function bindEvents() { // 響應來自content_script的messagechrome.runtime.onMessage.addListener(function(request, sender, sendRequest) { if (request.type === 'bookmark-position') { // 添加/update書籤requestCur = request;senderCur = sender;} else if (request.type === 'remove-bookmark') { // 刪除書籤//console.log('sendRequest: ' + sendRequest);chrome.storage.sync.remove(sender.url, function() {chrome.tabs.query({ // 查找當前激活的標籤tabactive: true, currentWindow: true}, function(tabs) { // 發送消息到當前tab,刪除書籤相關dom節點chrome.tabs.sendMessage(tabs[0].id, { type: 'remove-bookmark-cb'});});});}});}

4 插件調試方法

  • popup.html調試: 右鍵點擊popup圖標,選擇“審查彈出內容”:

  • content_script調試:devtool -> sources -> Content scripts

1 前言

對於一個web前端開發者,chrome瀏覽器是一個工作,學習和生活的必備工具。除了chrome本身的基本能力(控制檯等)外,能大幅提高這個神器的使用體驗的是,可擴展能力(插件)以及豐富的插件生態。

每個人根據使用習慣會有自己的一套插件配置(鼠標手勢、代理配置等等),這些插件包括具體的插件的配置信息,甚至可以和你的google賬號綁定,當你換一臺電腦,只要使用相同的google賬號登錄chrome,就會享受到一致的使用體驗。

當你打開chrome的“擴展程序”界面,看著琳琅滿目的插件,有沒有想過親自動手,打造一個自己的插件呢?當然,這種想法不應該是閒著某個部位疼,刻意的去開發一個連自己都不會實際使用的插件。而應該是發現現在的插件庫裡,沒有一個能解決自已在使用chrome過程中某個痛點的插件。

好,假設現在你在chrome的使用上想要一個擴展功能,但用各種關鍵字在各種可能找到答案的地方都搜索了,仍然沒有看到想要的插件。這個時候,就可以考慮自己開發了。如果剛好你是一個web前端開發者,那麼恭喜你,幾乎沒有門檻(只要有能看懂chrome extentions API文檔就行),因為所有用到的技術都是你所熟悉的: json配置, js邏輯, css+html展示。

2 初步探索

chrome extension的官方文檔上,有著簡單的demo指引,全面的API文檔,以及對於各種API的豐富例子。對於初次開發chrome插件的人來說,建議先看入門指引小demo,篇幅很小,很快可以看完。看完之後對chrome插件的基本配置和文件結構會有一個大致的認識,同時也學會了如何在chrome上加載自己在本地開發的插件。

chrome extention支持的擴展點以及擴展功能很多,對於初學者不可能一下子看完官方所有文檔再去動手。而應該是先根據自己用過的插件,腦海中有個大致的印象:插件可以在哪些地方起到效果。chrome插件最常見的功能莫過到url欄右側的那些小圖標了,就是這些:

chrome插件 DIY

如果看完上入門指引小demo後,你肯定知道了怎麼樣實現這樣一個功能。這裡就不講官方文檔裡已經講過的細節,主要講一下比較重要的配置文件 manifest.json 。官方小demo的配置文件內容如下:

{ "manifest_version": 2, // 插件標準版本,目前統一是2"name": "Getting started example", // 插件名稱,顯示在插件詳情和插件商店中"description": "This extension shows a Google Image search result for the current page", // 簡介"version": "1.0", // 插件版本,發佈到插件商店後,如果有修改插件代碼,需要修改這裡"browser_action": { // 就是url欄右側那些小圖標啊"default_icon": "icon.png", // 展示出來的圖標圖片"default_popup": "popup.html" // 點擊圖標後展示的氣泡框頁面(獨立頁面,可加載js / css)}, "permissions": [ // 插件權限設置,規則較多,建議看官方文檔"activeTab", "https://ajax.googleapis.com/"]}

插件配置文件裡配置的文件路徑,都是相對於mainfest.json的相對路徑。所以當插件邏輯並不複雜時,通常就將配置文件和插件代碼直接放在同一層目錄下。插件配置文件中,配置了該插件擴展的描述信息、擴展的功能,以及插件的訪問權限。插件功能除了browser_action配置的popup頁面外,還支持什麼功能呢?用過鼠標手勢類插件的肯定知道,插件可以訪問和修改頁面dom,因為這類插件本質就是在dom上繪製鼠標路徑。那麼在哪裡配置控制頁面dom的代碼呢?在content_scripts中:

{ "name": "My extension",... "content_scripts": [ // 這裡配置的腳本和樣式將直接按順序注入到影響的頁面中{ "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}],...}

content_scripts實際上是運行在受插件影響的頁面中,在devtool中可以看到插件注入的這些內容:

chrome插件 DIY

目前我們已經掌握了插件兩個功能點的配置了。如果用過evernote剪裁插件的人應該知道,插件可以改變chrome在頁面上的右鍵菜單:

chrome插件 DIY

這裡在哪裡實現的呢?以上的兩個配置點無法實現,是在background項中配置的:

{ "name": "My extension",... "background": { // 在瀏覽器運行環境中運行的後臺腳本,只要開啟插件就會生效"scripts": ["background.js"]}

瞭解了上面三種擴展點的配置方法後,就可以開始開發功能豐富的插件了。

3 插件開發示例

本人開發了一個插件,通過介紹這個插件的開發流程,讓大家熟悉幾個常用的API。

初衷/痛點:平時看一些文章/博客,要處理手頭上其他事情,不得不中斷。為了下次再看,通常是保存到書籤/筆記。使用書籤/筆記的方法,有兩個弊端:一個是下次再進入時,不記得上次看到哪裡了,又得重頭開始看,或者拼命回憶上次看到哪裡;另一個是,下次根本不記得哪些是沒有看完的(除非專門建一個分類標籤)。

期望:有個插件,能夠記錄那些沒看完,但又非常想繼續看完的文章,即使關閉瀏覽器,換個瀏覽器,也能夠獲取到這些記錄,並且打開再次打開文章時,能自動跳轉到上次看到的位置。

  • 安裝:https://chrome.google.com/webstore/detail/progress-bookmark/ediaiaoabgoimfjpmegbhlhmpajmegoj

  • 源碼: https://github.com/coolriver/smartBookmark

這個插件的主要功能是:

  1. 記錄沒有看完的文章/博客(在頁面上通過右鍵菜單添加標記),保存進度(按高度百分比)。

  2. 下次從記錄(url欄右側插件功能點)中進入文章頁面時,頁面會滾動到上次標記的位置。

3.1 配置文件

這個插件用到了2節中講到了3個插件擴展點: browser_action , content_scriptsbackground。配置文件如下:

{ "manifest_version": 2, "name": "Progress Bookmark", "description": "save progress of articles that has not been read completely", "version": "1.1.5", "browser_action": { "default_icon": "icon48.png", "default_popup": "popup.html", "default_title": "Progress Bookmark", "default_badgetext": "test"}, "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png"}, "background": { "scripts": ["background.js"]}, "content_scripts": [{ "matches": [ "http://*/*", "https://*/*"], "js": [ "jquery-2.2.0.min.js", "content_script.js"], "css": ["mystyle.css"]}], "permissions": [ "contextMenus", "storage", "tabs", "http://*/*", "https://*/*"]}

上面的配置文件已經包含了大部分需要開發的文件名: popup.html, background.js, content_script.js mystyle.css。另外,各種尺寸的icon圖片,用於插件在不同地方(插件logo,pop圖標,插件商店等等)展示。目錄結構如下:

chrome插件 DIY

3.2 數據存儲和數據流

本插件的功能類似於書籤,需要保存目標頁面的一些信息(標題, url, 進度)。那麼有沒有一種好的方法,可以保存這些數據,並且在同一個google賬號上共享呢?還真有:chrome.storage。官方文檔中詳細介紹了其用法,以及如何在同賬號不同瀏覽器上自動同步數據。

基於chrome.storage,本插件的各種擴展點的數據流操作圖如下:

chrome插件 DIY

上圖中,content_script和background的腳本運行環境不一樣,通過message來進行通訊。

###3.3 popup頁面 本插件的popup頁面用於展示已經保存記錄的未讀完頁面,頁面展示效果如下:

chrome插件 DIY

該頁面負責展示和刪除保存的記錄,頁面主要邏輯如下:

// popup.js in popup.htmldocument.addEventListener('DOMContentLoaded', function() {loadStorage();bindEvents();});function loadStorage() { // 讀取storage中的記錄並renderchrome.storage.sync.get(null, function(data) { var list = [],prop,html; //console.log(data);for (prop in data) { if (data.hasOwnProperty(prop)) { if (data[prop].pageX !== undefined) {list.push($.extend({}, data[prop], { url: prop}));}}}html = renderList(list);$('#content').html(html);});}function bindEvents() {$(document).on('click', '.js-remove', function(e) { // 監聽和刪除記錄//console.log('click remove');var $this = $(this),$link = $this.closest('tr').find('.text-title a'),url = $link.attr('href');chrome.storage.sync.remove(url, function() {loadStorage();});});}

3.4 content_script

content_script主要有兩個功能:

  1. 在頁面中操作(新增 、滾動到指定位置、刪除)記錄座標的元素 ;

  2. 向background發送座標消息和刪除座標的消息。 主要功能代碼如下:

// content_script.jsfunction checkBookmark(e) { // 初始化時檢測storage中當前頁面的書籤信息var url = location.href;chrome.storage.sync.get(url, function(data) {data = data[url]; if (!data) { return;} //console.log('get: ' + JSON.stringify(data));insertBookTag(data);$scrollElems[0].animate({ scrollTop: data.pageY}, 1000); // body scroll失敗,嘗試html scrollif ($scrollElems[0].scrollTop() !== data.pageY) {$scrollElems[1].animate({ scrollTop: data.pageY}, 1000);}});}function bindEvents() { // 事件和消息$doc.on('mouseup', function(e) { // 右鍵記錄當前位置,併發送message給background//console.log(e.which);if (e.which === 3) {chrome.runtime.sendMessage({ type: 'bookmark-position', pageX: e.pageX, pageY: e.pageY, title: document.title, progress: Math.floor(e.pageY * 100 / $doc.height())});}}).on('ready', checkBookmark).on('click', '#book-mark-tag .js-delete', function(e) {chrome.runtime.sendMessage({ type: 'remove-bookmark'});});chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) { // background返回的回調消息if (request.type === 'add-bookmark-cb') {insertBookTag(request);} else if (request.type === 'remove-bookmark-cb') {deleteTag();}});}

3.5 background

background負責的任務有:

  1. 添加右鍵菜單

  2. 接收content_script發來的消息並處理

// background.jsfunction createMenu() { // 添加右鍵菜單var contexts = ["page", "selection", "link", "editable", "image", "video", "audio"];contextId = chrome.contextMenus.create({ "title": 'Set progress tag here', "contexts": contexts, "onclick": menuHandle});}function menuHandle() { // 右鍵菜單點擊時的處理函數//console.log('click');var value = {},key = senderCur.url,obj = {};value.pageX = requestCur.pageX;value.pageY = requestCur.pageY;value.progress = requestCur.progress;value.title = requestCur.title;obj[key] = value; //console.log(obj);chrome.storage.sync.set(obj, function() { //console.log('send callback');chrome.tabs.query({ // 查找當前tabactive: true, currentWindow: true}, function(tabs) { // 發送消息到當前tab,添加書籤相關dom節點chrome.tabs.sendMessage(tabs[0].id, { type: 'add-bookmark-cb', pageX: requestCur.pageX, pageY: requestCur.pageY});});});}function bindEvents() { // 響應來自content_script的messagechrome.runtime.onMessage.addListener(function(request, sender, sendRequest) { if (request.type === 'bookmark-position') { // 添加/update書籤requestCur = request;senderCur = sender;} else if (request.type === 'remove-bookmark') { // 刪除書籤//console.log('sendRequest: ' + sendRequest);chrome.storage.sync.remove(sender.url, function() {chrome.tabs.query({ // 查找當前激活的標籤tabactive: true, currentWindow: true}, function(tabs) { // 發送消息到當前tab,刪除書籤相關dom節點chrome.tabs.sendMessage(tabs[0].id, { type: 'remove-bookmark-cb'});});});}});}

4 插件調試方法

  • popup.html調試: 右鍵點擊popup圖標,選擇“審查彈出內容”:

  • content_script調試:devtool -> sources -> Content scripts

chrome插件 DIY

1 前言

對於一個web前端開發者,chrome瀏覽器是一個工作,學習和生活的必備工具。除了chrome本身的基本能力(控制檯等)外,能大幅提高這個神器的使用體驗的是,可擴展能力(插件)以及豐富的插件生態。

每個人根據使用習慣會有自己的一套插件配置(鼠標手勢、代理配置等等),這些插件包括具體的插件的配置信息,甚至可以和你的google賬號綁定,當你換一臺電腦,只要使用相同的google賬號登錄chrome,就會享受到一致的使用體驗。

當你打開chrome的“擴展程序”界面,看著琳琅滿目的插件,有沒有想過親自動手,打造一個自己的插件呢?當然,這種想法不應該是閒著某個部位疼,刻意的去開發一個連自己都不會實際使用的插件。而應該是發現現在的插件庫裡,沒有一個能解決自已在使用chrome過程中某個痛點的插件。

好,假設現在你在chrome的使用上想要一個擴展功能,但用各種關鍵字在各種可能找到答案的地方都搜索了,仍然沒有看到想要的插件。這個時候,就可以考慮自己開發了。如果剛好你是一個web前端開發者,那麼恭喜你,幾乎沒有門檻(只要有能看懂chrome extentions API文檔就行),因為所有用到的技術都是你所熟悉的: json配置, js邏輯, css+html展示。

2 初步探索

chrome extension的官方文檔上,有著簡單的demo指引,全面的API文檔,以及對於各種API的豐富例子。對於初次開發chrome插件的人來說,建議先看入門指引小demo,篇幅很小,很快可以看完。看完之後對chrome插件的基本配置和文件結構會有一個大致的認識,同時也學會了如何在chrome上加載自己在本地開發的插件。

chrome extention支持的擴展點以及擴展功能很多,對於初學者不可能一下子看完官方所有文檔再去動手。而應該是先根據自己用過的插件,腦海中有個大致的印象:插件可以在哪些地方起到效果。chrome插件最常見的功能莫過到url欄右側的那些小圖標了,就是這些:

chrome插件 DIY

如果看完上入門指引小demo後,你肯定知道了怎麼樣實現這樣一個功能。這裡就不講官方文檔裡已經講過的細節,主要講一下比較重要的配置文件 manifest.json 。官方小demo的配置文件內容如下:

{ "manifest_version": 2, // 插件標準版本,目前統一是2"name": "Getting started example", // 插件名稱,顯示在插件詳情和插件商店中"description": "This extension shows a Google Image search result for the current page", // 簡介"version": "1.0", // 插件版本,發佈到插件商店後,如果有修改插件代碼,需要修改這裡"browser_action": { // 就是url欄右側那些小圖標啊"default_icon": "icon.png", // 展示出來的圖標圖片"default_popup": "popup.html" // 點擊圖標後展示的氣泡框頁面(獨立頁面,可加載js / css)}, "permissions": [ // 插件權限設置,規則較多,建議看官方文檔"activeTab", "https://ajax.googleapis.com/"]}

插件配置文件裡配置的文件路徑,都是相對於mainfest.json的相對路徑。所以當插件邏輯並不複雜時,通常就將配置文件和插件代碼直接放在同一層目錄下。插件配置文件中,配置了該插件擴展的描述信息、擴展的功能,以及插件的訪問權限。插件功能除了browser_action配置的popup頁面外,還支持什麼功能呢?用過鼠標手勢類插件的肯定知道,插件可以訪問和修改頁面dom,因為這類插件本質就是在dom上繪製鼠標路徑。那麼在哪裡配置控制頁面dom的代碼呢?在content_scripts中:

{ "name": "My extension",... "content_scripts": [ // 這裡配置的腳本和樣式將直接按順序注入到影響的頁面中{ "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}],...}

content_scripts實際上是運行在受插件影響的頁面中,在devtool中可以看到插件注入的這些內容:

chrome插件 DIY

目前我們已經掌握了插件兩個功能點的配置了。如果用過evernote剪裁插件的人應該知道,插件可以改變chrome在頁面上的右鍵菜單:

chrome插件 DIY

這裡在哪裡實現的呢?以上的兩個配置點無法實現,是在background項中配置的:

{ "name": "My extension",... "background": { // 在瀏覽器運行環境中運行的後臺腳本,只要開啟插件就會生效"scripts": ["background.js"]}

瞭解了上面三種擴展點的配置方法後,就可以開始開發功能豐富的插件了。

3 插件開發示例

本人開發了一個插件,通過介紹這個插件的開發流程,讓大家熟悉幾個常用的API。

初衷/痛點:平時看一些文章/博客,要處理手頭上其他事情,不得不中斷。為了下次再看,通常是保存到書籤/筆記。使用書籤/筆記的方法,有兩個弊端:一個是下次再進入時,不記得上次看到哪裡了,又得重頭開始看,或者拼命回憶上次看到哪裡;另一個是,下次根本不記得哪些是沒有看完的(除非專門建一個分類標籤)。

期望:有個插件,能夠記錄那些沒看完,但又非常想繼續看完的文章,即使關閉瀏覽器,換個瀏覽器,也能夠獲取到這些記錄,並且打開再次打開文章時,能自動跳轉到上次看到的位置。

  • 安裝:https://chrome.google.com/webstore/detail/progress-bookmark/ediaiaoabgoimfjpmegbhlhmpajmegoj

  • 源碼: https://github.com/coolriver/smartBookmark

這個插件的主要功能是:

  1. 記錄沒有看完的文章/博客(在頁面上通過右鍵菜單添加標記),保存進度(按高度百分比)。

  2. 下次從記錄(url欄右側插件功能點)中進入文章頁面時,頁面會滾動到上次標記的位置。

3.1 配置文件

這個插件用到了2節中講到了3個插件擴展點: browser_action , content_scriptsbackground。配置文件如下:

{ "manifest_version": 2, "name": "Progress Bookmark", "description": "save progress of articles that has not been read completely", "version": "1.1.5", "browser_action": { "default_icon": "icon48.png", "default_popup": "popup.html", "default_title": "Progress Bookmark", "default_badgetext": "test"}, "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png"}, "background": { "scripts": ["background.js"]}, "content_scripts": [{ "matches": [ "http://*/*", "https://*/*"], "js": [ "jquery-2.2.0.min.js", "content_script.js"], "css": ["mystyle.css"]}], "permissions": [ "contextMenus", "storage", "tabs", "http://*/*", "https://*/*"]}

上面的配置文件已經包含了大部分需要開發的文件名: popup.html, background.js, content_script.js mystyle.css。另外,各種尺寸的icon圖片,用於插件在不同地方(插件logo,pop圖標,插件商店等等)展示。目錄結構如下:

chrome插件 DIY

3.2 數據存儲和數據流

本插件的功能類似於書籤,需要保存目標頁面的一些信息(標題, url, 進度)。那麼有沒有一種好的方法,可以保存這些數據,並且在同一個google賬號上共享呢?還真有:chrome.storage。官方文檔中詳細介紹了其用法,以及如何在同賬號不同瀏覽器上自動同步數據。

基於chrome.storage,本插件的各種擴展點的數據流操作圖如下:

chrome插件 DIY

上圖中,content_script和background的腳本運行環境不一樣,通過message來進行通訊。

###3.3 popup頁面 本插件的popup頁面用於展示已經保存記錄的未讀完頁面,頁面展示效果如下:

chrome插件 DIY

該頁面負責展示和刪除保存的記錄,頁面主要邏輯如下:

// popup.js in popup.htmldocument.addEventListener('DOMContentLoaded', function() {loadStorage();bindEvents();});function loadStorage() { // 讀取storage中的記錄並renderchrome.storage.sync.get(null, function(data) { var list = [],prop,html; //console.log(data);for (prop in data) { if (data.hasOwnProperty(prop)) { if (data[prop].pageX !== undefined) {list.push($.extend({}, data[prop], { url: prop}));}}}html = renderList(list);$('#content').html(html);});}function bindEvents() {$(document).on('click', '.js-remove', function(e) { // 監聽和刪除記錄//console.log('click remove');var $this = $(this),$link = $this.closest('tr').find('.text-title a'),url = $link.attr('href');chrome.storage.sync.remove(url, function() {loadStorage();});});}

3.4 content_script

content_script主要有兩個功能:

  1. 在頁面中操作(新增 、滾動到指定位置、刪除)記錄座標的元素 ;

  2. 向background發送座標消息和刪除座標的消息。 主要功能代碼如下:

// content_script.jsfunction checkBookmark(e) { // 初始化時檢測storage中當前頁面的書籤信息var url = location.href;chrome.storage.sync.get(url, function(data) {data = data[url]; if (!data) { return;} //console.log('get: ' + JSON.stringify(data));insertBookTag(data);$scrollElems[0].animate({ scrollTop: data.pageY}, 1000); // body scroll失敗,嘗試html scrollif ($scrollElems[0].scrollTop() !== data.pageY) {$scrollElems[1].animate({ scrollTop: data.pageY}, 1000);}});}function bindEvents() { // 事件和消息$doc.on('mouseup', function(e) { // 右鍵記錄當前位置,併發送message給background//console.log(e.which);if (e.which === 3) {chrome.runtime.sendMessage({ type: 'bookmark-position', pageX: e.pageX, pageY: e.pageY, title: document.title, progress: Math.floor(e.pageY * 100 / $doc.height())});}}).on('ready', checkBookmark).on('click', '#book-mark-tag .js-delete', function(e) {chrome.runtime.sendMessage({ type: 'remove-bookmark'});});chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) { // background返回的回調消息if (request.type === 'add-bookmark-cb') {insertBookTag(request);} else if (request.type === 'remove-bookmark-cb') {deleteTag();}});}

3.5 background

background負責的任務有:

  1. 添加右鍵菜單

  2. 接收content_script發來的消息並處理

// background.jsfunction createMenu() { // 添加右鍵菜單var contexts = ["page", "selection", "link", "editable", "image", "video", "audio"];contextId = chrome.contextMenus.create({ "title": 'Set progress tag here', "contexts": contexts, "onclick": menuHandle});}function menuHandle() { // 右鍵菜單點擊時的處理函數//console.log('click');var value = {},key = senderCur.url,obj = {};value.pageX = requestCur.pageX;value.pageY = requestCur.pageY;value.progress = requestCur.progress;value.title = requestCur.title;obj[key] = value; //console.log(obj);chrome.storage.sync.set(obj, function() { //console.log('send callback');chrome.tabs.query({ // 查找當前tabactive: true, currentWindow: true}, function(tabs) { // 發送消息到當前tab,添加書籤相關dom節點chrome.tabs.sendMessage(tabs[0].id, { type: 'add-bookmark-cb', pageX: requestCur.pageX, pageY: requestCur.pageY});});});}function bindEvents() { // 響應來自content_script的messagechrome.runtime.onMessage.addListener(function(request, sender, sendRequest) { if (request.type === 'bookmark-position') { // 添加/update書籤requestCur = request;senderCur = sender;} else if (request.type === 'remove-bookmark') { // 刪除書籤//console.log('sendRequest: ' + sendRequest);chrome.storage.sync.remove(sender.url, function() {chrome.tabs.query({ // 查找當前激活的標籤tabactive: true, currentWindow: true}, function(tabs) { // 發送消息到當前tab,刪除書籤相關dom節點chrome.tabs.sendMessage(tabs[0].id, { type: 'remove-bookmark-cb'});});});}});}

4 插件調試方法

  • popup.html調試: 右鍵點擊popup圖標,選擇“審查彈出內容”:

  • content_script調試:devtool -> sources -> Content scripts

chrome插件 DIY

chrome插件 DIY

  • background調試: chrome://extensions/ 激活開發者模式,點擊對應插件“檢查視圖”後的“背景頁”

5 插件發佈

需要google賬戶+信用卡(為了成為google認證的開發者) 參考鏈接:https://segmentfault.com/a/1190000000354014

相關推薦

推薦中...