Chrome浏览器扩展开发之自动化操作页面

Chrome浏览器扩展开发之自动化操作页面
b/s开发javascripthtml5htmlcssjquerychrome浏览器扩展作者:行动派
Chrome浏览器支持扩展(Extension)开发,来定制扩展现有的功能,如:自动登录,定时刷新,抢票等功能,本文以一个简单的小例子,简述Google Chrome 扩展开发的基本步骤,仅供学习分享使用。

什么是Chrome扩展?
Chrome扩展使用HTML、JavaScript、CSS和图片等Web技术开发,用以增强Chrome浏览器功能的一种程序。Chrome扩展并不是插件,扩展无需了解浏览器的源代码,只需要Web相关开发技术即可,而插件是更底层的浏览器功能扩展,需要深入掌握浏览器的源代码。

Chrome扩展组成部分
Chrome扩展,至少包括一个manifest.json和一个js文件

manifest.json是扩展的调度中心,用于声明各种资源。该文件采用JSON格式定义
js文件中定义要执行的操作
Chrome扩展,通常还可以包括图标、页面和CSS等资源

图标通常是19px*19px的PNG文件
页面通常是HTML文件,用于定义显示给用户的窗口,如popup页面或options页面等【注意】:控制popup窗口或options窗口的分别是popup.js和options.js文件
CSS是常见的定义页面样式的文件
作为一个Google Chrome扩展,上述所有文件应该都位于一个根目录之下,各个不同类型的文件可以位于不同的子目录下。

Chrome扩展部署运行
Chrome扩展作为浏览器的一部分而存在,运行无需依赖任何Web服务器。通过Chrome 浏览器打开chrome://extensions页面可以查看当前Chrome 浏览器部署的全部扩展,或者通过Chrome 浏览器的“ ->更多工具->扩展程序”打开。

开启【开发者模式】,然后【加载已解压的扩展程序】即可进行运行调试程序,如果修改了程序,可以点击【重新加载】更新程序。chrome://extensions页面如下:

示例效果图
本例主要是监控某网站某件商品是否存在且是否有货,如果存在,则加入购物车 。Chrome扩展加载后,就会在浏览器地址栏右边,显示图标,单击显示popup页面,如下所示:

Chrome浏览器扩展还有配置选项页面,用于扩展说明,配置相关信息等,通过右键图标按钮–>选项打开对应页面,或者在扩展详细信息–>扩展程序选项进行打开,如下所示:

核心代码
本例主要核心文件有manifest.json,如下所示:

复制代码
1 {
2 “manifest_version”: 2,
3 “name”: “iSmoking”,
4 “version”: “1.0.0”,
5 “description”: “iSmoking监控程序”,
6 “icons”:
7 {
8 “16”: “img/smoking.png”,
9 “48”:“img/smoking.png”,
10 “128”: “img/smoking.png”
11 },
12 “background”:
13 {
14 “scripts”: [“js/jquery-3.5.1.min.js”,“js/background.js”]
15 },
16 “browser_action”:
17 {
18 “default_icon”: “img/smoking.png”,
19 “default_title”: “iSmoking监控程序”,
20 “default_popup”: “popup.html”
21 },
22 “content_scripts”:
23 [
24 {
25 “matches”: [“https://www.smokingpipes.com/"],
26 “js”: [“js/jquery-3.5.1.min.js”, “js/content.js”],
27 “run_at”: “document_end”,
28 “all_frames”:true
29 }
30 ],
31 “permissions”:
32 [
33 “contextMenus”,
34 “tabs”,
35 “notifications”,
36 “webRequest”,
37 “webRequestBlocking”,
38 “storage”,
39 "https://www.smokingpipes.com/

40 ],
41 “options_ui”:
42 {
43 “page”: “options.html”,
44 “chrome_style”: true
45 }
46 }
复制代码
其中browser_action 用于配置适用于整个浏览器对象的功能,如果只针对某一个页面生效,可以使用page_action , 且二者不可以并存。

Popup页面即点击图标弹出的对应的页面,可以引用JS进行业务处理,也可以和Background(后台一直存在的程序)或者 ContentScript(用户操作Dom)进行通信。

复制代码
1 <!doctype html>
2
3
4
5 iSmoking监控
6
7
9
10
11

iSmoking监控


12

13 当前用户名:


14 当前商品Id:

15 监控数量:

16

17

18
19
20
21

22
23
24
复制代码
Popup和Content进行通信,

复制代码
1 $(function () {
2 var keys = [“ismoking_username”, “ismoking_password”, “ismoking_itemid”,“ismoking_count”,“ismoking_status”];
3 //从storage中获取之前保存的内容
4 $("#username").val(localStorage.getItem(keys[0]));
5 $("#password").val(localStorage.getItem(keys[1]));
6 $("#itemid").val(localStorage.getItem(keys[2]));
7 $("#count").val(localStorage.getItem(keys[3]));
8 $("#start").click(function () {
9 var key_msg={“ismoking_username”:localStorage.getItem(keys[0]), “ismoking_password”:localStorage.getItem(keys[1]),“ismoking_itemid”:localStorage.getItem(keys[2]),“ismoking_count”:localStorage.getItem(keys[3]),“ismoking_status”:“begin”};
10 console.log(JSON.stringify(key_msg));
11 sendMessageToContentScript(key_msg,function(msg){
12 console.log(“收到成功”+msg);
13 });
14
15 });
16 $("#stop").click(function () {
17 var key_msg={“ismoking_username”:localStorage.getItem(keys[0]), “ismoking_password”:localStorage.getItem(keys[1]),“ismoking_itemid”:localStorage.getItem(keys[2]),“ismoking_count”:localStorage.getItem(keys[3]),“ismoking_status”:“stop”};
18 console.log(JSON.stringify(key_msg));
19 sendMessageToContentScript(key_msg,function(msg){
20 console.log(“收到成功”+msg);
21 });
22 });
23 });
24
25 // 获取当前选项卡ID
26 function getCurrentTabId(callback)
27 {
28 chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
29 {
30 if(callback) callback(tabs.length ? tabs[0].id: null);
31 });
32 }
33
34 // 向content-script主动发送消息
35 function sendMessageToContentScript(message, callback)
36 {
37 getCurrentTabId((tabId) =>
38 {
39 chrome.tabs.sendMessage(tabId, message, function(response)
40 {
41 if(callback) callback(response);
42 });
43 });
44 }
复制代码
然后通过ContentScript监听信息,如下所示:

