chrome扩展及应用开发（chrome插件怎么开发）

我们会完成创建您自己的Chrome扩展程序的过程，从manifest.json到jQuery代码，再到Chrome网上应用店中查找。

Chrome扩展程序是小程序（使用HTML，JavaScript，jQuery），基本上是为了向Chrome浏览器添加其他功能而编写的。您可以在Chrome网上应用店（以前称为Google Chrome扩展程序库）中下载并查找所有Google Chrome扩展程序。根据维基百科，截至2010年2月，开发人员已发布了2,200多个扩展。

如果您查看Chrome网上应用店，则会发现很多Chrome扩展程序。您可以使用此链接查看此信息。

这些Chrome扩展程序有一个小的UI，主要是一个HTML页面，我们可以使用JavaScript和jQuery使其交互。

Chrome扩展程序中有3个主要部分。这些是：

manifest.json。
一个JavaScript文件。
一个HTML文件。

让我们看看manifest.json是什么。

manifest.json

每个Chrome应用都有一个名为manifest.json的JSON文件。此文件包含与JSON格式的应用程序相关的信息。

这是一个简单的清单文件。

{

"name": "My chrome App",

"description": "This is my first chrome app.",

"icons": [{

"src": "images/icon.png",

"sizes": "192x192"

}]

}

基本上，它包含元数据，如名称，描述，应用程序中使用的图标，图标大小，正在使用的HTML页面，权限，浏览器操作，版本等。

浏览器操作

浏览器操作用于在Google Chrome工具栏中显示Chrome应用。它包含几个属性，如工具提示，徽章，弹出窗口等。

权限

在创建Chrome扩展程序时，您可能需要使用某些第三方库，Chrome API等。因此，要将这些库包含在项目中，我们需要权限数据。我们可以在mainfest.json中提及我们的权限。这是一个显示mainfest.json文件中权限的示例。

{

"manifest_version": 2,

"name": "Debendra Notification",

"description": "This extension by debendra256",

"version": "1.0",

"permissions": [

"notifications"

],

"browser_action": {

"default_icon": "img/myimg.png",

"default_popup": "popup.html",

"icons": { "128": "myimg.png" }

}

}

现在让我们尝试使用Visual Studio 2015创建Chrome应用。对于Visual Studio中的Chrome模板，您可以从此链接下载并安装它。

安装Chrome扩展项目模板后，重新启动Visual Studio。

重新启动VS后，您将在C＃项目下找到以下模板。

现在选择Google Chrome扩展程序并进行操作。

现在转到mainfest.json并添加以下内容：

{

"manifest_version": 2,

"name": "Debendra calculator",

"description": "This extension by debendra256",

"version": "1.0",

"browser_action": {

"default_icon": "img/myimg.png",

"default_popup": "popup.html",

"icons": { "128": "myimg.png" }

}

}

在这里，我使用了128 * 128的图像，标记为 myimg。

现在，在Popup.html中，编写以下HTML代码。

<!doctype html>

<html>

<head>

<script src="jquery-3.2.1.min.js"></script>

<script src="popup.js"></script>

</head>

<body>

<input type="text" />

<input type="submit" title="save" value="save"/>

</body>

</html>

现在转到popup.js并编写以下逻辑以显示警报。