【包教包會】Chrome拓展開發實踐

時間  2019-11-07
標籤 包教包會 chrome 拓展 開發 實踐 欄目 Chrome 简体版
原文   原文鏈接

首發於微信公衆號《前端成長記》，寫於 2019.10.18javascript

導讀

有句老話說的好，好記性不如爛筆頭。人生中，總有那麼些東西你願去執筆寫下。css

本文旨在把整個開發的過程和遇到的問題及解決方案記錄下來，但願可以給你帶來些許幫助。html

安裝和源碼

安裝和源碼前端

背景

在 《乾貨！從0開始，0成本搭建我的動態博客》 中，已經完成了動態博客的搭建。接下來，將圍繞該博客，開發對應的 Chrome拓展，方便使用。java

上手開發

本文不須要前期準備，直接跟我作就行了node

功能拆分

這裏主要分爲幾個大的功能點：git

  • 內容菜單導航，方便快速進入到博客的指定菜單頁
  • 地址欄搜索，根據內容可直接在地址欄出現匹配結果的文章
  • 新文章推送，若是有文章更新則自動推送

Ⅰ.必要知識介紹github

Chrome 拓展插件 其實是由 HTML/CSS/JS/圖片 等資源組成的一個 .crx 的拓展包，解壓出來便可獲得真正內容。web

Chrome 拓展插件 對項目結構沒有要求，只須要在開發根目錄下有一個 mainfest.json 便可。chrome

進入 Chrome 拓展程序 頁面，打開 開發者模式 開始咱們的開發之路。

Ⅱ.基礎配置開發

首先，新建一個 src 目錄做爲插件的文件目錄，而後新建一個 mainfest.json 文件，文件內容以下：

// mainfest.json
{
  // 插件名稱
  "name": "McChen",
  // 插件版本號
  "version": "0.0.1",
  // 插件描述
  "description": "Chrome Extension for McChen.",
 // 插件主頁
  "homepage_url": "https://chenjiahao.xyz",
  // 版本必須指定爲2
  "manifest_version": 2
}
複製代碼

而後打開 Chrome 拓展程序頁面，點擊 加載已解壓的拓展程序 按鈕，選擇上面新建的 src 文件，將會看到以下兩處變化：

code-img1

code-img2

你會發現你的拓展插件已經添加到右上角了，點擊右鍵時出現的第一行爲 name ，點擊跳轉連接爲 homepage_url 。

接下來咱們爲咱們的拓展插件添加圖標，在 src 中新建一個名爲 icon.png 的圖標，而後修改 mainfest.json 文件：

// mainfest.json
{
...
   "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
...
}
複製代碼

點擊插件開發的更新圖標，咱們能夠看到圖標已經加上了：

code-img3

code-img4

這裏會發現，右上角的圖標爲何是置灰的呢？這裏就須要聊到 browser_action 和 page_action 。[參考文檔]

  • browser_action ：若是你想讓圖標一直可見，那麼配置該項
  • page_action ：若是你不想讓圖標一直可見，那麼配置該項

爲了讓圖標一直可見，咱們來修改下 mainfest.json ：

{
...
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "McChen"
  },
...
}
複製代碼

此時再次更新查看效果：

code-img5

到這裏，基礎的配置開發已經完成了，接下來就是功能部分。

Ⅲ.內容菜單導航開發

[參考文檔]

內容導航菜單我用在兩個地方：鼠標點擊右上角圖標的 Popup 和網頁中按鼠標右鍵出現的菜單。

先看看鼠標點擊右上角圖標 Popup 的，給 mainfest.json 增長 default_popup 就是 popup 展現的頁面內容了。

{
...
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "McChen",
    "default_popup": "popup.html"
  },
...
}
複製代碼

