当前位置: 首页>>技术教程>>正文


在几分钟内构建一个简单的Google Chrome扩展程序

技术教程 , 去评论

什么是Chrome扩展程序?

如果你想了解什么是Chrome扩展程序以及Chrome扩展程序的工作方式,那么恭喜你,你来对地方了!

Chrome扩展程序是由Chrome浏览器托管的网页,一般由HTML、CSS和JavaScript组成,您可以通过Chrome公开的某些JavaScript API向Chrome添加一些功能。

扩展程序可以做什么?

在Chrome扩展程序中可以使用页面动作(Page Actions)或者浏览器动作(Browser Actions)完成很多事情,但二者不能同时使用。

页面动作:是专门用于某些页面的chrome扩展

浏览器动作: 并非用于特定页面,并且与您在浏览器中的位置无关

这个解释看起来还是有点让人困惑,不过不要急,本教程的目的就要使事情变得简单,下面一一道来。

注:如果您有兴趣了解有关Google Chrome扩展程序的更多信息,请查看Chrome的扩展程序文档

我们要做什么..

在本教程中,我们将构建一个基本的Chrome扩展程序,在单击该扩展程序时显示一条简单的弹出消息。我们需要几个重要的文件:一个图标(“icon.png”),一个HTML文件(“popup.html”)和全部导入清单(“manifest.json”)。所有这些文件将位于扩展程序名对应的目录中。

Chrome扩展程序由其清单定义,此JSON片段显示了Chrome如何解释扩展名,要加载的文件以及如何与用户互动。

基本扩展的清单文件如下所示:

此清单文件将在用户工具栏中放置一个图标,单击该图标可加载名为“popup.html.”的文件的内容

JSON文件中的大多数字段都是不言自明的,因此,我不会浪费您的时间来解释所有内容,但请注意其中的一些内容。

如果您想深入了解Chrome扩展程序清单可以声明的所有内容,请查看Google关于扩展程序清单的文档

编写一个非常基本的Chrome扩展程序:弹出窗口

现在,我们已经编写了清单,用于确定扩展名将显示什么。具体显示内容取决于我们的“popup.html”文件,该文件会在扩展程序加载时显示。以下是我们示例的内容:

连接到Chrome:

现在我们需要..加载我们的扩展!

  1. 在您的浏览器中,输入:chrome://extensions
  2. 确保开发者模式(Developer mode),选中右上角中的复选框,如下所示:

3.点击加载解包(Load unpacked),弹出文件选择对话框,选择您的目录。

4.如果该扩展名有效,它将立即加载并激活!如果无效,则会在页面顶部显示错误消息。更正错误,然后重试。

5.确保您的chrome扩展程序已启用,以便您可以看到它的使用。

6.单击扩展名以查看其效果(非常简单)。

实现一些逻辑:

打开“popup.html”文件并进行更改。

创建插件的最后一件事情是实现当用户单击“Click”按钮时应执行的逻辑。

我们想要添加一个事件监听器来监听click按钮上的click事件。

打开popup.js文件并添加以下代码:

测试:

  • 重要:确保在进行每次更改后都单击“重新加载”,以便可以看到实际的操作。

耶..! 生效 。

结论:扩展您的Chrome扩展程序

扩展程序完成后,并准备发布的话,您需要创建一个Chrome开发者帐户。这不是一个稍麻烦的过程,但是Google提供了有关在此处发布Chrome扩展程序的完整说明

显然,您可以使用Chrome扩展程序做更多的事情,但这超出了本文的范围。如果您想了解有关Chrome扩展程序可以执行的所有操作的更多信息,请访问Google的Chrome开发人员扩展指南。

检查以下GitHub存储库,

https://github.com/EmadElmogy/simpleChromeExtension

您可以下载它并在其基础上创建应用程序。

参考资料

本文由《纯净天空》出品。文章地址: https://vimsky.com/article/4586.html,未经允许,请勿转载。