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

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比昆玉網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式昆玉網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋昆玉地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

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

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

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)卡。

為了演示這些概念，讓我們先寫一個(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 
 
 
 
 

打開 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開始）。

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

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

 
 
 
 

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

最后安裝擴(kuò)展程序。打開 Chrome 并在地址欄中輸入 chrome://extensions/ 。你應(yīng)該看到一個(gè)顯示已安裝擴(kuò)展程序的頁面。

由于我們要從文件（而不是Chrome網(wǎng)上應(yīng)用店）安裝自己的擴(kuò)展程序，因此需要使用頁面右上角的切換按鈕來激活 開發(fā)者模式 。這應(yīng)該添加一個(gè)額外的菜單欄，其中包含 Load unpacked 選項(xiàng)。單擊此按鈕并選擇你之前創(chuàng)建的 hello-world-chrome 文件夾。單擊 打開 ，應(yīng)該能夠看到已安裝的擴(kuò)展，并彈出“Hello，World！”窗口。

Hello World

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

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

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

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

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

 
 
 
 

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

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

 
 
 
 

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

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

重新加載擴(kuò)展

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

將Vue添加到擴(kuò)展

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

• 從精彩的笑話網(wǎng)站 icanhazdadjoke.com 獲取一個(gè)笑話。

• 以良好的格式向用戶顯示該笑話。

• 顯示用戶喜歡該笑話的按鈕。這樣可以把笑話保存到  chrome.storage 。

• 顯示一個(gè)按鈕，供用戶查看已收藏的笑話。

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

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

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

vue-web-extension-boilerplate

本節(jié)假定你的計(jì)算機(jī)上安裝了 Node 和 npm。如果不是這樣，你可以到 https://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 
 
 
 
 

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

 
 
 
 

  
  
  
  
? 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。我們會(huì)用它來獲取笑話。

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

 
 
 
 

  
  
  
  
cd new-tab-page 
  
  
  
  
npm install 
 
 
 
 

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

 
 
 
 

  
  
  
  
npm run watch:dev 
 
 
 
 

這會(huì)將擴(kuò)展構(gòu)建到項(xiàng)目根目錄中的 dist 文件夾中，來進(jìn)行開發(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í)間來看看樣板給了我們些什么。當(dāng)前文件夾結(jié)構(gòu)應(yīng)如下所示：

 
 
 
 

  
  
  
  
. 
  
  
  
  
├── 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 
 
 
 
 

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

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

在 src 文件夾中還有一個(gè) icons 文件夾。如果你看一眼 Chrome 的工具欄，會(huì)看到我們的擴(kuò)展程序的新圖標(biāo)（也被稱為 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 來開發(fā)擴(kuò)展，然后使用 npm run build-zip 生成一個(gè)ZIP文件以上傳到 Chrome Web Store。

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

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

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

 
 
 
 

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

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