新建一個 popup.html 文件，內容以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>McChen</title>
  <meta charset="utf-8"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css"> #McChen-container { padding: 4px 0; margin: 0; width: 80px; user-select: none; overflow: hidden; text-align: center; background-color: #f6f8fc;} .McChen-item_a { position: relative; display: block; font-size: 14px; color: #283039; transition: all 0.2s; line-height: 28px; text-decoration: none; white-space: nowrap; text-indent: 16px;} .McChen-item_a:before { position: absolute; top: 50%; margin-top: -14px; font-size: 16px; line-height: 28px;} .McChen-item_a:after { position: absolute; top: 50%; margin-top: -14px; font-size: 16px; line-height: 28px;} .McChen-item_a + .McChen-item_a { border-top: 1px solid #f0f2f5;} .McChen-item_a:hover { color: #0074ff;} .McChen-item_a:nth-child(1):before { content: '·'; left: 4px;} .McChen-item_a:nth-child(2):before { content: '··'; left: 2px;} .McChen-item_a:nth-child(3):before { content: '···'; left: 0;} .McChen-item_a:nth-child(4):before { content: '····'; left: -2px;} .McChen-item_a:nth-child(5):before { content: '····'; margin-top: -16px; left: -2px;} .McChen-item_a:nth-child(5):after { content: '·'; margin-top: -12px; left: -2px;} .McChen-item_a:nth-child(6):before { content: '····'; margin-top: -16px; left: -2px;} .McChen-item_a:nth-child(6):after { content: '··'; margin-top: -12px; left: -2px;} .McChen-item_a:nth-child(7):before { content: '····'; margin-top: -16px; left: -2px;} .McChen-item_a:nth-child(7):after { content: '···'; margin-top: -12px; left: -2px;} </style>
</head>
<body id="McChen-container">
  <a class="McChen-item_a" href="https://chenjiahao.xyz" target="_blank">主頁</a>
  <a class="McChen-item_a" href="https://chenjiahao.xyz/blog/#/archives" target="_blank">博客</a>
  <a class="McChen-item_a" href="https://chenjiahao.xyz/blog/#/labels" target="_blank">標籤</a>
  <a class="McChen-item_a" href="https://chenjiahao.xyz/blog/#/links" target="_blank">友鏈</a>
  <a class="McChen-item_a" href="https://chenjiahao.xyz/blog/#/about" target="_blank">關於</a>
  <a class="McChen-item_a" href="https://chenjiahao.xyz/blog/#/board" target="_blank">留言</a>
  <a class="McChen-item_a" href="https://chenjiahao.xyz/blog/#/search" target="_blank">搜索</a>
</body>
</html>
複製代碼

咱們更新後來看看效果，點擊右上角圖標將會看到以下的內容彈窗：

code-img6

下一步，咱們來實如今網頁中按鼠標右鍵出現的菜單。

首先，你必需要配置對應的權限才能使用這個 API ，還須要配置修改 mainfest.json 內容：

[權限參考文檔]

...
  "permissions": [
    "contextMenus"
  ]
...
複製代碼

接下來，須要經過 API 調用去建立對應的菜單，這裏須要用到常駐在後臺運行的 js 才行，因此還須要修改 mainfest.json 文件：

...
  "background": {
    "scripts": [
      "background.js"
    ]
  },
...
複製代碼

而後咱們新建一個 backgroud.js 文件，文件內容以下：

[參考文檔]

