如何創建自己的 Google Chrome 擴展程序

果您是 Google Chrome 用戶，您可能已經在瀏覽器中使用了一些擴展程序。

你有沒有想過如何自己建造一個？在本文中，我將向您展示如何從頭開始創建 Chrome 擴展程序。

BD新標簽頁

順便一提，BD新標簽頁就是我個人開發的一款Chrome擴展，有興趣的朋友可以安裝試試哦

什么是 Chrome 擴展程序？

chrome 擴展程序是安裝在 Chrome 瀏覽器中的程序，用于增強瀏覽器的功能。您可以使用 HTML、CSS 和 JavaScript 等 Web 技術輕松構建一個。

創建 chrome 擴展程序類似于創建 Web 應用程序，但它需要一個manifest.json文件，我們將在本文的最后一節中討論該文件。

我們的 Chrome 擴展程序會是什么樣子？

UK-Chrome 擴展的最新 Covid 報告

如您所見，上述 chrome 擴展顯示了英國冠狀病毒 (COVID-19) 的最新數據。我們將在這篇博文中研究如何創建這個擴展。

在這里，我們將使用https://api.coronavirus.data.gov.uk/v1/data API 來獲取數據。為簡單起見，我們將僅顯示最新記錄。

這個項目的完整源代碼可以在GitHub上找到。

如何創建 Chrome 擴展程序

首先，我們需要創建一個空文件夾，我們將在其中添加 HTML、CSS 和 JavaScript 文件。

在該文件夾中，讓我們使用以下 HTML 樣板代碼創建一個 index.html 文件：

<!DOCTYPE html>
<html>
<head>
    <title>Covid-19 Stats- UK</title>
    <meta charset="utf-8">
</head>
<body>
</body>
</html>

現在，讓我們在 head 標簽中添加一個指向 Bootstrap CDN 的鏈接。我們將在這里使用Bootstrap 框架，這樣我們就不必在此示例中編寫一些額外的 CSS。

<head>
    <title>Covid-19 Stats- UK</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

在演示中，我們看到記錄顯示為表格。所以現在我們需要創建一個表。

<!DOCTYPE html>
<html>
<head>
    <title>Covid-19 Stats- UK</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-3" style="width: 450px;">
        <h2 class="text-center">Covid Latest Report-UK</h2>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>Date</th>
                <th>Country</th>
                <th>Confirmed</th>
                <th>Deaths</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td id="date"></td>
                <td id="areaName"></td>
                <td id="latestBy"></td>
                <td id="deathNew"></td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="script.js"></script>
</html>

上面的代碼創建了一個寬度為450px. 表格中有四個不同的標題：Date、Country、Confirmed和Deaths。

在這里，您可以看到每個表數據td都被分配了不同的 ID。我們將在 JavaScript 中使用這些 ID 的值來更新表數據。另外，這里我們在加載完所有 HTML 內容后，最后加載了 JavaScript。

現在，由于表格已顯示，我們需要編寫 JavaScript 以便從 API 獲取數據。

讓我們創建一個script.js文件并添加以下代碼：

async function fetchData() {
    const res=await fetch ("https://api.coronavirus.data.gov.uk/v1/data");
    const record=await res.json();
    document.getElementById("date").innerHTML=record.data[0].date;
    document.getElementById("areaName").innerHTML=record.data[0].areaName;
    document.getElementById("latestBy").innerHTML=record.data[0].latestBy;
    document.getElementById("deathNew").innerHTML=record.data[0].deathNew;
}
fetchData();

現在，讓我們分解上面的代碼：

在這里，我們使用名為fetchData.
正在從https://api.coronavirus.data.gov.uk/v1/data API 獲取數據。
JSON 數據存儲在一個名為record.
帶有 ids date、areaName和latestBy的td 的 HTML 內容deathNew由 API 的相應值更新。

如果我們檢查瀏覽器，我們將能夠看到以下結果。

數據是從 API 中獲取的，一旦 API 中的數據發生變化，它就會不斷更新。

