使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解

更新時(shí)間：2019年06月21日 15:04:56 作者：瘋狂的技術(shù)宅

這篇文章主要介紹了使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解，瀏覽器擴(kuò)展程序是可以修改和增強(qiáng) Web 瀏覽器功能的小程序。它們可用于各種任務(wù)，例如阻止廣告，管理密碼，組織標(biāo)簽，改變網(wǎng)頁(yè)的外觀和行為等等。,需要的朋友可以參考下

前言

瀏覽器擴(kuò)展程序是可以修改和增強(qiáng) Web 瀏覽器功能的小程序。它們可用于各種任務(wù)，例如阻止廣告，管理密碼，組織標(biāo)簽，改變網(wǎng)頁(yè)的外觀和行為等等。

好消息是瀏覽器擴(kuò)展并不難寫(xiě)?？梢杂媚阋呀?jīng)熟悉的 Web 技術(shù)（HTML、CSS 和 JavaScript）創(chuàng)建 —— 就像普通網(wǎng)頁(yè)一樣。但是與網(wǎng)頁(yè)不同的是，擴(kuò)展程序可以訪(fǎng)問(wèn)許多特定于瀏覽器的 API，這才是有趣的地方。

在本教程中，我將向你展示如何為 Chrome 構(gòu)建一個(gè)能夠改變新標(biāo)簽頁(yè)行為的簡(jiǎn)單擴(kuò)展。這個(gè)擴(kuò)展程序的 JavaScript 部分，我將使用 Vue.js 框架，因?yàn)樗鼘⒃试S我們快速啟動(dòng)并運(yùn)行，而且用 vue 工作是很有趣的。

本教程的代碼可以在GitHub上找到

Chrome 擴(kuò)展程序的基礎(chǔ)知識(shí)

Chrome擴(kuò)展程序的核心部分是 manifest 文件和后臺(tái)腳本。manifest 文件采用JSON格式，提供有關(guān)擴(kuò)展的重要信息，例如其版本、資源或所需的權(quán)限。后臺(tái)腳本允許擴(kuò)展對(duì)特定的瀏覽器事件做出反應(yīng)，例如創(chuàng)建新選項(xiàng)卡。

為了演示這些概念，讓我們先寫(xiě)一個(gè)“Hello，World！” Chrome 擴(kuò)展。

創(chuàng)建一個(gè)名為 hello-world-chrome 的新文件夾和兩個(gè)文件：manifest.json 和 background.js：

mkdir hello-world-chrome
cd hello-world-chrome
touch manifest.json background.js

打開(kāi) manifest.json 并添加以下代碼：

{
"name": "Hello World Extension",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
}
}

name、version 和 manifest_version 都是必填字段。 name 和 version 字段可以是你想要的任何內(nèi)容; manifest version 應(yīng)設(shè)置為2（從Chrome 18開(kāi)始）。

background 允許我們注冊(cè)一個(gè)后臺(tái)腳本，在scripts 后面的數(shù)組中列出。除非擴(kuò)展需要用 chrome.webRequest API來(lái)阻止或修改網(wǎng)絡(luò)請(qǐng)求，否則 persistent 鍵應(yīng)設(shè)置為 false。

將以下代碼添加到 background.js ，使瀏覽器在安裝擴(kuò)展時(shí)彈出出 hello 對(duì)話(huà)框：

chrome.runtime.onInstalled.addListener(() => {
alert('Hello, World!');
});

最后安裝擴(kuò)展程序。打開(kāi) Chrome 并在地址欄中輸入 chrome://extensions/。你應(yīng)該看到一個(gè)顯示已安裝擴(kuò)展程序的頁(yè)面。
由于我們要從文件（而不是Chrome網(wǎng)上應(yīng)用店）安裝自己的擴(kuò)展程序，因此需要使用頁(yè)面右上角的切換按鈕來(lái)激活開(kāi)發(fā)者模式。

