chrome插件--抢票demo版

最新推荐文章于 2024-04-22 21:03:38 发布

callmeCassie

最新推荐文章于 2024-04-22 21:03:38 发布

阅读量2.2k

点赞数

分类专栏：工具文章标签： chrome vscode javascript

本文链接：https://blog.csdn.net/callmeCassie/article/details/119854470

版权

工具专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.核心文件manifest.json

三个必不可少的配置项：manifest_version、name、version

{
	
	"manifest_version": 2,
	"name": "demo",
	"version": "1.0.0",
	"description": "这个是用来描述插件的",
	"icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
	"background":
	{
        "scripts": ["lib/jquery-3.2.1.min.js"]
	},
	"browser_action": 
	{
		"default_icon": "img/icon.png",
		"default_title": "这是一个示例Chrome插件",
		"default_popup": "popup.html"
	},
	"content_scripts": 
	[
		{
			"matches": ["<all_urls>"],
			"js": ["lib/jquery-3.2.1.min.js", "popup.js"],
			"css": ["css/custom.css"],
			"run_at": "document_start"
		}
	],
	"permissions":
	[
		"contextMenus",
		"tabs",
		"notifications",
		"webRequest", 
		"webRequestBlocking",
		"storage",
		"http://*/*",
		"https://*/*"
	]
}

在这里插入图片描述

2.popup.html

popup是点击图标时打开的一个小窗口网页，焦点离开网页就立即关闭，一般用来做一些临时性的交互。
在这里插入图片描述

在manifest.json文件中设置了default_popup的文件为’popup.html’，然后我们在popup.html文件里加个按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">秒杀</button>
    <script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="popup.js"></script>
</body>
</html>

以及popup.js文件

$('#btn').on('click', function() {
    console.log('按钮被点击了')
})

使用vs code的live server插件查看页面是这样的
在这里插入图片描述
或者直接加载整个文件夹作为插件

将该扩展程序固定在右上角，点击插件后就是popup.html的内容了
popup中可以直接通过chrome.extension.getBackgroundPage()获取background的window对象。

3.content-script.js

在manifest.json中借助content-scripts我们可以实现通过配置的方式向指定页面注入JS和CSS，popup没有权限直接操作网页,可以通过发送消息到content-script，content-script可以操作DOM
在这里插入图片描述

4.实现效果：点击秒杀后会自动点击左侧“购买”按钮

在这里插入图片描述

popup.js

$('#btn').on('click', function() {
    // 发送消息到content
    chrome.tabs.query({active:true, currentWindow:true}, function(tabs){
        chrome.tabs.sendMessage(tabs[0].id, {message: "seckill"})
    });
}

content-script.js

// content接收消息并设置到网页搜索框里：
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
	if(request.message == "seckill"){
		// 隔一秒点击购买按钮
		setInterval(function() { $('#buy').click() }, 1000);
	}
});

5.关于调试

popup右键检查

在这里插入图片描述

content-script文件可以直接F12控制台查看，代码修改后似乎只能重新加载插件，刷新页面无效果

在这里插入图片描述
或者这里点击开关

background点击背景页调试

6.关于通信

JS种类	可访问的API	DOM访问情况	JS访问情况	直接跨域
injected script	和普通JS无任何差别，不能访问任何扩展API	可以访问	可以访问	不可以
content script	只能访问 extension、runtime等部分API	可以访问	不可以	不可以
popup js	可访问绝大部分API，除了devtools系列	不可直接访问	不可以	可以
background js	可访问绝大部分API，除了devtools系列	不可直接访问	不可以	可以
devtools js	只能访问 devtools、extension、runtime等部分API	可以	可以	不可以

7.参考文档

chrome扩展程序非官方文档: http://www.kkh86.com/it/chrome-extension-doc/extensions/

插件开发攻略：https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

浏览器页面右键菜单点击（homepage_url，“peimissions”: [“contentMenus”]）：https://blog.csdn.net/qq_38161040/article/details/107698075

chrome_url_overrides: https://segmentfault.com/a/1190000005896962

华为手机抢票实例： https://juejin.cn/post/6979127576409145374

12306抢票实例： https://blog.csdn.net/KingWTD/article/details/54425903

秒杀助手：https://blog.csdn.net/gongjunhao/article/details/78699223

喝水插件：https://juejin.cn/post/6951554398740807717

MarkDown插件：https://juejin.cn/post/6844903621281185799

网站自动登录：https://juejin.cn/post/6844903501965819918

爬虫： https://juejin.cn/post/6951366925557432356

操控chrome：https://juejin.cn/post/6986437856348602382

一键上班赖皮：https://juejin.cn/post/6844903740827238413

小结：https://www.cnblogs.com/meteoric_cry/p/3574457.html

callmeCassie

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
chrome插件--抢票demo版

1.manifest.json{ "manifest_version": 2, "name": "demo", "version": "1.0.0", "description": "我要iphone13", "icons": { "16": "img/icon.png", "48": "img/icon.png", "128": "img/icon.png" }, "background": { "scripts": ["lib/jquery-3.2.1
复制链接

扫一扫