碎碎念4

距离上一次更新博客又过去好久……碎碎念3还是暑假在家里更新的,现在已经开学两个多月了。一方面确实没什么灵感,生活中也没碰见有意思的事情,另一方面也没做什么好玩的东西。
今天周末在宿舍里闲着,写一篇博客来消遣消遣。

chromium

之前有一个很伟大的构思,利用开源的浏览器内核chromium自己定制一个轻量化的浏览器,比起edge和chrome,我的想法是在其基础上尽量做功能和界面上的减法,以减少对系统内存的开销。我的设计理念是:JUST A BROWSER,因为chrome里面集成了太多谷歌的东西,同样的edge里面集成了很多微软的东西,而这些功能绝大多数都是我平时根本不用的,很浪费内存。浏览器,顾名思义,本质是用来浏览东西的
也考虑过用firefox的开源内核,不过貌似其在开发程度和社区完整度上远不及chromium,于是便放弃了firefox。
万事开头难,把chromium庞大的项目克隆到本地就相当费劲,完整的chromium项目有60多g左右。具体的拉取、构建、编译可以查阅chromium的官网(需要梯子)。以下是我总结的过程:
确保自己的电脑符合要求:

requirements
1
2
3
4
# An x86-64 machine with at least 8GB of RAM. More than 16GB is highly recommended.
# At least 100GB of free disk space on an NTFS-formatted hard drive. FAT32 will not work, as some of the Git packfiles are larger than 4GB.
# An appropriate version of Visual Studio, as described below.
# Windows 10 or newer.

确保电脑安装了python > 3.xVisual Studio 2022 (>=17.0.0)git > 2.14x,并确保这三者的环境变量都添加在了path中。安装python时,选择add to path即可;vs2022的环境变量则需要根据实际情况填写,例如,我的变量名为:vs2022_install,变量值为E:/vs2022.取决于vs2022在电脑上的实际安装位置。
然后下载depot_tools,解压到任意位置,并在环境变量path里添加刚刚解压完的depot_tools文件夹的位置。
以管理员身份运行cmd:

1
2
set http_proxy=http://127.0.0.1:10809
set https_proxy=http://127.0.0.1:10809

这一步是确保在接下来的拉取过程全程走代理,否则会失败报错,其中10809要看实际的本地代理端口来修改。
然后:

1
gclient

配置git(可选):

1
2
3
4
5
6
git config --global user.name "My Name"
git config --global user.email "my-name@chromium.org"
git config --global core.autocrlf false
git config --global core.filemode false
git config --global branch.autosetuprebase always
git config --global core.longpaths true

最后,在一个大一点的硬盘(>200g最好)下,新建一个文件夹,随意命名(比如chromium),以管理员身份运行的一个cmd窗口里进入该文件夹,运行:

1
fetch chromium

即可开始拉取,这个过程相当漫长,取决于你的网速。
如果不希望拉取完整的(包含历史版本的chromium)的源码,可以执行这个:

1
fetch chromium --no-history

这样会快一些。
完成之后,chromium文件夹下应该是以下结构:

在构建之前,需要生成构建文件,例如,使用默认的构建配置:

1
2
cd src
gn gen out\Default

生成完成之后,即可开始构建浏览器:

1
autoninja -C out/Default chrome

整个过程又是无比漫长,而且相当占用电脑运存,电脑什么都干不了。
默认的配置文件是debug版本的,构建出来的chrmium高达90多g。但是我们根本不需要这么多乱七八糟的,直接构建发行版会快几倍:

1
gn gen out\Default --args="is_debug=false"

当然了,除了构建发行版,有很多选项也可以大大降低构建时间和chromium的大小,具体可选参数查阅chromium的官网,以下是一些例子:

1
2
3
4
5
is_component_build = true - this uses more, smaller DLLs, and may avoid having to relink chrome.dll after every change.
enable_nacl = false - this disables Native Client which is usually not needed for local builds.
target_cpu = "x86" - x86 builds may be slightly faster than x64 builds. Note that if you set this but don't set enable_nacl = false then build times may get worse.
blink_symbol_level = 0 - turn off source-level debugging for blink to reduce build times, appropriate if you don't plan to debug blink.
v8_symbol_level = 0 - turn off source-level debugging for v8 to reduce build times, appropriate if you don't plan to debug v8.

完整命令:

1
2
gn gen out\Default --args="is_debug=false" is_component_build = true enable_nacl = false target_cpu = "x86" blink_symbol_level = 0 v8_symbol_level = 0
autoninja -C out/Default chrome

首次构建完成之后,不得不感叹chromium的干净和整洁,比起edge和chrome,chromium内核浏览器真的非常干净,一点多余的东西都没有。

上图是我第一次全量构建发行版的照片,用了8个多小时。尽管后面修改都是增量构建,但也非常消耗时间,随随便便就是半个小时。
然后的然后……就是痛苦的修改环节了,chroium的项目是如此之大,即便借助ai,想要实现一个功能也是困难重重,到现在我只完成了对logo的修改,显示了一行诗句,并且加上了打字的动画效果。