Manifest.json 文件

正如我們之前所討論的，構建 Chrome 擴展程序類似于構建任何 Web 應用程序。唯一的區別是 Chrome 擴展需要一個manifest.json我們保存所有配置的文件。

manifest.json 文件包含構建 Chrome 擴展程序所需的所有必要信息。它是擴展檢查的第一個文件，所有內容都是從這個文件加載的。

現在，讓我們在根文件夾中創建一個manifest.json文件并添加以下代碼：

{
    "name": "Covid-19 Stats UK",
    "version": "1.0.0",
    "description": "latest covid data of UK",
    "manifest_version": 3,
    "author": "Sampurna Chapagain",
    "action":{
        "default_popup": "index.html",
        "default_title": "Latest Covid Report"
    }
}

Manifest.json

我們的manifest.json文件包含name, version, description,的值manifest_version（在本例中為 3，這是最新的清單版本），author, 和action字段。在 action 字段中，它的值default_popup包含指向index.html本示例中的 HTML 文件的路徑。

您可以在這里查看文件的所有配置manifest.json。

現在，由于我們還添加了 manifest.json 文件，我們準備將此項目添加為 Chrome 瀏覽器中的擴展。

為此，我們需要轉到Select More Tools然后Extensions從瀏覽器菜單中進行選擇，如下圖所示：

導航到 Chrome 中的擴展程序

選擇擴展后，它會重定向到 Chrome 中的擴展頁面。確保在Developer mode此處啟用。

完成后，您需要單擊Load unpacked允許我們將項目加載到 Chrome 擴展程序商店中的按鈕。

現在，該擴展程序可在我們的 Chrome 擴展程序商店中使用。您還可以將擴展固定在瀏覽器中，如下面的 gif 所示：

將擴展固定到瀏覽器

此擴展僅適用于您的瀏覽器。如果你想在 Chrome Web Store 上發布它，你可以點擊這個鏈接。

結論

如果您有一些 HTML、CSS 和 JavaScript 知識，則可以輕松構建 Chrome 擴展。我希望在閱讀完這篇博文后，您將創建一些很酷的擴展。

快樂編碼！

、快速入門

首先，創建一個項目chrome-plugins-x，在里面創建一個manifest.json文件

// manifest.json
{
  "name": "插件名稱",
  "description": "插件描述",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [
        "https://lofter.com/*"  // 作用的網頁
      ],
      "js": [
        "content.js"  // 對網頁進行操作的文件，后面創建
      ]
    }
  ]
}

根據上面json文件的描述，我們創建一個content.js文件，對網頁進行操作

// content.js
window.onload = function () {
  // 實際執行的操作
  // 這里我們寫一個alter操作，直接看效果，先運行成功再豐富細節
  alter('123')
}

接下來我們在chrome上打開擴展程序的頁面 chrome://extensions/ （在地址欄直接輸入這個地址即可）

如圖打開開發模式

點擊加載已解壓的擴展程序

選擇剛才創建的項目文件夾即可

然后我們打開目標網頁（比如上面的manifest.json文件我寫的是weibo這個網頁，那么我就直接打開https://weibo.com），可以看到彈出我們剛才寫的alter，說明加載成功。那么接下來可以刪掉alter，寫一些真正想要插件執行的事件。

二、插件操作dom元素

接下來我們具體操作一下content.js文件，首先我們應該知道目標頁面的dom結構，然后通過操作dom元素。

舉例我們想要寫一個獲取所有頁面中所有文章標題和內容的方法，那么第一步我們應通過右鍵--檢查查看我們要獲取的元素的結構

如圖我們可以看出，整篇文章包含在一個className為m-icnt的div元素中，其中標題為className為tit的h2元素。那么我們就可以這么操作：

window.onload = function () {
  this.fetchDocs();
}


