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擴展程序中配置音頻功能。