這應(yīng)該添加一個(gè)額外的菜單欄，其中包含 Load unpacked選項(xiàng)。單擊此按鈕并選擇你之前創(chuàng)建的 hello-world-chrome 文件夾。單擊打開(kāi)，應(yīng)該能夠看到已安裝的擴(kuò)展，并彈出“Hello，World！”窗口。

恭喜！你剛剛制作了一個(gè) Chrome 擴(kuò)展程序。

覆蓋 Chrome 的新標(biāo)簽頁(yè)

為了在打開(kāi)新選項(xiàng)卡時(shí)迎接我們的是自己的擴(kuò)展程序?？梢酝ㄟ^(guò)使用 Override Pages API 來(lái)完成此操作。

注意：在你取得進(jìn)展之前，請(qǐng)務(wù)必停用其他能夠覆蓋 Chrome 新標(biāo)簽頁(yè)的擴(kuò)展程序。一次只允許一個(gè)擴(kuò)展改變這種行為。

首先創(chuàng)建一個(gè)要顯示的頁(yè)面，而不是新的標(biāo)簽頁(yè)。我們稱(chēng)之為 tab.html。它應(yīng)該與清單文件和后臺(tái)腳本位于同一文件夾中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My New Tab Page!</title>
</head>
<body>
<h1>My New Tab Page!</h1>
<p>You can put any content here you like</p>
</body>
</html>

接下來(lái)需要讓擴(kuò)展知道頁(yè)面的存在?？梢酝ㄟ^(guò)在清單文件中指定 chrome_url_overrides 來(lái)實(shí)現(xiàn)，如下所示：

"chrome_url_overrides": {
"newtab": "tab.html"
}

最后，你需要重新加載擴(kuò)展才能使更改生效。你可以通過(guò)在 Chrome 的擴(kuò)展程序頁(yè)面上單擊 Hello World 擴(kuò)展程序的 reload 圖標(biāo)來(lái)執(zhí)行此操作。

現(xiàn)在，當(dāng)你打開(kāi)新標(biāo)簽頁(yè)時(shí)，你的自定義消息會(huì)出現(xiàn)。

將Vue添加到擴(kuò)展

現(xiàn)在我們有一個(gè)非?；镜臄U(kuò)展，接下來(lái)要實(shí)現(xiàn)剩下的需功能了。當(dāng)用戶(hù)打開(kāi)新標(biāo)簽頁(yè)時(shí)，我希望擴(kuò)展能夠：

從精彩的笑話(huà)網(wǎng)站 icanhazdadjoke.com 獲取一個(gè)笑話(huà)。
以良好的格式向用戶(hù)顯示該笑話(huà)。
顯示用戶(hù)喜歡該笑話(huà)的按鈕。這樣可以把笑話(huà)保存到 chrome.storage。
顯示一個(gè)按鈕，供用戶(hù)查看已收藏的笑話(huà)。

當(dāng)然你也可以用純 JavaScript 或像 jQuery 這樣的庫(kù)來(lái)完成所有這些 —— 你開(kāi)心就好！

但是出于本教程的目的，我將用 Vue 和令人敬畏的vue-web-extension 樣板來(lái)實(shí)現(xiàn)此功能。

用 Vue 可以讓我又快又好地編寫(xiě)更有條理的代碼。正如我們所看到的，樣板文件提供了幾個(gè)腳本，可以在構(gòu)建 Chrome 擴(kuò)展程序時(shí)解決一些痛苦的常見(jiàn)任務(wù)（例如：每當(dāng)你進(jìn)行更改時(shí)都必須重新加載擴(kuò)展程序）。

vue-web-extension-boilerplate

本節(jié)假定你的計(jì)算機(jī)上安裝了 Node 和 npm。如果不是這樣，你可以到 nodejs.org/en/ 獲取相關(guān)二進(jìn)制文件，或者你可以使用版本管理器。我建議使用版本管理器。

我們還需要安裝 Vue CLI 和 @vue/cli-init package：

