本文共 7477 字，大约阅读时间需要 24 分钟。
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 is by far the most popular web browser. . So, if you want to reach as many people as you can, developing a Chrome extension is the best way to do it.
Chrome是迄今为止最受欢迎的网络浏览器。 。 因此，如果您想吸引尽可能多的人，开发Chrome扩展程序就是最好的方法。
⚠️ To be able to publish a Chrome extension, you need to have a developer account which entails a .
⚠️要发布Chrome扩展程序，您需要拥有一个开发人员帐户，该帐户需要 。
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以及后台脚本。 让我们看看它们。
What is a manifest file? It is a text file in JSON () format that contains certain details about the extension you will be developing.
什么是清单文件？ 这是JSON( )格式的文本文件，其中包含有关您将开发的扩展的某些详细信息。
Google uses this file to acquire details about your extension when you will publish it. There are required, recommended and optional fields.
发布时，Google会使用此文件获取有关您的扩展程序的详细信息。 有必填字段， 推荐字段和可选字段。
{ "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 .
如果您想支持多种语言，请阅读更多内容。
"description": "A plain text description", "author": "Your Name Here", "short_name": "shortName", "icons": { "128":"icon128.png", "48":"icon48.png", "16":"icon16.png" }, description - You can use up to 132 characters to describe the extension
description您最多可以使用132个字符来描述扩展名
short_name - Limited to 12 characters, it is used in cases where there is not enough space to display the full name of the extension (App Launcher and New Tab Page)
short_name为12个字符，用于没有足够空间显示扩展名全名的情况(应用启动器和“新标签页”)
icons - The icons that represent the extension. Always include a 128X128 icon because it is used by the Chrome Web Store and during the installation of your extension
icons代表扩展名的图标。 始终包含一个128X128图标，因为它由Chrome网上应用店和在安装扩展程序时使用
Optional fields are case specific, so we won’t go into them in this article.
可选字段是特定于大小写的，因此在本文中我们将不再赘述。
After covering the data needed for the manifest file, we can now move on to where we will actually be writing code for our extension, Popup and Background.
在覆盖了清单文件所需的数据之后，我们现在可以继续实际为扩展名Popup和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不适用于非永久背景页面。
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扩展程序都会在浏览器顶部的工具栏中添加一个小图标。 用户单击该图标后，您可以选择扩展程序在浏览器中的打开方式：
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文件：
Chrome Extension Example Hello From Extension
//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.jschrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) { // Tab opened. });}); //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 .
而当您在查看时，请检查一下我在制作的。
翻译自:
chrome扩展程序
转载地址：http://dbwzd.baihongyu.com/