chrome.contextMenus.create({
	id: 'McChen',
	title: 'McChen',
	contexts: ['page', 'frame', 'selection', 'link', 'editable', 'image', 'video', 'audio', 'page_action']
});
chrome.contextMenus.create({
	id: 'home',
	title: '主頁',
	parentId: 'McChen', // 右鍵菜單項的父菜單項ID。指定父菜單項將會使此菜單項成爲父菜單項的子菜單
	contexts: ['page', 'frame', 'selection', 'link', 'editable', 'image', 'video', 'audio', 'page_action']
});
chrome.contextMenus.create({
	id: 'archives',
	title: '博客',
	parentId: 'McChen', // 右鍵菜單項的父菜單項ID。指定父菜單項將會使此菜單項成爲父菜單項的子菜單
	contexts: ['page', 'frame', 'selection', 'link', 'editable', 'image', 'video', 'audio', 'page_action']
});
chrome.contextMenus.create({
	id: 'labels',
	title: '標籤',
	parentId: 'McChen', // 右鍵菜單項的父菜單項ID。指定父菜單項將會使此菜單項成爲父菜單項的子菜單
	contexts: ['page', 'frame', 'selection', 'link', 'editable', 'image', 'video', 'audio', 'page_action']
});
chrome.contextMenus.create({
	id: 'links',
	title: '友鏈',
	parentId: 'McChen', // 右鍵菜單項的父菜單項ID。指定父菜單項將會使此菜單項成爲父菜單項的子菜單
	contexts: ['page', 'frame', 'selection', 'link', 'editable', 'image', 'video', 'audio', 'page_action']
});
chrome.contextMenus.create({
	id: 'about',
	title: '關於',
	parentId: 'McChen', // 右鍵菜單項的父菜單項ID。指定父菜單項將會使此菜單項成爲父菜單項的子菜單
	contexts: ['page', 'frame', 'selection', 'link', 'editable', 'image', 'video', 'audio', 'page_action']
});
chrome.contextMenus.create({
	id: 'board',
	title: '留言',
	parentId: 'McChen', // 右鍵菜單項的父菜單項ID。指定父菜單項將會使此菜單項成爲父菜單項的子菜單
	contexts: ['page', 'frame', 'selection', 'link', 'editable', 'image', 'video', 'audio', 'page_action']
});
chrome.contextMenus.create({
	id: 'search',
	title: '搜索',
	parentId: 'McChen', // 右鍵菜單項的父菜單項ID。指定父菜單項將會使此菜單項成爲父菜單項的子菜單
	contexts: ['page', 'frame', 'selection', 'link', 'editable', 'image', 'video', 'audio', 'page_action']
});
// 監聽菜單點擊事件
chrome.contextMenus.onClicked.addListener(function (info, tab) {
	if (info.menuItemId === 'home') {
		chrome.tabs.create({url: 'https://chenjiahao.xyz'});
	} else {
		chrome.tabs.create({url: 'https://chenjiahao.xyz/blog/#/' + info.menuItemId});
	}
})
複製代碼

更新後，點擊鼠標右鍵將查看到以下內容：

code-img7

至此，內容菜單導航功能已所有完成。

Ⅳ.地址欄搜索開發

[參考文檔]

地址欄搜索主要是經過 Omnibox 來實現的，咱們首先須要設置關鍵字，在這裏我設置成 'mc' ，修改 mainfest.json 文件：

...
{
  "omnibox": { "keyword" : "mc" }
}
...
複製代碼

更新後，咱們在地址欄輸入 mc 按 Tab 或者 Space 鍵可看到以下內容：

code-img8

接下來咱們進行接口開發，因爲須要進行接口調用，因此須要配置容許請求的地址，修改 mainfest.json 文件：

...
{
  "permissions": [
    "contextMenus",
    // 容許請求所有https
    "https://*/"
  ],
}
...
複製代碼

而後修改 background.js 文件內容：

...
let timer = '';
chrome.omnibox.onInputChanged.addListener((text, suggest) => {
	if (timer) {
		clearTimeout(timer)
		timer = ''
	} else {
		timer = setTimeout(() => {
			if (text.length > 1) {
				const xhr = new XMLHttpRequest();
				xhr.open("POST", "https://api.artfe.club/transfer/github", true);
				xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
				xhr.onreadystatechange = function () {
					if (xhr.readyState === 4) {
						const list = JSON.parse(xhr.responseText).data.search.nodes;
						if (list.length) {
							suggest(list.map(_ => ({content: 'ISSUE_NUMBER:' + _.number, description: '文章 - ' + _.title})))
						} else {
							suggest([
								{content: 'none', description: '無相關結果'}
							])
						}
					}
				};
				xhr.send('query=' + query);
			} else {
				suggest([
					{content: 'none', description: '查詢中，請稍後...'}
				])
			}
		}, 300)
	}
});

// 當選中建議內容時觸發
chrome.omnibox.onInputEntered.addListener((text) => {
	if (text.startsWith('ISSUE_NUMBER:')) {
		const number = text.substr(13)
		chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
			if (tabs.length) {
				const tabId = tabs[0].id;
				const url = 'https://chenjiahao.xyz/blog/#/archives/' + number;
				chrome.tabs.update(tabId, {url: url});
			}
		});
	}
});
...
複製代碼

