chrome扩展程序_如何实施Chrome扩展程序

chrome扩展程序

We all like surfing the web. And we all like things to be at the touch of our fingertips. Why not create something that caters to these two absolute truths?

我们都喜欢上网。而且我们都希望事情触手可及。为什么不创造出满足这两个绝对真理的东西呢？

In this article, I’ll explain the building blocks of a Chrome extension. Afterwards, you’ll just have to think of a good idea as an excuse to make one.

在本文中，我将介绍Chrome扩展程序的基本组成部分。之后，您只需要将一个好主意视为创造一个主意的借口。

为什么选择Chrome？ (Why Chrome?)

Chrome is by far the most popular web browser. Some estimations are as high as 59%. So, if you want to reach as many people as you can, developing a Chrome extension is the best way to do it.

Chrome是迄今为止最受欢迎的网络浏览器。一些估计高达59％ 。因此，如果您想吸引尽可能多的人，开发Chrome扩展程序就是最好的方法。

⚠️ To be able to publish a Chrome extension, you need to have a developer account which entails a $5 one-time signup fee.

⚠️要发布Chrome扩展程序，您需要拥有一个开发人员帐户，该帐户需要支付5美元的一次性注册费。

Each Chrome extension should have these components: the manifest file, popup.html and popup.js and a background script. Lets take a look at them.

每个Chrome扩展程序应具有以下组件： 清单文件 ， popup.html和popup.js以及后台脚本。让我们看看它们。

Chrome扩展程序由什么组成？ (What makes up a Chrome extension?)

清单文件 (The Manifest File)

What is a manifest file? It is a text file in JSON (JavaScript Object Notation) format that contains certain details about the extension you will be developing.

什么是清单文件？这是JSON( JavaScript对象表示法 )格式的文本文件，其中包含有关您将开发的扩展的某些详细信息。

Google uses this file to acquire details about your extension when you will publish it. There are required, recommended and optional fields.

发布时，Google会使用此文件获取有关您的扩展程序的详细信息。有必填字段，推荐字段和可选字段。

需要 (Required)

{"manifest_version": 2,"name": "My Chrome Extension","version": "1.0","default_locale": "en"
}

manifest_version - Version of the manifest file format. As of Chrome 18, version 1 is deprecated

manifest_version清单文件格式的版本。从Chrome 18开始，版本1已弃用
name - Can be up to 45 characters. Used to display your extension’s name in the following places: Install dialog, Extension management UI, Chrome Web Store

name -最多45个字符。用于在以下位置显示扩展程序的名称：“安装”对话框，扩展程序管理UI，Chrome网上应用店
version - Version of your Chrome Extension. Can be up to four digits separated by dots (e.g., 1.0.0.0)

version -您的Chrome扩展程序的版本。最多可以由点分隔的四位数(例如1.0.0.0)
default_locale - This folder resides inside the _locals folder and it contains the default string literals. The _locals folder is used for internationalization (allowing your extension to support multiple languages). It is a required field if a _locals folder exists, otherwise, it should not be present

default_locale此文件夹位于_locals文件夹中，并且包含默认字符串文字。 _locals文件夹用于国际化(允许您的扩展名支持多种语言)。如果存在_locals文件夹， _locals必填字段，否则不应存在

If you want to support multiple languages, read more here.

如果您想支持多种语言，请在此处内容。

弹出窗口和背景 (Popup and Background)

The popup refers to the main page users see when using your extension. It consists of two files: Popup.html and a JavaScript file, Popup.js.

弹出窗口是指用户在使用扩展程序时看到的主页。它由两个文件组成： Popup.html和一个JavaScript文件Popup.js 。

Popup.html is the layout file for how your extension will look like. Depending on what your extension will do, the markup of this file will change.

Popup.html是扩展程序外观的布局文件。根据扩展名的作用，此文件的标记将更改。

