最近，我又一次的开始了对apache dubbo框架的学习。过去的一年里，陆陆续续的投入了一些时间在这个框架上面。无奈，工作的限制让我在日常中并不会用到这个框架，导致我对dubbo的掌握总是不太牢固。希望这一次可以在以往的基础上更进一步，对它的掌握更加彻底一些。
这几天，在浏览dubbo官方页面上的用户手册的时候，对页面的展示效果是越来越不满意。不满主要集中在，官方页面中的默认宽度实在是太小了，导致页面中的表格内容稍微多一些，表格底下就会出现一个大大的滚动条，展示效果如图所示。
滚动条的存在，导致文字浏览起来十分的不便。而这个时候，其实屏幕上还有大片的空白区域没有利用起来。通过f12查看页面源代码可以发现，页面展示区域是设置了最大宽度为1280px。
1
2
3
4
5
6
7
8
| .content-section {
max-width: 1280px;
margin: 0 auto;
box-sizing: border-box;
padding: 40px 40px 60px;
position: relative;
min-height: 1100px;
}
|
如果取消了max-width属性的设置，则效果将会变为下图所示。表格中文字的展示看起来舒服了很多，很多之前需要拖动滚动条才能展示的内容，已经直接展示了出来。
现在的问题就很明确了，每次打开一个新页面之后，我们f12一下，稍作改动，问题就可以圆满解决，看上去也不是太麻烦。
但是，这样重复的动作，如果你还是像我一样觉得还是有些麻烦。那该怎么办呢？
思考一下，今天的主角chrome插件就呼之欲出了。
对于chrome浏览器，我想所有的人都不陌生。其提供的插件机制，每个人或多或少也都有所了解。我们对chrome的插件机制就不多做介绍了，chrome的插件开发文档应该说的更加清楚，感兴趣的可以浏览以下地址：创建Chrome扩展程序。
下面就简单看一下这个功能过于简单的插件具体是如何实现的吧。
首先看插件的描述信息，即manifest.json文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| {
"manifest_version": 2,
"author": "maslke(maslke@outlook.com)",
"name": "expander",
"description": "expand dubbo webpage table width",
"version": "0.0.1",
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": "icons/16.png",
"default_title": "expand it!",
"default_popup": "expander.html"
},
"icons": {
"16": "icons/16.png"
},
"content_scripts": [{
"matches": ["http://dubbo.apache.org/zh-cn/docs/**/*.html", "https://dubbo.apache.org/en-us/docs/**/*.html"],
"js": ["js/dubbo.js"],
"css": ["css/custom.css"],
"run_at": "document_end"
}]
}
|
以上内容中，需要关注的是content_scripts节点。其中，matches节点定义了插件起作用的url地址，如上的配置表明了插件只在dubbo官方网站页面上生效。js和css分别配置了嵌入到dubbo页面中的js脚本和css样式文件。run_at表示是在页面加载完成之后再执行嵌入的脚本、插入样式文件。
在这里需要区分插件使用的脚本和嵌入到页面中的脚本。插件的dom和页面中的dom是隔离的，我们不能通过插件的脚本来直接操作页面中的dom，对页面dom的操作只能通过嵌入到页面中的脚本来执行。
本文的插件就只有两个功能，分别为扩展表格宽度和恢复，分别由两个菜单来进行触发。点击菜单之后，页面展示如下
页面的html实现如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Expander</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<ul class="opts">
<li id="expand">expand</li>
<li id="reset">reset</li>
</ul>
<script src="js/index.js"></script>
</body>
</html>
|
index.js文件的内容也非常简单，就是给两个li元素添加上点击事件，在li元素进行点击的时候，触发特定类型的事件。前面说了，插件使用的脚本和页面中嵌入的脚本是隔离的，两者没有办法直接互相操作。那两者之间如何进行交互呢？chrome已经提供了完备的方案，可以实现上述的目的。此处我们不对chrome提供的各项方案进行详细的描述，这次选中的是sendMessage的方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
| (function (context) {
document.getElementById('expand').onclick = function() {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, 'expand');
});
}
document.getElementById('reset').onclick = function() {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, 'reset');
});
}
}(window));
|
页面中脚本使用sendMessage的方式来发送消息，在页面的嵌入脚本中通过addListener的方式来执行消息的接收。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
var sections = document.getElementsByClassName('content-section');
if (request === 'expand') {
if (sections.length !== 0) {
var section = sections[0];
section.classList.add('content-section-custom');
}
};
if (request === 'reset') {
if (sections.length !== 0) {
var section = sections[0];
section.classList.remove('content-section-custom');
}
};
sendResponse('done');
return true;
});
|
以上即是全部的实现逻辑了。虽然功能简单，但一个chrome插件的相关基本元素都已经具备了：描述文件、弹出页面popup.html、插件逻辑、消息通信。正所谓，麻雀虽小，五脏俱全。有了以上的相关知识，后续如果有更加复杂的需求，想必也可以在此基础上扩展实现。
编写完成之后，在插件的管理页面，选择Load unpacked按钮，即可将插件添加到chrome中去了。由于这个插件过于简单，就没必要上传到chrome商店了。自己用着开心就好。
我将所有的代码上传到了github上，地址为expand-dubbo-table。感兴趣的可以尝试一下。
