chrome插件怎么开发（chrome扩展及应用开发）
林子琦优秀作者
原创内容 来源：小居数码网 时间：2024-08-14 14:30:01 阅读() 收藏：20 分享：48 爆
导读：您正在阅读的是关于【数码知识】的问题，本文由科普作家协会，生活小能手，著名生活达人等整理监督编写。本文有1102个文字，大小约为5KB，预计阅读时间3分钟。
我们会完成创建您自己的Chrome扩展程序的过程，从manifest.json到jQuery代码，再到Chrome网上应用店中查找。
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并编写以下逻辑以显示警报。
$(function () {
$("#btnsave").click(function () {
var name = $("#txt_name").val();
alert("Hi"+" "+name);
});
});
现在完成了与创建应用程序相关的所有任务，因此我们将看到如何将扩展添加到浏览器。
以下是执行此操作的步骤：
现在单击Load Unpack扩展按钮，在桌面上找到您的扩展项目。
加载后，它将显示在浏览器的右上角，您可以通过单击它来访问它。您可以输入您的名字来玩它。
现在点击Chrome浏览器右上角的小图标。它将启动应用程序，并将按照您的逻辑工作。
因此，通过这种方式，我们可以开始创建一个小型Chrome应用。对于Chrome，Chrome商店中有很多应用。
上面就是小居数码小编今天给大家介绍的关于（chrome扩展及应用开发）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
- chrome如何兼容IE模式（edge的ie兼容模式）
- cad批量打印插件哪个好用（CAD批量打印软件免费）
- cad画图超快用的什么插件（cad有哪些提高效率的插件）
- blenderm3插件教程（blender软件m3插件安装）
（487）个朋友认为回复得到帮助。
部分文章信息来源于以及网友投稿，转载请说明出处。
本文标题：chrome插件怎么开发（chrome扩展及应用开发）：http://sjzlt.cn/shuma/155536.html
猜你喜欢
- chrome如何兼容IE模式（edge的ie兼容模式）
- cad批量打印插件哪个好用（CAD批量打印软件免费）
- cad画图超快用的什么插件（cad有哪些提高效率的插件）
- blenderm3插件教程（blender软件m3插件安装）
- 浏览器插件如何开发教程（浏览器插件怎么开发）
- 谷歌浏览器不能上网怎么回事（chrome浏览器无法上网）
- chrome浏览器断点调试（chrome断点调试js教程）
- 手机谷歌浏览器chrome可以安装插件吗（手机版chrome能安装插
- 前端富文本编辑器使用（js富文本编辑器插件）
- 插件大师cdr（cdr插件哪个最好用）
- chrome浏览器截图工具（firefox截图插件）
- jqueryvalidate（jquery插件使用）
精选文章
-
-
-
-
-
-
-
-
天龙功放声音模式设置（天龙功放音量调
1464 -
懂行的人建议买华为还是荣耀手机（华为
1269 -
