如何创建自己的 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小时内与您取得联系。

整合营销服务商