背景

今天第一次关联了github账号，由于使用的是24寸显示器，像素1920*1200，很普通的，但发现掘金文章页面不足700px，两侧留白区域太多了，为了减少浪费说干就干，不就是修改几个css属性吗？

浏览器

最基本原理是加载html、css、JavaScript资源后，简单的过程有字符串转词法语法分析、对象模型构建（domTree、cssTree、renderTree）、布局计算、页面绘制等；

此次我们需要加载本地资源，最直接的是写个chrome扩展；

扩展文件目录

├── icon.png

├── index.css

├── index.js

└── manifest.json

manifest.json

核心配置文件

包括应用生效的网址，避免影响其他网址；

加载css文件资源，本案例仅css一个组否了，js实际不需要；

加载js文件；

{
"name": "juejin",
"description": "掘金网站皮肤",
"version": "1.0",
"manifest_version": 2,
"icons": {
"128": "icon.png"
},
"permissions": [
"https://juejin.cn*"
],
"content_scripts": [
{
"css": [
"index.css"
],
"js": [
"index.js"
],
"matches": [
"https://juejin.cn*"
]
}
]
}

css文件

.container {
/* max-width: 1280px !important; */
max-width: 1440px !important;
/* min-width: 1440px; */
}
.timeline-entry-list {
width: 1180px !important;
}
.main-area {
width: 1120px !important;
}
.stream {
width: 1040px !important;
}
.books-list {
max-width: 1180px !important;
}

.book-card {
max-width: 1400px !important;
}
.minor-area {
background: #fff;
padding: 0 10px;
}
.sticky-block-box {
background: #fff;
padding: 1rem 1.3rem;
}

body {
background: #34495e;
}

效果图

我仅是提供一种修改的可行性，具体可以自行设置css文件内容；

总结

利用扩展功能，在其他网址基础上可以额外加载一个资源机会，以此来修改，满足某种需求；

去年年会活动中，需要一个签到功能，企业微信有此应用，但需求方对部分不满意，比如签到二维码太小，位置不好；我可以告诉需求方，这是第三方产品，“臣妾做不到啊”，但本着100%满意，反正是现场一台电脑投屏出来的，只要保证此电脑上显示正确即可，当时想到是利用XSwitch扩展，重定向到本地资源，想了下这个是在原有内容基础上追加自己的，万一依赖的文件内容有更新，又需要频繁更新；所以不如自己写个扩展，加载自己的，隔离性更好，也不破坏原有网站资源内容；