我们将创建一个简单的Chrome扩展，它可以显示来自全球各个新闻提供商的实时新闻。对于新闻API，请在中创建您的帐户https://newsapi.org/and获取API密钥以获取API响应。

要构建Chrome扩展，我们首先需要创建一个名为清单.json. 这个清单只不过是一个JSON格式的元数据文件，包含扩展名、描述、版本号等属性。在较高的层次上，企业管理软件公司，我们将使用它来向Chrome声明扩展将要做什么，以及它需要什么权限来完成这些事情。要了解清单的更多信息，请阅读清单文件格式文档。

创建一个清单.json文件，并保存到您的本地驱动器与以下内容。请注意，我们需要在索引.html但不能简单地在扩展页中包含外部脚本文件。这将违反默认的内容安全策略。

对于通过https服务的脚本，有享云商城，可以放宽策略；但出于安全原因，禁止使用http源代码：太容易拦截请求并注入恶意代码。

我们声明了浏览器操作，activeTab权限以查看当前选项卡的URL，云 服务器，以及主机访问外部SAPUI5引导的权限。

您可能注意到了清单.json在定义浏览器操作时指向两个资源文件：sap-ui5.png和弹出窗口.html. 这两个资源都必须存在于扩展包中，返利app怎么用，所以让我们现在创建它们：

sap-ui5.png将显示在Omnibox旁边，等待用户交互。我已经从这里下载了图标图像，物联网培训，并将其保存到名为sap-ui5.png的本地项目文件夹中弹出窗口.html将在弹出窗口中呈现，该窗口是响应用户单击浏览器操作而创建的。这是一个标准的HTML文件，就像你在web开发中习惯的那样，让你或多或少地自由支配弹出窗口显示的内容。

下面是这个文件的代码，这是SAPUI5的简单引导和一个简单的输入弹出窗口.js带有一些基本css样式的文件。

实现了呈现弹出窗口内容的实际逻辑由弹出窗口.js. （参考下面的代码）。

将您的\ API \ U密钥替换为您从中获得的密钥https://newsapi.org/成功创建帐户后。

一个本地文件频道.json已创建以获取新闻频道列表。它的内容是-

所以最后你的本地项目文件夹会像这样，下面有5个文件-

频道.json清单.json弹出窗口.html弹出窗口.jssap-ui5.png

就是这样。我们有Chrome扩展。让我们把它载入浏览器。为了加载扩展，Chrome提供了一种快速加载工作目录进行测试的方法。让我们现在就这样做。

或者，您可以拖放扩展文件所在的目录chrome://扩展浏览器来加载它。

如果扩展是有效的，它将被加载并立即激活！如果无效，将在页面顶部显示一条错误消息。更正错误，然后再试一次。

最后您将看到浏览器中添加了一个新的扩展名。点击它并获得实时新闻提要。

预览-

1。新增扩展

2。点击分机

3。频道列表

代码库：https://github.com/3bhu1/chrome-extension-using-SAPUI5

参考号：https://developer.chrome.com/extensions/getstarted