npm install -g @vue/cli
npm install -g @vue/cli-init

完成后，讓我們得到樣板的副本：

vue init kocal/vue-web-extension new-tab-page

這將打開(kāi)一個(gè)向?qū)?，?xún)問(wèn)你一堆問(wèn)題。為了保證本教程的重點(diǎn)，我把回答列出來(lái)：

? Project name new-tab-page
? Project description A Vue.js web extension
? Author James Hibbard <jim@example.com>
? License MIT
? Use Mozilla's web-extension polyfill? No
? Provide an options page? No
? Install vue-router? No
? Install vuex? No
? Install axios? Yes
? Install ESLint? No
? Install Prettier? No
? Automatically install dependencies? npm

你可以根據(jù)自己的喜好調(diào)整答案，但是你一定要安裝 axios。我們會(huì)用它來(lái)獲取笑話(huà)。

接下來(lái)，切換到項(xiàng)目目錄并安裝依賴(lài)項(xiàng)：

cd new-tab-page
npm install

然后就可以用樣板提供的腳本構(gòu)建我們的新擴(kuò)展了：

npm run watch:dev

這會(huì)將擴(kuò)展構(gòu)建到項(xiàng)目根目錄中的 dist 文件夾中，來(lái)進(jìn)行開(kāi)發(fā)并監(jiān)視更改。

要將擴(kuò)展程序添加到 Chrome，請(qǐng)執(zhí)行上述相同的步驟，要選擇 dist 文件夾作為擴(kuò)展程序目錄。如果一切按計(jì)劃進(jìn)行，那么當(dāng)擴(kuò)展程序初始化時(shí)，你應(yīng)該看到“Hello world！”消息。

項(xiàng)目設(shè)置

讓我們花一點(diǎn)時(shí)間來(lái)看看樣板給了我們些什么。當(dāng)前文件夾結(jié)構(gòu)應(yīng)如下所示：

.
├── dist
│ └── <the built extension>
├── node_modules
│ └── <one or two files and folders>
├── package.json
├── package-lock.json
├── scripts
│ ├── build-zip.js
│ └── remove-evals.js
├── src
│ ├── background.js
│ ├── icons
│ │ ├── icon_128.png
│ │ ├── icon_48.png
│ │ └── icon.xcf
│ ├── manifest.json
│ └── popup
│ ├── App.vue
│ ├── popup.html
│ └── popup.js
└── webpack.config.js

在項(xiàng)目根目錄中可以看到，樣板文件正在使用 webpack。這很好，因?yàn)檫@為我們的后臺(tái)腳本提供了 Hot Module Reloading。

src文件夾包含我們將用于擴(kuò)展的所有文件。manifest 文件和 background.js 對(duì)于我們來(lái)說(shuō)是熟悉的，但也要注意包含Vue 組件的 popup 文件夾。當(dāng)樣板文件將擴(kuò)展構(gòu)建到 dist 文件夾中時(shí)，它將通過(guò)vue-loader 管理所有 .vue 文件并輸出一個(gè)瀏覽器可以理解的 JavaScript 包。

在 src 文件夾中還有一個(gè) icons 文件夾。如果你看一眼 Chrome 的工具欄，會(huì)看到我們的擴(kuò)展程序的新圖標(biāo)（也被稱(chēng)為 browser action）。這就是從此文件夾中拿到的。如果單擊它，你應(yīng)該會(huì)看到一個(gè)彈出窗口，顯示“Hello world！” 這是由 popup/App.vue 創(chuàng)建的。

最后，請(qǐng)注 scripts 文件夾的兩個(gè)腳本：一個(gè)用于刪除 eval 用法以符合 Chrome Web Store 的內(nèi)容安全策略，另一個(gè)用于當(dāng)你要把擴(kuò)展上傳到Chrome Web Store時(shí)將其打包到 .zip 文件中，。

