🤭在公司实习的日子太无聊，总想着摸鱼，这不今天在摸鱼时被路过的上级抓到，发现来人时立马切屏显得非常生硬，很容易引起怀疑，我心想能不能开发个插件，在有人路过时，按快捷键，重定向到一个404页面，假装自己在调试程序，完美掩饰
灵光乍现，立马开干
使用Chrome扩展实现
1.Ctrl+Shift+Z跳转到404
2.Ctrl+Shift+X返回之前页面
1.书写Manifest.json文件
什么是manifest.json？
manifest.json 是 Chrome 扩展的核心配置文件，它定义了扩展的基本信息、功能、权限、资源以及与其他浏览器功能的交互方式。它是扩展的“身份证”和“蓝图”，浏览器通过读取 manifest.json 来了解扩展的各个方面，并正确加载和运行扩展。
{
"manifest_version": 3,
"name": "404 Redirect",
"version": "1.0",
"description": "Redirects to a custom 404 page when Ctrl+Shift+Z is pressed, and returns to the previous page when Ctrl+Shift+X is pressed",
"permissions": [
"activeTab",
"history"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
},
//设置两个快捷键命令Ctrl+Shift+跳转到404
//Ctrl+Shift+X返回之前页面
"commands": {
"toggle-feature": {
"suggested_key": {
"default": "Ctrl+Shift+Z"
},
"description": "Redirect to custom 404 page"
},
"return-previous": {
"suggested_key": {
"default": "Ctrl+Shift+X"
},
"description": "Return to the previous page"
}
},
"web_accessible_resources": [
{
"resources": ["custom404.html"],
"matches": ["<all_urls>"]
}
]
}
有几个比较重要的配置项
（1）扩展的功能和行为
这些字段定义了扩展的功能、行为以及与浏览器的交互方式。
permissions
- 用途：声明扩展需要的权限，例如访问特定的网站、使用浏览器的 API 等。
- 值：一个数组，列出扩展需要的权限。
- 示例：JSON复制
"permissions": [
"activeTab",
"storage",
"http://*/*"
]
background
- 用途：定义扩展的后台脚本或服务工作线程。
- 值：一个对象，指定后台脚本或服务工作线程的文件路径。
- 示例：JSON复制
"background": {
"service_worker": "background.js"
}
content_scripts
- 用途：指定扩展将注入到网页中的脚本和样式表。
- 值：一个数组，每个元素是一个对象，定义脚本和样式表的路径及其适用的网页。
- 示例：JSON复制
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"],
"css": ["styles.css"]
}
]
commands
- 用途：定义扩展的快捷键命令。
- 值：一个对象，键是命令名称，值是一个对象，包含快捷键和描述。
- 示例：JSON复制
"commands": {
"toggle-feature": {
"suggested_key": {
"default": "Ctrl+Shift+Z"
},
"description": "Redirect to custom 404 page"
}
}
（2）. 用户界面
这些字段定义了扩展的用户界面元素，例如工具栏按钮、弹出窗口等。
action
- 用途：定义扩展在浏览器工具栏上显示的图标和用户点击时的行为。
- 值：一个对象，包含工具栏按钮的默认行为和图标。
- 示例：JSON复制
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
2.编写核心逻辑实现跳转功能
在background.js中编写我们跳转404和返回之前页面的逻辑。
// 用于存储跳转前的页面URL的数组
let previousUrls = [];
// 监听快捷键命令
chrome.commands.onCommand.addListener((command) => {
if (command === "toggle-feature") {
// 获取当前活动的标签页
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
if (tabs.length > 0) {
const currentTab = tabs[0];
// 记录当前页面的URL到数组中
previousUrls.push(currentTab.url);
// 获取自定义404页面的URL
const custom404Url = chrome.runtime.getURL("custom404.html");
// 跳转到自定义404页面
chrome.tabs.update(currentTab.id, { url: custom404Url });
}
});
} else if (command === "return-previous") {
// 获取当前活动的标签页
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
if (tabs.length > 0 && previousUrls.length > 0) {
const currentTab = tabs[0];
// 从数组中弹出最后一个记录的URL
const previousUrl = previousUrls.pop();
// 跳转回之前的页面
chrome.tabs.update(currentTab.id, { url: previousUrl });
} else {
// 如果没有找到历史记录，提示用户
alert("No previous page found.");
}
});
}
});
3.书写跳转的404页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom 404 Page</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.container {
margin-top: 50px;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>404 - Page Not Found</h1>
<p>Sorry, the page you are looking for does not exist.</p>
<a href="https://example.com">Go back to the homepage</a>
</div>
</body>
</html>
这里就随便写一个404页面就可以，最原始的404页面是我们摸鱼最好的伪装
至此我的摸鱼插件的核心功能已经实现😁
此外还有popup.html是插件与用户交互的弹窗，这里随便写一下就可以。
4.安装并运行插件
进入扩展管理页面 ，点击加载未打包的扩展程序，选择你的插件文件夹即可。
加载完成后你的插件会显示在这里
好啦，现在我们可以开始愉快地摸鱼啦🤭🤭🤭。
