chrome扩展程序

by Erika Tan

谭咏麟

如何创建Chrome扩展程序 (How to create a Chrome Extension)

In this article, I will be teaching you how to make a Chrome Extension of your own. I’m basing it off of lessons learned while creating TalkToMe, a Chrome Extension that helps the visually impaired by reading website content and navigating to other web pages.

在本文中，我将教您如何制作自己的Chrome扩展程序。我以创建TalkToMe (Chrome扩展程序)的经验教训为基础，该程序是Chrome扩展程序，可通过阅读网站内容并导航到其他网页来帮助视障人士。

I’m going to cover the basics of setting up your extension, including:

我将介绍设置扩展程序的基础知识，包括：

Configuring the files for setup
配置文件进行设置
Getting it ready to put onto the Chrome store
准备将其放入Chrome商店

I won’t be covering how to manage audio features, such as handling mic permissions. This has been covered in this article by my friend Palash and also uses the TalkToMe extension as an example.
我不会介绍如何管理音频功能，例如处理麦克风权限。我的朋友Palash在本文中对此进行了介绍，并以TalkToMe扩展为例。

配置文件进行设置 (Configuring the files for setup)

First, go to chrome://extensions in your browser, or simply click “More Tools” and “Extensions” on the Chrome menu. This should lead you to the Extension Management page, where you can turn on Developer Mode (it should be in the top right corner).

首先，在浏览器中转到chrome：// extensions ，或直接在Chrome菜单上单击“更多工具”和“扩展程序”。这将带您进入“扩展管理”页面，您可以在其中打开“开发人员模式” (它应该在右上角)。

Then, you’ll need to make a manifest.json file in a new directory for your extension. This file provides important information for your extension to function, such as permissions and the script files that you’ll be linking your project to. This is what the contents of your manifest should look like:

然后，您需要在新目录中为扩展名创建一个manifest.json文件。该文件为您的功能扩展提供了重要信息，例如权限和您将项目链接到的脚本文件。这是清单的内容应如下所示：

{    "name": "Chrome Extension Example",    "version": "1.0",    "description": "Build an Extension!",    "manifest_version": 2}

To upload your directory to the Extension Management page, click the “Load Unpacked” button and select your directory. This will link your files to the web-based UI.

要将目录上传到“扩展管理”页面，请单击“加载解压缩”按钮，然后选择目录。这会将您的文件链接到基于Web的UI。

Another important file that you’ll have to configure is background.js, which is the background script of your project.

您必须配置的另一个重要文件是background.js ，它是项目的后台脚本。

A sample background script has this type of structure:

示例背景脚本具有以下类型的结构：