在 package.json 文件中還聲明了各種腳本。我們將用 npm run watch:dev 來(lái)開(kāi)發(fā)擴(kuò)展，然后使用 npm run build-zip 生成一個(gè)ZIP文件以上傳到 Chrome Web Store。

在新標(biāo)簽頁(yè)中使用 Vue 組件

首先從 background.js 中刪除煩人的 alert 語(yǔ)句。

在 src 文件夾中創(chuàng)建一個(gè)新的 tab 文件夾來(lái)存放新標(biāo)簽頁(yè)的代碼。我們將在這個(gè)新文件夾中添加三個(gè)文件 —— App.vue，tab.html， tab.js：

mkdir src/tab
touch src/tab/{App.vue,tab.html,tab.js}

打開(kāi) tab.html 并添加以下內(nèi)容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New Tab Page</title>
<link rel="stylesheet" href="tab.css" rel="external nofollow" >
</head>
<body>
<div id="app"></div>
<script src="tab.js"></script>
</body>
</html>

這里沒(méi)什么特別的。這是一個(gè)簡(jiǎn)單的 HTML 頁(yè)面，它將保存我們的 Vue 實(shí)例。

接下來(lái)在 tab.js 中添加：

import Vue from 'vue';
import App from './App';
new Vue({
el: '#app',
render: h => h(App)
});

在這里導(dǎo)入 Vue，用它為元素傳遞一個(gè)選擇器，然后告訴它渲染 App 組件。

最后在 App.vue 中寫(xiě)如下代碼：

<template>
<p>{{ message }}</p>
</template>
<script>
export default {
data () {
return {
message: "My new tab page"
}
}
}
</script>
<style scoped>
p {
font-size: 20px;
}
</style>

在使用這個(gè)新標(biāo)簽頁(yè)之前，我們需要更新 manifest 文件：

{
"name":"new-tab-page",
...
"chrome_url_overrides": {
"newtab": "tab/tab.html"
}
}

為了使它們可用于擴(kuò)展，我們還需要讓樣板編譯我們的文件并復(fù)制到 dist 文件夾。

像下面這樣修改 webpack.config.js，更新entry和plugins鍵：