复制代码
1 // 接收来自后台的消息
2 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
3 {
4 console.log(‘收到来自 ’ + (sender.tab ? “content-script(” + sender.tab.url + “)” : “popup或者background”) + ’ 的消息:’, request);
5
6 for (const key in request) {
7 if (request.hasOwnProperty(key)) {
8 const element = request[key];
9 localStorage.setItem(key,element);
10 }
11 }
12 // tip(JSON.stringify(request));
13 sendResponse(‘我收到你的消息了:’+JSON.stringify(request));
14 var status = request[keys[4]];
15 if(status==“begin”){
16 doing1();
17 }
18 });
复制代码
提示:功能实现和前两篇博客基本一样,只是实现方式略有差异。关于Chrome扩展的开发文档,可以参考链接 或者 扩展开发极客博客

备注
人不轻狂枉少年,一首宋词放松一下:
鹧鸪天·西都作
【宋】朱敦儒
我是清都山水郎,天教分付与疏狂。
曾批给雨支风券,累上留云借月章。

诗万首,酒千觞。几曾着眼看侯王?
玉楼金阙慵归去,且插梅花醉洛阳。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在进行 UI 自动化测试过程中,如果 Chrome 浏览器出现 ERR_INSUFFICIENT_RESOURCES 错误,可能是由于以下几个原因导致的: 1. 内存泄漏:自动化测试过程中,可能会出现未正确释放资源的情况,导致内存占用不断增加,最终导致资源不足错误。你可以检查你的测试代码,确保在每个测试完成后正确地释放浏览器实例和其他资源。 2. 多个 Chrome 实例同时运行:如果你同时运行了多个 Chrome 实例进行自动化测试,可能会导致资源不足。你可以尝试限制同一时间运行的 Chrome 实例数量,或者在测试完成后手动关闭不需要的实例。 3. 配置不当:某些 Chrome 浏览器配置可能会导致资源不足错误。你可以尝试修改 Chrome 的配置,例如减少页面缓存大小、禁用扩展程序等。可以查阅 Chrome 浏览器文档或者社区来获取更详细的配置建议。 4. 硬件资源不足:如果你的计算机硬件资源有限,例如内存、处理器等,可能会导致浏览器运行时出现资源不足错误。在运行自动化测试之前,确保你的硬件资源能够满足测试需求。 解决 ERR_INSUFFICIENT_RESOURCES 错误的一般方法包括优化测试代码、限制并发运行的浏览器实例数量、调整浏览器配置或升级硬件资源。根据具体情况,你可能需要结合以上方法尝试解决问题。如果问题仍然存在,建议提供更多关于错误发生的详细信息,以便进行进一步的诊断和解决。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值