The Chrome extension can greatly extend the functions of Chrome and has a huge market and commercial value. As a front-end programmer, can you write a Chrome extension?

Chrome扩展程序可以极大地扩展Chrome的功能，并具有巨大的市场和商业价值。 作为前端程序员，您可以编写Chrome扩展程序吗？

Chrome extensions are written using HTML, CSS, and JavaScript, and we don’t need to learn a new development language. Every front-end developer can easily transform their existing project into a Chrome extension project.

Chrome扩展程序是使用HTML，CSS和JavaScript编写的，我们无需学习新的开发语言。 每个前端开发人员都可以轻松地将其现有项目转换为Chrome扩展项目。

Suppose we now have a very simple front-end project in which there is currently only one index.html file. This file is used to display the current system time:

假设我们现在有一个非常简单的前端项目，其中目前只有一个index.html文件。 此文件用于显示当前系统时间：

Okay, so let’s get started with transforming this very simple front-end project into a Chrome extension.

好的，让我们开始将这个非常简单的前端项目转换为Chrome扩展程序。

manifest.json (manifest.json)

Chrome specifies that all extension projects must have a manifest.json file in the root directory, which identifies an extension project and performs various configurations.

Chrome浏览器指定所有扩展项目必须在根目录中具有manifest.json文件，该文件标识扩展项目并执行各种配置。

Now let’s add a manifest file to the root directory of the project and write the following.

现在，将清单文件添加到项目的根目录，并编写以下内容。

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html"
  }
}

The name field declares the name of our extension, which will be the name of your extension if you upload it to the Chrome Web Store in the future. version is the version number of our project. The manifest_version is what the version number of our manifest file is, and so far this value is always 2.

name字段声明了我们的扩展程序的名称，如果将来您将其上载到Chrome网上应用店，它将作为扩展程序的名称。 version是我们项目的版本号。 manifest_version是清单文件的版本号，到目前为止，该值始终为2。

The browser_action field is used to configure our extension’s behaviors. When we click on the extension in Chrome, we open the rendered page from the HTML file corresponding to default_popup.

browser_action字段用于配置扩展程序的行为。 当我们单击Chrome中的扩展程序时，我们从与default_popup对应HTML文件中打开呈现的页面。

The GIF below is what the extension looks like for now.

下面的GIF是扩展名的样子。

安装扩展 (Install Extension)

With the configuration complete, we are now ready to install the extension we just wrote into Chrome browser so that we can test the project.

完成配置后，我们现在就可以安装刚刚写入Chrome浏览器的扩展程序，以便我们测试项目。

There are three steps to installing a extension:

安装扩展程序分为三个步骤：

• open html" title=chrome>chrome://extensions/
  打开html" title=chrome>chrome：// extensions /

• turn developer mode on

  开启developer mode

• unpload unpack project
  解压解压项目

HTML脚本 (HTML Script)

Careful readers may have noticed that JavaScript scripts in HTML are not executed.

细心的读者可能已经注意到，HTML中JavaScript脚本未执行。

We have this script in our HTML file:

我们HTML文件中包含以下脚本：

<script type="text/html" title=java>javascript">
    let interval = setInterval(() => {
      document.getElementById("localTime")
        .innerText = new Date().toString()
    }, 1000);
</script>

But this code is not executed. This is because Chrome dictates that JavaScript scripts from HTML files in extensions can only be placed in separate files, not embedded in HTML files. So we need to create an extra .js file and put the JavaScript code there.

但是此代码未执行。 这是因为Chrome要求扩展程序中HTML文件中JavaScript脚本只能放置在单独的文件中，而不能嵌入HTML文件中。 因此，我们需要创建一个额外的.js文件，并将JavaScript代码放在此处。

And in the HTML file, we cam simply reference this code.

在HTML文件中，我们仅引用此代码即可。

At this point, we’re reloading our extension, and we can see that the JavaScript script is working properly.

至此，我们正在重新加载扩展，并且可以看到JavaScript脚本正常运行。

图标 (icon)

Next, let’s add a nice looking icon to the extension.

接下来，让我们为扩展程序添加一个漂亮的图标。

First we prepare an image and then put it into the project.

首先，我们准备一张图像，然后将其放入项目中。

Next we need to configure the manifest file to declare our logo. So to be specific, we could write it this way:

接下来，我们需要配置清单文件以声明我们的徽标。 因此，具体来说，我们可以这样写：

The default_icon field is used to declare icons. Now refresh our extension and you will see that the logo has changed.

default_icon字段用于声明图标。 现在刷新我们的扩展名，您将看到徽标已更改。

后台脚本 (The background script)

One of the drawbacks of previous JavaScript scripts is that they don’t start running until the user clicks on the extension icon. But a lot of times, we want the script to start executing as soon as the user starts the browser, so what do we do?

以前JavaScript脚本的缺点之一是它们只有在用户单击扩展图标后才开始运行。 但是很多时候，我们希望脚本在用户启动浏览器后立即开始执行，那么我们该怎么办？

First, let’s simply write a new script:

首先，让我们简单地编写一个新脚本：

alert("Hello! -- from background/main.js")setTimeout(()=>{
  alert("Hi! -- from background/main.js")
}, 2000)

Then configure the manifest file.

然后配置清单文件。

The background/script field is used to configure the script to run in the background. It is an array that can be configured with multiple files running in the background.

background/script字段用于将脚本配置为在后台运行。 它是一个可以配置为在后台运行多个文件的阵列。

Next, let’s reload the extension and test how it works.

接下来，让我们重新加载扩展并测试其工作方式。

内容脚本 (Content Script)

Sometimes we want extensions that execute scripts after the user has opened a web page. For example, when the user opens Medium.com, “Hello Medium” will pop up. When a user opens GitHub.com, “Hi, GitHub” pops up.

有时，我们希望扩展程序在用户打开网页后执行脚本。 例如，当用户打开Medium.com时，将弹出“Hello Medium” 。 当用户打开GitHub.com时，会弹出“Hi, GitHub” 。

To do that, we need to use content script. Conten script is a script that is executed only when the user opens certain web pages.

为此，我们需要使用内容脚本。 内容脚本是仅当用户打开某些网页时才执行的脚本。

Let’s start by writing two simple script files.

让我们从编写两个简单的脚本文件开始。

Then configure the manifest file.

然后配置清单文件。

"content_scripts": [
    {
      "matches": ["*://medium.com/*"],
      "js": ["content/medium.com.js"]
    }, {
      "matches": ["*://github.com/*"],
      "js": ["content/github.com.js"]
    }
  ]

"*://medium.com/*” will match any page on the Medium, so when we open any Medium page, “content/medium.com.js” will be executed.

"*://medium.com/*”将与"*://medium.com/*”上的任何页面匹配，因此当我们打开任何“媒介”页面时，将执行“content/medium.com.js” 。

"*://github.com/*” will match any page on the GitHub, so when we open any GitHub page, “content/github.com.js” will be executed.

"*://github.com/*”将匹配GitHub上的任何页面，因此当我们打开任何GitHub页面时，将执行“content/github.com.js” 。

结论 (Conclusion)

Well, this article covers the basics of developing Chrome extensions, and now you can turn one of your own front-end projects into a Chrome extension.

好的，本文介绍了开发Chrome扩展程序的基础知识，现在您可以将自己的前端项目之一转换为Chrome扩展程序。

The source code for the project is available on GitHub:

该项目的源代码可在GitHub上找到：