TO DO LIST:
想将浏览器上方的控件全部隐藏,鼠标滑到时才显示,实现一个无边框浏览器的效果。我觉得能做出来的话应该会相当惊艳的,因为我目前还没看到这样的设计,不过嘛…….前提是我能将它转变为现实。
还有一个就是内存问题,虽然不是“问题”,但是我不是很满意。由于chromium沙盒(sandbox)机制的存在,当浏览器开多个标签页时,内存占用会急剧增大:

什么是沙盒机制?
浏览器的沙箱机制是一种安全机制,旨在隔离网站或网页的不同内容,防止恶意代码或潜在风险的网页内容对用户设备造成危害。沙箱机制限制了网页代码的执行权限,使其无法访问或修改系统的敏感数据和资源。
具体来说,沙箱机制的主要功能包括:
资源隔离:每个网页或标签页在独立的进程中运行,限制了它们对其他进程或操作系统资源的访问。这样,即便一个网页含有恶意代码,也无法影响其他页面或整个系统。
权限限制:网页运行的权限被严格控制,无法直接访问用户文件系统、摄像头、麦克风等硬件资源,除非获得用户的明确授权。
同源策略:同源策略是浏览器的一个安全特性,用于限制不同源之间的交互。沙箱机制会对跨域请求进行限制,防止网页随意访问其他域名的资源。
插件隔离:沙箱还可以隔离浏览器插件,防止插件中的潜在恶意代码影响整个浏览器或其他网页的内容。
内存保护:通过独立进程,沙箱机制也保护了浏览器的内存,避免因内存溢出导致的攻击。浏览器沙箱会监控内存的使用情况,防止恶意代码通过内存漏洞影响系统。
这种机制大大提高了浏览器的安全性和稳定性。即便某个网页含有恶意代码,沙箱机制能确保恶意代码的影响范围仅限于当前标签页,防止其扩散至系统级别,保护用户的隐私和数据安全。

这是一个很好的机制,不过可以约等于每开一个新标签页,就相当于新开了一个浏览器,尽管chromium内核做了大量的优化,我觉得内存占用还是高了。因此在我的浏览器版本中,我想实现一个简单的逻辑:当打开一定数量的标签页之后,自动将最久的标签页以某种方式“冻结”起来,比如停止更新和渲染。这就涉及很深层次的东西了,不知道自己什么时候能做出来。
总而言之,在过去很长的一段时间内,我对chromium的工程是这样的:小心翼翼改了半天,然后增量构建,等半小时,等到个报错,心肺骤停,心态炸裂,一路ctl+z回到开始,再修改……

浏览器插件

写了3个浏览器插件,没什么太大用处,于我而言,倒是增强了些操作体验,当焦点离开浏览器时,能得到一些反馈。下述3个插件edge和chrome均可使用。

失焦变灰

点此直接下载源码或者:

创建background.js

1
2
3
4
// background.js
chrome.runtime.onInstalled.addListener(() => {
console.log('Extension installed.');
});

创建content.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// content.js
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
// 当页面隐藏时,应用灰度效果
document.documentElement.style.filter = 'grayscale(100%)';
} else {
// 当页面重新可见时,移除灰度效果
document.documentElement.style.filter = 'none';
}
});

document.addEventListener('mouseleave', function () {
// 当鼠标离开窗口时,应用灰度效果
document.documentElement.style.filter = 'grayscale(100%)';
});

document.addEventListener('mouseenter', function () {
// 当鼠标重新进入窗口时,移除灰度效果
document.documentElement.style.filter = 'none';
});

创建manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// manifest.json
{
"manifest_version": 3,
"name": "Focus Black & White",
"version": "1.0",
"description": "当屏幕焦点从浏览器移开时,将网页内容变为黑白。",
"permissions": [
"activeTab"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js": [ "content.js" ]
}
]
}

创建popup.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>Focus Black & White</title>
<style>
body {
width: 200px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h4>Focus Black & White</h4>
<p>当屏幕焦点移开时,网页将变为黑白。</p>
</body>
</html>

background.jscontent.jsmanifest.jsonpopup.html这四个文件放在同一文件夹下,命名为white-black.这个插件会让鼠标离开浏览器时,浏览器内容自动变灰。
效果如下:

失焦模糊

点此直接下载源码或者:

创建background.js

1
2
3
4
// background.js
chrome.runtime.onInstalled.addListener(function () {
console.log("Focus Blur Extension installed.");
});

创建content.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// content.js
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
//检测浏览器焦点
document.body.style.filter = 'blur(10px)';
} else {

document.body.style.filter = 'none';
}
});

document.addEventListener('mouseleave', function () {

document.body.style.filter = 'blur(10px)';
});

document.addEventListener('mouseenter', function () {

document.body.style.filter = 'none';
});

