chrome api调试_您应该知道的Chrome API功能

chrome api调试

So you think you know your way around building a Chrome extension? Well, that’s all fine and dandy, but have you heard about context menus? Messaging between scripts? Adding a badge to your extension’s icon? If all this sounds fascinating, you’re in luck. We’ll go over some cool features the Chrome API grants us.

您认为自己知道如何构建Chrome扩展程序吗？ 好吧，这一切都很好，但您是否听说过上下文菜单？ 脚本之间的消息传递？ 在扩展程序的图标中添加徽章？ 如果所有这些听起来令人着迷，那么您很幸运。 我们将介绍Chrome API授予我们的一些很酷的功能。

If you are interested in reading about how to build a Chrome extension, you can read my previous article here. If you want to know how to publish one, you can read all about it here

如果您有兴趣阅读有关如何构建Chrome扩展程序的信息，可以在此处阅读我的上一篇文章。 如果您想知道如何发布，可以在这里阅读全部内容

上下文菜单 (Context Menu)

To put it simply, the context menu is the menu that appears when you right-click anywhere inside the browser. You can add your Chrome extension to that menu with a few simple steps:

简而言之，上下文菜单是在浏览器内部的任何位置上单击鼠标右键时出现的菜单。 您可以通过几个简单的步骤将Chrome扩展程序添加到该菜单中：

1. Add context-menus to the permissions key in the manifest

   将上下文菜单添加到清单中的权限键

2. Add a 16x16 icon (as it will be used in the context menu)
   添加一个16x16图标(因为它将在上下文菜单中使用)
3. Add the following code to your background script:
   将以下代码添加到您的后台脚本中：

存储 (Storage)

Similar to localStorage, the Chrome API allows saving data as objects, which persists even when the browser is closed and reopened. Here are the necessary steps to allow storage usage in your extension:

与localStorage相似，Chrome API允许将数据另存为对象，即使关闭并重新打开浏览器也可以保留。 以下是允许扩展中使用存储的必要步骤：

1. Add storage to the permissions key in the manifest

   将存储添加到清单中的权限密钥

2. To put data in the storage, you use:
   要将数据放入存储，请使用：

3. To pull data from the storage you use:

3.要从存储中提取数据，请使用：

⚠️ Do NOT put sensitive user data in the storage since it is not encrypted

⚠️不要将敏感的用户数据未加密就存储在存储器中

讯息传递 (Messaging)

Chrome has another nifty feature which lets you pass messages along between scripts. For example, in your extension, you have your popup.js file that deals with things related to the popup window and you have a background script. If you wanted to have those two scripts communicate with each other you could use the following methods:

Chrome浏览器还有另一个漂亮的功能，可让您在脚本之间传递消息。 例如，在扩展程序中，您具有处理与弹出窗口相关的内容的popup.js文件，并且具有背景脚本。 如果要使这两个脚本相互通信，可以使用以下方法：

SendMessage

发信息

Listen In On Incoming Messages

收听传入消息

徽章 (Badges)

You know them, you love them, and you can add them to the icon of your extension. Make sure to be aware that due to its small size, the text you want to display is limited to four characters.

您了解它们，喜欢它们，可以将它们添加到扩展程序的图标中。 请确保注意，由于其尺寸较小，您要显示的文本限制为四个字符 。

To set the background color of the badge you use:

要设置徽章的背景色，请使用：

To set the text of the badge you use:

要设置徽章的文本，请使用：

In both methods, the callback is an optional parameter you can use after the method finishes its action.

在这两种方法中，回调都是一个可选参数，您可以在方法完成操作后使用它。

Have other Chrome APIs you want to know about? Want to ask something? Feel free to reach out.

您是否还想了解其他Chrome API？ 想问些什么吗？ 随时与我们联系。

If you liked this article, clap away so that others can enjoy it as well! ?

如果您喜欢这篇文章，请拍一下，以便其他人也能喜欢它！ ？

翻译自: https://www.freecodecamp.org/news/features-of-the-chrome-api-you-should-know-bf5c8b6c7733/

chrome api调试