前言

成都創(chuàng)新互聯(lián)公司于2013年開始，先為鄂爾多斯等服務建站，鄂爾多斯等地企業(yè)，進行企業(yè)商務咨詢服務。為鄂爾多斯企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

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

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

在本教程中，我將向你展示如何為 Chrome 構(gòu)建一個能夠改變新標簽頁行為的簡單擴展。這個擴展程序的 JavaScript 部分，我將使用 Vue.js 框架，因為它將允許我們快速啟動并運行，而且用 vue 工作是很有趣的。

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

Chrome 擴展程序的基礎(chǔ)知識

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

為了演示這些概念，讓我們先寫一個“Hello，World！” Chrome 擴展。

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

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

打開 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 應設置為2（從Chrome 18開始）。

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

將以下代碼添加到 background.js ，使瀏覽器在安裝擴展時彈出出 hello 對話框：

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

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

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

恭喜！你剛剛制作了一個 Chrome 擴展程序。

覆蓋 Chrome 的新標簽頁

為了在打開新選項卡時迎接我們的是自己的擴展程序?？梢酝ㄟ^使用 Override Pages API 來完成此操作。

注意：在你取得進展之前，請務必停用其他能夠覆蓋 Chrome 新標簽頁的擴展程序。一次只允許一個擴展改變這種行為。

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

My New Tab Page!
You can put any content here you like

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

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

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

現(xiàn)在，當你打開新標簽頁時，你的自定義消息會出現(xiàn)。

將Vue添加到擴展

現(xiàn)在我們有一個非常基本的擴展，接下來要實現(xiàn)剩下的需功能了。當用戶打開新標簽頁時，我希望擴展能夠：

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

當然你也可以用純 JavaScript 或像 jQuery 這樣的庫來完成所有這些 —— 你開心就好！

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

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

vue-web-extension-boilerplate

本節(jié)假定你的計算機上安裝了 Node 和 npm。如果不是這樣，你可以到 nodejs.org/en/ 獲取相關(guā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

這將打開一個向?qū)?，詢問你一堆問題。為了保證本教程的重點，我把回答列出來：

? Project name new-tab-page
? Project description A Vue.js web extension
? Author James Hibbard 
? 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。我們會用它來獲取笑話。

接下來，切換到項目目錄并安裝依賴項：

cd new-tab-page
npm install

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

npm run watch:dev

這會將擴展構(gòu)建到項目根目錄中的 dist 文件夾中，來進行開發(fā)并監(jiān)視更改。

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

項目設置

讓我們花一點時間來看看樣板給了我們些什么。當前文件夾結(jié)構(gòu)應如下所示：

.
├── dist
│ └── 
├── node_modules
│ └── 
├── 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

在項目根目錄中可以看到，樣板文件正在使用 webpack。這很好，因為這為我們的后臺腳本提供了 Hot Module Reloading。

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

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

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

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

在新標簽頁中使用 Vue 組件

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

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

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

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

這里沒什么特別的。這是一個簡單的 HTML 頁面，它將保存我們的 Vue 實例。

接下來在 tab.js 中添加：

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

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

最后在 App.vue 中寫如下代碼：

在使用這個新標簽頁之前，我們需要更新 manifest 文件：

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

為了使它們可用于擴展，我們還需要讓樣板編譯我們的文件并復制到 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 },
...
})

你需要重新啟動 npm run watch:dev 任務才能使這些更改生效。完成此操作后，重新加載擴展程序并打開新選項卡。你應該會看到“My new tab page”。

獲取并顯示笑話

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

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

將