entry: {
'background': './background.js',
'popup/popup': './popup/popup.js',
'tab/tab': './tab/tab.js'
}
plugins: [
...
new CopyWebpackPlugin([
{ from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
{ from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
{ from: 'tab/tab.html', to: 'tab/tab.html', transform: transformHtml },
...
})

你需要重新啟動(dòng) npm run watch:dev 任務(wù)才能使這些更改生效。完成此操作后，重新加載擴(kuò)展程序并打開(kāi)新選項(xiàng)卡。你應(yīng)該會(huì)看到“My new tab page”。

獲取并顯示笑話(huà)

好的，我們已經(jīng)覆蓋了 Chrome 的新標(biāo)簽頁(yè)，并且將其替換為了 mini Vue app。但是我們要做的不僅僅是顯示一條消息。

更改 src/tab/App.vue 中的模板部分如下：

<template>
<div>
<div v-if="loading">
<p>Loading...</p>
</div>
<div v-else>
<p class="joke">{{ joke }}</p>
</div>
</div>
</template>

將 <script> 部分更改為如下代碼：

<script>
import axios from 'axios';
export default {
data () {
return {
loading: true,
joke: "",
}
},
mounted() {
axios.get(
"https://icanhazdadjoke.com/",
{ 'headers': { 'Accept': 'application/json' } }
)
.then(res => {
this.joke = res.data.joke
this.loading = false;
});
}
}
</script>

最后，將 <style> 部分更改為如下代碼：

<style>
body {
height: 98vh;
text-align: center;
color: #353638;
font-size: 22px;
line-height: 30px;
font-family: Merriweather,Georgia,serif;
background-size: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.joke {
max-width: 800px;
}
</style>

如果你正在運(yùn)行 npm run watch:dev 任務(wù)，則擴(kuò)展程序會(huì)自動(dòng)重新加載，并且每當(dāng)你打開(kāi)新標(biāo)簽頁(yè)時(shí)都會(huì)看到一個(gè)笑話(huà)。

接下來(lái)花點(diǎn)時(shí)間來(lái)了解一下自己都做了些什么。

在模板中，我們使用 v-if 塊來(lái)顯示加載消息或笑話(huà)，具體取決于 loading 的狀態(tài)。最初它被設(shè)置為 true（顯示加載消息），然后我們的腳本將觸發(fā) Ajax 請(qǐng)求來(lái)檢索笑話(huà)。一旦 Ajax 請(qǐng)求完成，loading 屬性將被設(shè)置為 false，導(dǎo)致組件被重新渲染并顯示笑話(huà)。

在 <script> 部分，我們導(dǎo)入了 axios，然后聲明了幾個(gè)數(shù)據(jù)屬性——前面提到的 loading 屬性和一個(gè) joke 屬性來(lái)保存這個(gè)笑話(huà)。然后使用了 mount 生命周期鉤子，一旦我們的 Vue 實(shí)例被掛載就會(huì)觸發(fā)，向 joke API 發(fā)出 Ajax 請(qǐng)求。請(qǐng)求完成后，更新兩個(gè)數(shù)據(jù)屬性使組件重新渲染。

到目前為止還挺好。

將笑話(huà)持持久化到 Chrome Storage

接下來(lái)，添加一些能夠讓用戶(hù)喜歡一個(gè)笑話(huà)和列出喜歡的笑話(huà)列表的按鈕。由于我們將使用來(lái)保存這些笑話(huà)，所以可能需要添加第三個(gè)按鈕來(lái)刪除 storage 中的笑話(huà)。
將按鈕添加到 v-else 塊：

<div v-else>
<p class="joke">{{ joke }}</p>
<button @click="likeJoke" :disabled="likeButtonDisabled">Like Joke</button>
<button @click="logJokes" class="btn">Log Jokes</button>
<button @click="clearStorage" class="btn">Clear Storage</button>
</div>

沒(méi)有什么令人興奮的東西了。請(qǐng)注意我們將類(lèi)似按鈕的 disabled 屬性綁定到 Vue 實(shí)例上的數(shù)據(jù)屬性來(lái)確定其狀態(tài)。這是因?yàn)橛脩?hù)不應(yīng)該多次喜歡一個(gè)笑話(huà)。

接下來(lái)，將 click handler 和 Like Button Disabled 添加到腳本部分：

export default {
data () {
return {
loading: true,
joke: "",
likeButtonDisabled: false
}
},
methods: {
likeJoke(){
chrome.storage.local.get("jokes", (res) => {
if(!res.jokes) res.jokes = [];
res.jokes.push(this.joke)
chrome.storage.local.set(res);
this.likeButtonDisabled = true;
});
},
logJokes(){
chrome.storage.local.get("jokes", (res) => {
if(res.jokes) res.jokes.map(joke => console.log(joke))
});
},
clearStorage(){
chrome.storage.local.clear();
}
},
mounted() { ... }
}

在這里，我們聲明了三個(gè)新方法來(lái)處理這三個(gè)新按鈕。

likeJoke 方法在 Chrome 的存儲(chǔ)中查找 jokes 屬性。如果它不存在（也就是說(shuō)，用戶(hù)尚未喜歡一個(gè)笑話(huà)），會(huì)將其初始化為空數(shù)組。然后它將當(dāng)前的笑話(huà)推送到此數(shù)組并將其保存到 storage。最后，將 likeButtonDisabled 數(shù)據(jù)屬性設(shè)置為 true，并禁用 like 按鈕。

logJokes 方法還在 Chrome storage 中查找 jokes 屬性。如果找到了，會(huì)遍歷其所有條目并將它們輸出到控制臺(tái)。

clearStorage 方法負(fù)責(zé)清除數(shù)據(jù)。

繼續(xù)在擴(kuò)展中調(diào)整這個(gè)新功能，直到自己滿(mǎn)意。

為擴(kuò)展做一些美化

它能夠工作了，但是按鈕是很丑，頁(yè)面也有點(diǎn)簡(jiǎn)單。下面就要給擴(kuò)展做一些潤(rùn)色。

下一步，安裝 vue-awesome 庫(kù)。它能夠使我們?cè)陧?yè)面上使用 Font Awesome 圖標(biāo)，并使這些按鈕看起來(lái)更漂亮一些：