function fetchDocs() {
  const docs = [];
  const docsElement = document.querySelectorAll('.m-icnt');
  for (let doc of docsElement) {
    const title = (doc.querySelector('.tit'))?.textContent;
    const content = doc?.textContent;
    docs.push({ title, content });
  }
  console.log(docs);
}

當我們更新代碼時，要在瀏覽器上看到效果，在擴展程序頁面點擊刷新按鈕即可

三、點擊插件圖標彈出框

當我們已經可以通過content.js文件，從頁面中獲取文章之后。我們希望能夠點擊插件圖片，彈出一個頁面彈出框，文章就列在上面。那么首先第一步，需要在manifest.json文件中添加彈出框頁面

// manifest.json
{
  "name": "插件名稱",
  "description": "插件描述",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "https://lofter.com/*"  // 作用的網頁
      ],
      "js": [
        "content.js"  // 對網頁進行操作的文件，后面創建
      ]
    }
  ]
}

創建popup.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2 style="min-width: 200px;text-align: center;">插件彈出框頁面</h2>
</body>
</html>

效果：

四、在插件彈出框頁面使用Vue

當我們使用原生js將獲取到的數據操作顯示到頁面上的時候，稍微會比較繁瑣，也不利于dom結構一目了然，因此我們引入Vue來寫這個彈出框。

首先將vue的js文件下載并放入項目中，然后在popup.html文件中引用。然后創建popup.js文件并引入。這里，當引用vue文件的時候，需要在manifest.json中添加content_security_policy字段，解開引用權限

manifest.json

{
  ...
  "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval'; object-src 'self' ;"
  ...
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 最外層這個div的id必須為app，與js文件的#app相對應 -->
  <div id="app" style="min-width: 200px;text-align: center;">
    {{message}}
  </div>


  <script src="./dist/vue@2.6.6.js"></script>
  <script src="popup.js"></script>
</body>
</html>

popup.js

new Vue({
  el: '#app',
  data: {
    message: '通過Vue完成的插件彈出框頁面',
  },
  methods: {
    
  },
  created: function () {


  }
});

效果：

Vue引用的時候，也可以不下載js文件直接引用網址（如：https://cdn.bootcss.com/vue/2.6.6/vue.js ），只需要在content_security_policy字段將對應的域名添加上去。但缺點是有時候網速不足夠快的時候，拉取遠程地址的Vue需要的時間會使得點擊插件的時候并不會立刻彈出框，這時候會使得用戶誤以為插件功能點擊后無反應（或隨機反應，在不同的網速下，彈出框有時候點一下彈出來有時候不出來，體驗不好）。

// manifest.json
{
  ...
  // 重點是這一行，打開了從遠程地址獲取vue的權限，這一行的重點在于其中添加了vue的引用地址的域"https://cdn.bootcss.com"
  "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval' https://cdn.bootcss.com; object-src 'self' ;",
  ...
}

然后將popup.html引用vue的那一行script標簽變更為

<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>

五、插件彈出框與頁面的數據交換

接下來我們將在content.js文件中獲取到文章標題顯示到彈出頁面中來，那么首先我們希望當點擊插件按鈕，顯示彈出框時，由popup.js文件向content.js文件發出獲取文章列表的請求，再由content.js文件操作dom獲取文章列表，返回給popup.js文件，popup.js文件通過Vue同步渲染到popup.html頁面中。

這里我們可以通過 chrome.tabs.sendMessage 發送消息

通過chrome.runtime.onMessage.addListener 監聽并返回消息

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="(item, index) in docs" :key="index" style="min-width: 300px;">
      <h4>{{item.title}}</h4>
    </div>
  </div>


  <script src="./dist/vue@2.6.6.js"></script>
  <script src="popup.js"></script>
</body>
</html>

popup.js

new Vue({
  el: '#app',
  data: {
    docs: []
  },
  methods: {
    init() {
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        var activeTab = tabs[0];
        chrome.tabs.sendMessage(activeTab.id, {}, (res) => {
          this.docs = res;
        });
      });
    },
  },
  created: function () {
    this.init();
  }
});

