65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 HTML 和 JQuery 开发您的第一个 Google Chrome 扩展程序

Debendra0256
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.36/5 (10投票s)

2017 年 5 月 10 日

CPOL

3分钟阅读

viewsIcon

39180

在本文中，我们将学习如何使用 C# 创建 Google Chrome 扩展。

引言

Chrome 扩展是使用（HTML、JavaScript、JQuery）编写的小程序，用于向 Chrome 浏览器添加额外的功能。 您可以从 Chrome 网上应用店（以前是 Google Chrome 扩展程序库）下载并查找所有 Google Chrome 扩展。 根据维基百科，截至 2010 年 2 月，开发者已发布了 2,200 多个扩展。

如果您查看 Chrome 网上应用店，您会发现很多 Chrome 扩展。 我们可以使用这个链接进行查看。

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

Chrome 扩展主要有 3 个部分。 这些是

  1. manifest.json
  2. 一个 JavaScript 文件
  3. HTML 文件

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

manifest.json

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

这是一个简单的 mainfest 文件。

{
  "name": "My chrome App",
  "description": "This is my first chrome app.",
  "icons": [{
    "src": "images/icon.png",
    "sizes": "192x192"
  }]
}

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

（图片来自 google）

浏览器操作

浏览器操作用于在 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" id="txt_name" />
<input type="submit" id="btnsave" 
title="save" value="save"/>
</body>
</html>

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

$(function () {
    $("#btnsave").click(function () {
        var name = $("#txt_name").val();
    
       alert("Hi"+" "+name);


    });
});

现在创建应用程序的所有任务都已完成，因此我们将了解如何将扩展添加到浏览器。

现在让我们看看如何在 Chrome 浏览器中添加扩展。

  • 在文件资源管理器中打开项目。
  • 将项目复制到桌面。
  • 现在转到 chrome 设置，然后选择扩展程序。

  • 现在单击“加载已解压的扩展程序”，然后在桌面上浏览您的扩展程序项目。


  • 加载后，它将显示在浏览器右上角，因此您可以通过单击它来使用它。 您可以通过输入您的姓名来使用它。

现在单击 Chrome 浏览器右上角显示的小图标图像。 它将启动应用程序并根据您的逻辑工作。

因此，通过这种方式，我们可以开始创建小的 chrome 应用程序。 对于 chrome，Chrome 商店中有很多应用程序。 如果您想访问 Chrome 商店，请单击此链接。

来自 Chrome 商店的图片。

历史

  • 版本 1.0.0.0
© . All rights reserved.