谷歌浏览器扩展程序开发(谷歌浏览器没有扩展程序功能)

一、背景

为什么会自己实现chrome浏览器的扩展程序呢?还是要从我的工作说起。公司内部有大量自己的网站(erp、gitlab、数据库操作平台、微服务相关平台等等),种类繁杂,涉及的账号也很多,同时公司在数据安全方面要求比较高,每隔一段时间就要更换密码且密码复杂度要求极高,这就导致需要自己手动保存账号密码(因为是记不住的,并且很多网站不能记住密码自动登录)。

我个人是使用notepad来保存数据的。这就导致,每次在使用chrome登录网站时都需要切换窗口copy来copy去,比较麻烦,所以就萌生了一个想法:如果每次不需要切换窗口就可以查到账号密码该多好。我想到了扩展程序。

在此要提一句,本人之前在chrome网上应用店安装过扩展程序,主要是一类辅助工具(列表化gitlab、翻译、自定义滚动栏等等),所以这次理所应当考虑到了使用这个扩展程序。

chrome网上应用店 二、开发

1)新建一个json文件:manifest.json。内容如下:

manifest.json文件内容

2)新建popup.html。此文件主要是点击组件之后的样式,其实类似于一个小网页。因为我的功能就是简单地查询,所以只有一个查询按钮、文本框。

popup.html文件内容

3)新建popup.js。此文件用于实现主要的功能,相信有过前端开发经验的都比较熟悉了。为了操作方便,我增加了键入Enter实现点击功能。

popup.js文件内容

4)最基本的文件就这3个,核心文件是第一个。如果需要依赖其他js之类的,可以自行下载并放到同一级目录下。

通过下面的方式进入扩展程序,或者直接访问 chrome://extensions/

进入扩展程序

点击打包扩展程序,并填入上面3个文件所在目录(注意填写的是根目录,并且3个文件是在同一个目录下),并选择打包扩展程序。

打包扩展程序 打包扩展程序

出现以下提示,则表示打包成功。

打包成功

接下来,选择“加载已解压的扩展程序”,也是选择到根目录。点击“选择文件夹”即可。

加载扩展程序

然后就可以看到加载进来了。

加载成功

点击图标,或键盘输入快捷键即可呼出工具,输入需要查询的信息,回车即可查询。

程序使用

本文来自“修夏”用户投稿,该文观点仅代表作者本人,不代表华夏信息网立场,本站不对文章中的任何观点负责,内容版权归原作者所有、内容只用于提供信息阅读,无任何商业用途。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站(文章、内容、图片、音频、视频)有涉嫌抄袭侵权/违法违规的内容,请发送邮件至1470280261#qq.com举报,一经查实,本站将立刻删除、维护您的正当权益。如若转载,请注明出处:http://www.xxxwhg.com/ls/87682.html

上一篇 2023-04-27 11:29:05
下一篇 2023-04-27 05:29:00

相关推荐