這裏有幾個地方須要注意一下：

  1. onInputChanged 這方法觸發頻率高，和正常開發同樣，須要作一次函數防抖，要否則請求頻率會特別高。
  2. 這裏面不容許寫 Promise ，因此我使用的 XMLHttpRequest
  3. suggest 中 content 和 description 字段都不容許爲空，可是在事件回調裏須要識別，因此我這裏特地增長了一個前綴 ISSUE_NUMBER:

更新後，在地址欄輸入 mc 按 Tab 後，輸入 乾貨 ，將會看到以下內容：

code-img9

至此，地址欄搜索功能已所有完成。

Ⅴ.新文章推送開發

[存儲參考文檔]

[推送參考文檔]

新文章推送功能，首先咱們須要知道以前的最新文章是哪篇，才能作到精準推送，因此這裏須要用到 Storage ，也就是存儲功能。存下最新文章的 ID ，輪詢最新文章，若是有更新，則存下最新文章的 ID 而且調用推送的 API 。因此，咱們須要先增長權限配置，修改 mainfest.json 文件：

...
  "permissions": [
    "storage",
    "contextMenus",
    "notifications",
    "https://*/"
  ],
...
複製代碼

而後修改 'background.js' 文件內容：

...
getLatestNumber();
chrome.storage.sync.get({LATEST_TIMER: 0}, function (items) {
	if (items.LATEST_TIMER) {
		clearInterval(items.LATEST_TIMER)
	}
	const LATEST_TIMER = setInterval(() => {
		getLatestNumber()
	}, 1000 * 60 * 60 *24)
	chrome.storage.sync.set({LATEST_TIMER: LATEST_TIMER})
});
function getLatestNumber () {
	const query = `query { repository(owner: "ChenJiaH", name: "blog") { issues(orderBy: {field: CREATED_AT, direction: DESC}, labels: null, first: 1, after: null) { nodes { title number } } } }`;
	const xhr = new XMLHttpRequest();
	xhr.open("POST", "https://api.artfe.club/transfer/github", true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4) {
			const list = JSON.parse(xhr.responseText).data.repository.issues.nodes;
			if (list.length) {
				const title = list[0].title;
				const ISSUE_NUMBER = list[0].number;
				chrome.storage.sync.get({ISSUE_NUMBER: 0}, function(items) {
					if (items.ISSUE_NUMBER !== ISSUE_NUMBER) {
						chrome.storage.sync.set({ISSUE_NUMBER: ISSUE_NUMBER}, function() {
							chrome.notifications.create('McChen', {
								type: 'basic',
								iconUrl: 'icon.png',
								title: '新文章發佈通知',
								message: title
							});
							chrome.notifications.onClicked.addListener(function (notificationId) {
								if (notificationId === 'McChen') {
									chrome.tabs.create({url: 'https://chenjiahao.xyz/blog/#/archives/' + ISSUE_NUMBER});
								}
							})
						});
					}
				});
			}
		}
	};
	xhr.send('query=' + query);
}
...
複製代碼

注意：因爲是後臺常駐，因此須要增長輪詢來判斷是否有更新，我這裏設置的是一天一次

更新後，第一次咱們會看到瀏覽器右下角會有推送消息以下：

code-img10

至此，新文章推送功能也已經開發完成了。

打包發佈

在拓展程序頁面點擊打包擴展程序，選擇 src 做爲根目錄打包便可。

將會生成 src.crx 和 src.pem 兩個文件， .crx 文件就是你提交到拓展商店的資源， .pem 文件是私鑰，下次進行打包更新時須要使用。

因爲打包須要 5$ ，因此我這裏就不作演示了，須要的能夠自行嘗試，[發佈地址]

結尾

一個基於動態博客的 Chrome 拓展插件 就開發完了，歡迎下載使用。

若有疑問或不對之處，歡迎留言。

（完）

本文爲原創文章，可能會更新知識點及修正錯誤，所以轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗 若是能給您帶去些許幫助，歡迎 ⭐️star 或 ✏️ fork (轉載請註明出處：chenjiahao.xyz)

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程