A background script is the only one that can interact with events that occur and use the Chrome API. To use background scripts you need to add the following to your manifest.json file:

后台脚本是唯一可以与发生的事件进行交互并使用Chrome API的脚本。要使用后台脚本，您需要将以下内容添加到manifest.json文件中：

{"manifest_version": 2,"name": "My Chrome Extension","version": "1.0","background":{"scripts": ["yourScript.js"],"persistent": false}
}

The key scripts has a value of an array of script names.

关键scripts具有脚本名称数组的值。

persistent is a key with a boolean value which denotes the use of your extension with chrome.webRequest API to block or modify network requests. The Chrome.webRequest API does not work with non-persistent background pages.

persistent是具有布尔值的键，该值表示您的扩展程序与chrome.webRequest API配合使用以阻止或修改网络请求。 Chrome.webRequest API不适用于非永久背景页面。

您的扩展程序将如何打开 (How Your Extension Will Open)

Every Chrome extension adds a little icon to the toolbar at the top of your browser. Once the user clicks that icon, you can choose how you want your extension to open in the browser:

每个Chrome扩展程序都会在浏览器顶部的工具栏中添加一个小图标。用户单击该图标后，您可以选择扩展程序在浏览器中的打开方式：

It can override a new tab, so as not to disrupt the current user’s activity它可以覆盖一个新的选项卡，以免破坏当前用户的活动

2. You can open a small window in the user’s current tab, so as to keep the user in the same tab

2.您可以在用户的当前选项卡中打开一个小窗口，以使用户保持在同一选项卡中

Each choice has it’s consequences and it is up to you to decide what is the best option for you.

每个选择都有其后果，由您决定什么是最适合您的选择。

Below is the code needed to pull off each of the options. They will both use the same popup.html file outlined below:

下面是提取每个选项所需的代码。他们都将使用以下概述的相同popup.html文件：

<html><head><title>Chrome Extension Example</title></head><body><h1>Hello From Extension</h1></body></html>

放在一起 (Putting It All Together)

覆盖新标签 (Override New Tab)

//In manifest.json
{"name": "ChromeExampleNewTab","version": "1.0","manifest_version": 2,"chrome_url_overrides": {"newtab": "popup.html"},"browser_action": {}, "permissions":[        "tabs"],"background":{        "scripts": ["background.js"],"persistent": false}
}//In background.js
chrome.browserAction.onClicked.addListener(function(tab) {chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {// Tab opened.});
});

在当前标签页中打开 (Open In The Current Tab)

//In manifest.js
{"name": "ChromeExample","version": "1.0","manifest_version": 2,"browser_action": {         "default_popup": "popup.html"}
}

Notice how we have overridden the browser_action key in both examples.

请注意，在两个示例中我们都是如何覆盖browser_action键的。

We have to do this, since we don’t want the browser to open a new tab in the regular fashion.

我们必须这样做，因为我们不希望浏览器以常规方式打开新标签页。

Also, since if we want to open a new tab with our extension, we must add a permissions key to the manifest and specify the tabs value. This lets the browser know we need the user’s permission to overwrite the default behavior of opening a new tab.

另外，由于如果要使用扩展名打开新标签页，则必须向清单添加权限密钥并指定标签页值。这使浏览器知道我们需要用户的权限才能覆盖打开新选项卡的默认行为。

There is a whole lot more to Chrome extensions (messaging, context menus and storage to name a few). I have hopefully given you some insight into Chrome extensions. Maybe just enough to intrigue you to make one of your own!

Chrome扩展还有很多其他功能(消息传递，上下文菜单和存储等等)。希望我能给您一些有关Chrome扩展程序的见解。也许足以吸引您成为自己的一员！

And while you are at it, check one I have made here.

而当您在查看时，请检查一下我在这里制作的。

翻译自: https://www.freecodecamp.org/news/how-to-implement-a-chrome-extension-3802d63b5376/

chrome扩展程序