content.js

let docs;


// 監聽消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  fetchDocs();
  sendResponse(docs);
});


function fetchDocs() {
  docs = [];
  const docsElement = document.querySelectorAll('.m-icnt');
  for (let doc of docsElement) {
    const title = (doc.querySelector('.tit'))?.textContent;
    const content = doc?.textContent;
    docs.push({ title, content });
  }
}

效果：

還有一點，chrome插件限制了require/import/export等方法，因此如果想要拆分文件，從其他js文件中引用方法，只能通過html頁面script標簽引用的方式

比如在popup.html文件中可以：

<script src="./dist/vue@2.6.6.js"></script>
<script src="util.js"></script>
<script src="popup.js"></script>

如果是content.js文件的話，需要在manifest.json文件中添加：

  "content_scripts": [
    {
      "matches": [
        "https://lofter.com/*"
      ],
      "js": [
        "util.js",
        "content.js"
      ]
    }
  ]

End

好,擴展

我們將創建一個“Hello, Extensions”示例，在本地加載擴展。

首先創建一個新目錄來存儲擴展文件。如果您愿意，可以從GitHub下載完整的源代碼 https://github.com/justinzm/chrome-extensions-learning。

接下來，在此目錄中創建一個名為的新文件manifest.json并添加以下代碼：

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

這個 JSON 對象描述了擴展的功能和配置。例如，該"action"鍵聲明 Chrome 應使用的圖像作為操作的圖標，以及在單擊操作時在彈出窗口中顯示的 HTML 頁面。

將到您的目錄，并確保更改其名稱以匹配"default_icon"密鑰中的內容。

對于彈出窗口，創建一個名為的文件hello.html，并添加以下代碼：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
        <h1>Hello Extensions</h1>
        <div>你好 擴展</div>
    </body>
</html>

注意：顯示中文需要添加 "<meta http-equiv="content-type" content="text/html;charset=utf-8">" 避免出現亂碼。

加載已解壓的擴展程序

在開發者模式下加載一個解壓的擴展：

通過輸入chrome://extensions新選項卡進入擴展頁面。（根據設計chrome://，URL 不可鏈接。）
或者，單擊擴展菜單拼圖按鈕，然后選擇菜單底部的管理擴展。
或者，單擊 Chrome 菜單，將鼠標懸停在更多工具上，然后選擇擴展程序。
通過單擊開發人員模式旁邊的切換開關啟用開發人員模式。
單擊加載已解壓的擴展程序按鈕并選擇擴展目錄。

擴展已成功安裝。因為清單中沒有包含擴展圖標，所以將為擴展創建一個通用圖標。

重新加載擴展

讓我們回到代碼，把擴展名改成“Hello Extensions of the world！” 在清單中。

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

保存文件后，要在瀏覽器中查看此更改，您還必須刷新擴展。轉到擴展頁面并單擊開/關切換旁邊的刷新圖標：

查詢控制臺日志和錯誤

控制臺日志

在開發過程中，您可以通過訪問瀏覽器控制臺日志來調試代碼。在這種情況下，我們將找到彈出窗口的日志。首先將腳本標簽添加到hello.html.

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

創建一個popup.js文件并添加以下代碼：

console.log("This is a popup!")

要查看控制臺中記錄的此消息：

刷新擴展。
打開彈出窗口。
右鍵單擊彈出窗口。
選擇檢查。

5.在DevTools中，導航到控制臺面板。

錯誤日志

現在讓我們打破擴展。我們可以通過刪除引號來做到這一點popup.js：

console.log("This is a popup!) // ? broken code

轉到擴展頁面并打開彈出窗口。將出現一個錯誤按鈕。

構建擴展項目

有很多方法可以擴展項目；但是，您必須將 manifest.json 文件放在擴展的根目錄中。下面是一個結構示例：

在線咨詢

上一篇：Web前端：當今10個流行的JavaScript框架
下一篇：教你如何在Win10中生成無線網絡報告

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商