chrome.runtime.onInstalled.addListener(function() {    // add an action here});

It will always be running while your extension is turned on and is useful for listening to different events, such as keyboard presses, or for navigating to different pages.

它会在您的扩展程序打开时始终运行，对于侦听不同事件(例如键盘按键)或导航到不同页面很有用。

You can even have multiple background scripts. You just need to register all of them in your manifest file first. To do this, simply structure manifest.js like this, which is what the manifest file to our extension looks like:

您甚至可以拥有多个后台脚本。您只需要先在清单文件中注册所有这些文件即可。为此，只需像这样构造manifest.js ，这就是我们扩展名的清单文件的样子：

{    "name": "Chrome Extension Example",    ...

"background": {        "scripts": [            "js/es6-promise.auto.min.js",            "js/defaults.js",            "js/speech.js",            "js/document.js",            "js/events.js",            "js/stt.js",            "js/listen.js"        ],        "persistent": false    }}

Now, you’ll need a file for not just the function of your extension, but also the UI. To do this, make a file called popup.html. The popup is a small window that appears once your extension icon is clicked. For example, here’s the popup for the Cookie Manager Firefox extension.

现在，您不仅需要用于扩展功能的文件，还需要用于UI的文件。为此，请创建一个名为popup.html的文件。弹出窗口是一个小的窗口，单击扩展图标后便会出现。例如，这是Cookie Manager Firefox扩展的弹出窗口。

The popup.html file can be quite simple. Below is some code to make a popup with a single button. It’s as easy as adding opening and closing button tags into the body of the document and a few style rules.

popup.html文件可能非常简单。以下是一些使单个按钮弹出的代码。就像在文档正文中添加打开和关闭按钮标签以及一些样式规则一样简单。

<!DOCTYPE html>  <html>    <head>      <style>        button {          height: 30px;          width: 30px;          outline: none;        }      </style>    </head>;    <body>      <button></button>    </body>  </html>

Of course, the popup.html code for our extension has many more components than this. Feel free to add more buttons, stylesheets, and anything else you see fit for your extension idea.

当然，我们扩展的popup.html代码具有更多的组件。随意添加更多按钮，样式表以及您认为适合扩展概念的任何其他内容。

Time to configure the popup code and the icon. For the icon, however, you’ll need to add code into two places, “default_icon” and “icons”. The “default_icon” property is used for toolbar icons, and “icons” is used for the images displayed on the Extension Management page.

是时候配置弹出代码和图标了。但是，对于该图标，您需要将代码添加到“ default_icon”和“ icons”两个位置。 “ default_icon”属性用于工具栏图标，“ icons”用于“扩展管理”页面上显示的图像。

Go back to manifest.json and add in the following lines of code, replacing the image paths for the default icon with your own images. You can also put the same images in for both “default_icon” and “icons”. And, you don’t need to put in pictures of the same dimensions as the ones specified below. For example, if you only have images that are 16 x 16 and 48 x 48, feel free to delete the other two lines that specify 32 and 128 pixels.

返回manifest.json并添加以下代码行，用您自己的图像替换默认图标的图像路径。您也可以为“ default_icon”和“ icons”放入相同的图像。而且，您不需要放入与以下指定尺寸相同的尺寸的图片。例如，如果您只有16 x 16和48 x 48的图像，请随时删除指定32和128像素的其他两行。

{   "name": "Chrome Extension Example",    ...

"page_action": {        "default_popup": "popup.html",        "default_icon": {            "16": "images/img16.png",            "32": "images/img32.png",            "48": "images/img48.png",            "128": "images/img128.png"        }    },    "icons": {        "16": "images/img16.png",        "32": "images/img32.png",        "48": "images/img48.png",        "128": "images/img128.png"    }}

So these are the files that are essential in building a chrome extension:

因此，这些是构建chrome扩展程序必不可少的文件：

a manifest file,
清单文件
background scripts, and
后台脚本，以及
a popup file
一个弹出文件

Some other files that you might want to configure are:

您可能要配置的其他一些文件是：

options.html and
options.html和
options.js
options.js

options.js will give your users a wider variety of options when it comes to using your extension. It will take care of how your options page looks (it’s very similar to popup.html), while options.js will handle the functionality.

options.js将为您的用户提供使用扩展程序的更多选择。它将照顾您的选项页面的外观(与popup.html非常相似)，而options.js将处理该功能。

These files are optional, but if you decide to add them, don’t forget to configure options.html in the manifest and link your options.js file by adding <script src=”options.js”><;/script> right before your ending HTML tag.

这些文件是可选的，但是如果您决定添加它们，请不要忘记在清单中配置options.html并通过在右边添加<script src=”options.js”>< ; / script>来链接options.js文件<script src=”options.js”><在结束HTML标记之前。

{    "name": "Chrome Extension Example",    ...    "options_page": "options.html"}

To see your extension in action, save all of your files and click “Reload” while you’re on the Extension Management page. You should see your icon in the toolbar. To view your options page, you can also click “Details” under your extension and scroll down to where it says “Extension options”.

要查看扩展程序的运行情况，请保存所有文件，然后在“扩展程序管理”页面上单击“重新加载”。您应该在工具栏中看到您的图标。要查看您的选项页面，您还可以单击扩展程序下的“详细信息”，然后向下滚动到显示“扩展程序选项”的位置。

将您的项目发布到网上商店 (Publishing your project to the web store)

So you’ve developed and tested your extension. Now you need to distribute it!

因此，您已经开发并测试了扩展程序。现在您需要分发它！

To begin uploading your project, first convert it to a .zip file. The file should, at a minimum, contain the manifest.json file. Then, make sure you have a developer account by visiting the Chrome Webstore Developer Dashboard.

要开始上传您的项目，请先将其转换为.zip文件。该文件至少应包含manifest.json文件。然后，通过访问Chrome Webstore开发人员信息中心来确保您拥有开发者帐户。

Click the “Add new item” button and it should let you upload your .zip file there. Unless you want to register payments for your app, you can skip the step about setting up a payment system. You will have to pay a $5 one-time developer fee, however, when you put your project onto the web store.

单击“添加新项目”按钮，它应该可以让您将.zip文件上传到此处。除非您要为您的应用程序注册付款，否则可以跳过有关设置付款系统的步骤。但是，当您将项目放到网上商店时，必须支付5美元的一次性开发人员费用。

Also, don’t forget to include a detailed description and pictures of your extension so that potential users will know exactly what your project does!

另外，不要忘记提供扩展的详细说明和图片，以便潜在用户确切知道您的项目在做什么！

Once all of this is complete, you’ll receive an app ID and an OAuth token. The app ID is used for making requests to Google APIs, while the OAuth token is used for making Web Store payments.

完成所有这些操作后，您将收到一个应用ID和一个OAuth令牌。应用程序ID用于向Google API发送请求，而OAuth令牌用于向Web Store付款。

Congratulations, you have now published your extension! ?

恭喜，您现在已经发布了扩展程序！？

If you enjoyed this post, check out this next article. We’ll be diving deeper into how to configure audio features in your Chrome extension, just like we did for TalkToMe.

如果您喜欢这篇文章，请查看下一篇文章。就像我们对TalkToMe所做的一样，我们将深入研究如何在Chrome扩展程序中配置音频功能。