创建manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// manifest.json
{
"author":"李思然",
"manifest_version": 3,
"name": "Focus Blur Extension",
"version": "1.0",
"description": "当焦点从浏览器移开时,自动模糊页面内容。-by然",
"permissions": [
"tabs",
"activeTab"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js": [ "content.js" ],
"run_at": "document_end"
}
]
}

创建options.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Focus Blur Extension Settings</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>插件设置</h1>
<label>
<input type="checkbox" id="grayscaleToggle"> 启用焦点离开时的黑白效果
</label>
<script src="options.js"></script>
</body>
</html>

同样,将这四个文件放在同一文件夹下,命名为blur.

加载时间条

点此直接下载源码或者:

创建content.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// content.js
// 记录页面加载开始时间
const startTime = performance.now();

// 监听页面加载完成事件
window.addEventListener('load', () => {
const endTime = performance.now();
const loadTime = (endTime - startTime).toFixed(2); // 获取加载时间并保留两位小数

// 创建显示加载时间的容器
const loadTimeDiv = document.createElement('div');
loadTimeDiv.textContent = `页面加载完成时间:${loadTime} ms`;
loadTimeDiv.className = 'page-load-timer';

// 将容器添加到页面顶部
document.body.appendChild(loadTimeDiv);

// 设置定时器,3秒后自动移除提示框
setTimeout(() => {
loadTimeDiv.remove();
}, 3000); // 显示3秒后自动消失
});

创建manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"manifest_version": 3,
"name": "Page Load Timer",
"version": "1.0",
"description": "显示页面加载时间的插件。",
"permissions": [ "tabs" ],
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js": [ "content.js" ],
"css": [ "style.css" ]
}
]
}

创建style.css

1
2
3
4
5
6
7
8
9
10
11
12
.page-load-timer {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 16px;
text-align: center;
z-index: 10000;
}

将这三个文件放进同一文件夹,命名为loadingtime.这个插件会在浏览器顶部暂时显示当前网页的加载时间。

关于插件

上面三个插件可以同时使用,互不影响。
如何使用?
不论是chrome还是edge,打开拓展管理,选择开发人员模式,会新出现几个选项,然后选择加载解压缩的拓展,然后选择刚刚三个文件夹的位置即可。

最近对历史相当感兴趣,买了两本书,一本人间词话(以前看过,忘得差不多了),一本则是讲唐历史的。

有时感觉,过去甚至比现在还美好,人类真的在进步吗?
看人间词话的时候,读到这个版本的作者是这样评价王国维的,他有种恬静的美,绝对有区别于麻木。那这两者有什么区别呢?我认为在外表上两者有很大相同之处,都是对外界的刺激没有太大的反应,但恬静者的内心却是有波澜的,思维相当活跃,麻木则是在内心也毫无反应。
要我来说,王国维离恬静还有些距离,因为真正恬静的人是不会去投湖自杀的,他的自杀原因一直众说纷纭,但其中肯定有对传统的固守,对时局的无奈,学术的孤立以及身体方面的原因。
恬静者,顺其自然也。或许可以这样说,在王国维的一生中,大多数时候都是恬静的,可惜在最后的时间里做了一件不恬静的事。

球队

最近球队发生了点事情,具体的我记录在日记本上,这里不做更多赘述。一开始知道的时候还挺震惊,因为这一点也不像某些人之前的风格。
不做任何评价,我本身是个旁观者,没有参与到事件本身。对瓜也没兴趣,爱咋样咋样吧,与我都没有太大关系,心在桃园外,兀自笑春风。
后来想想,自己作为曾经的队长,什么都不管是不是有点不负责任,emmm……多少有点吧。不过要是有人问起我这个,我还是会说,I DON’T GIVE A SHIT,地球有没有我不还是照样转。

wireshark

最近实验课学用wireshark软件抓包,获取各种信息报文:

本来,老师要求的是,用电脑(物理层面)创造各种环境,来捕获该状态的报文,比如断网然后捕获,那么捕获到的报文状态码应该是type=3或者type=11,表示发送报文状态失败。
但是这样太麻烦了,我灵机一动,直接用scapy写一个小脚本,自己向自己发送指定类型的信息报文不就行了,简单省事,面向结果的编程:

1
2
3
from scapy.all import *
packet = IP(dst="192.168.1.1")/ICMP(type=5)
send(packet)

要什么类型的报文,直接在代码里改type,运行脚本,然后启动捕获,包100%准确率的,就是不知道老师知道了会怎么想。

喜剧,悲剧

人们常常说,喜剧的内核是悲剧,那悲剧的内核又是什么呢?就我接触过的悲剧作品来看,悲剧的内核或许是希望和一些人具备的美好的品质,通俗来讲就是人性的光辉。悲剧讲的都是痛苦,灾难和不幸,而不论剧中人物的希望光辉是加深了这种苦难,还是最终化解了它,真正能使观众共鸣的,还是在苦难之中挣扎的过程,即抓住希望的过程。所以就我而言,悲剧的结局似乎并没有那么重要,普遍意义上的苦难不会因为有个大团圆式的结局而变得美好。

近期…