您的位置：首页 > 数码常识数码常识
chrome插件怎么开发（chrome扩展及应用开发）
2025-05-12人已围观
chrome插件怎么开发（chrome扩展及应用开发）
我们会完成创建您自己的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",
"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",
"icons": { "128": "myimg.png" }
}
}
在这里，我使用了128 * 128的图像，标记为 myimg。
现在，在Popup中，编写以下HTML代码。
<!doctype html>
<html>
<head>
<script src="http://sjzlt.cn/shuma/jquery-3.2.1.min.js"></script>
<script src="http://sjzlt.cn/shuma/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);
});
});
现在完成了与创建应用程序相关的所有任务，因此我们将看到如何将扩展添加到浏览器。
以下是执行此操作的步骤：
在文件资源管理器中打开项目。在桌面上复制项目。现在转到Chrome设置，然后转到扩展程序。
现在单击Load Unpack扩展按钮，在桌面上找到您的扩展项目。
加载后，它将显示在浏览器的右上角，您可以通过单击它来访问它。您可以输入您的名字来玩它。
现在点击Chrome浏览器右上角的小图标。它将启动应用程序，并将按照您的逻辑工作。
因此，通过这种方式，我们可以开始创建一个小型Chrome应用。对于Chrome，Chrome商店中有很多应用。
上面就是小居数码小编今天给大家介绍的关于（chrome扩展及应用开发）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
chrome如何兼容IE模式（edge的ie兼容模式）
cad批量打印插件哪个好用（CAD批量打印软件免费）
cad画图超快用的什么插件（cad有哪些提高效率的插件）
blenderm3插件教程（blender软件m3插件安装）
155536
我们会完成创建您自己的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",
"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",
"icons": { "128": "myimg.png" }
}
}
在这里，我使用了128 * 128的图像，标记为 myimg。
现在，在Popup中，编写以下HTML代码。
<!doctype html>
<html>
<head>
<script src="http://sjzlt.cn/shuma/jquery-3.2.1.min.js"></script>
<script src="http://sjzlt.cn/shuma/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);
});
});
现在完成了与创建应用程序相关的所有任务，因此我们将看到如何将扩展添加到浏览器。
以下是执行此操作的步骤：
在文件资源管理器中打开项目。在桌面上复制项目。现在转到Chrome设置，然后转到扩展程序。
现在单击Load Unpack扩展按钮，在桌面上找到您的扩展项目。
加载后，它将显示在浏览器的右上角，您可以通过单击它来访问它。您可以输入您的名字来玩它。
现在点击Chrome浏览器右上角的小图标。它将启动应用程序，并将按照您的逻辑工作。
因此，通过这种方式，我们可以开始创建一个小型Chrome应用。对于Chrome，Chrome商店中有很多应用。
上面就是小居数码小编今天给大家介绍的关于（chrome扩展及应用开发）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
chrome如何兼容IE模式（edge的ie兼容模式）
cad批量打印插件哪个好用（CAD批量打印软件免费）
cad画图超快用的什么插件（cad有哪些提高效率的插件）
blenderm3插件教程（blender软件m3插件安装）
155536
很赞哦！ ()
下一篇：返回列表