npm install vue-awesome

在 src/tab/tab.js 中對(duì)庫(kù)進(jìn)行注冊(cè)：

import Vue from 'vue';
import App from './App';
import "vue-awesome/icons";
import Icon from "vue-awesome/components/Icon";
Vue.component("icon", Icon);
new Vue({
el: '#app',
render: h => h(App)
});

修改模板：

<template>
<div>
<div v-if="loading" class="centered">
<p>Loading...</p>
</div>
<div v-else>
<p class="joke">{{ joke }}</p>
<div class="button-container">
<button @click="likeJoke" :disabled="likeButtonDisabled" class="btn"><icon name="thumbs-up"></icon></button>
<button @click="logJokes" class="btn"><icon name="list"></icon></button>
<button @click="clearStorage" class="btn"><icon name="trash"></icon></button>
</div>
</div>
</div>
</template>

最后，讓我們?yōu)榘粹o添加更多樣式，并添加一張圖片：

<style>
body {
height: 98vh;
text-align: center;
color: #353638;
font-size: 22px;
line-height: 30px;
font-family: Merriweather,Georgia,serif;
background: url("https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/12/1544189726troll-dad.png") no-repeat 1% 99%;
background-size: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.joke {
max-width: 800px;
}
.button-container {
position: absolute;
right: 0px;
top: calc(50% - 74px);
}
.btn {
background-color: #D8D8D8;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
display: block;
margin-bottom: 5px;
width: 50px;
}
.btn:hover {
background-color: #C8C8C8;
}
.btn:disabled {
background-color: #909090;
}
</style>

重新加載擴(kuò)展并打開(kāi)一個(gè)新標(biāo)簽，你應(yīng)該看到這樣的東西。

將擴(kuò)展程序上傳到 Chrome Web Store

如果想讓其他人也可以使用你的擴(kuò)展程序，可以通過(guò)Chrome Web Store 做到。

首先你需要有一個(gè) Google 帳戶(hù)，可以用該帳戶(hù)登錄 Developer Dashboard 。系統(tǒng)會(huì)提示你輸入開(kāi)發(fā)人員詳細(xì)信息，在發(fā)布第一個(gè)應(yīng)用程序之前，你必須支付 5 美元的開(kāi)發(fā)人員注冊(cè)費(fèi)（通過(guò)信用卡）。

接下來(lái)，你需要為自己的應(yīng)用創(chuàng)建一個(gè) ZIP 文件。你可以通過(guò) npm run build-zip 在本地執(zhí)行這項(xiàng)操作。這會(huì)在項(xiàng)目根目錄中創(chuàng)建一個(gè)名為 dist-zip 的文件夾，其中包含準(zhǔn)備上傳到 Web Store 的 ZIP 文件。

對(duì)于簡(jiǎn)單的小擴(kuò)展，這就夠了。但是，在你上傳自己的擴(kuò)展之前，請(qǐng)務(wù)必閱讀官方 Publish in the Chrome Web Store 指南。

總結(jié)

在本教程中，我重點(diǎn)介紹了 Chrome 擴(kuò)展程序的主要部分，并展示了如何用在 Vue.js 中 vue-web-extension 樣板構(gòu)建擴(kuò)展程序，最后講解了如何將擴(kuò)展上傳到 Web Store。

希望你喜歡本教程，并用它指導(dǎo)你始構(gòu)建自己的 Chrome 擴(kuò)展。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: