今天参考chrome 插件开发指南 开发了自己的第一个浏览器插件。
首先说功能需求：程序员开发免不了连上一两台大屏显示器，多屏开发可以让我们提高编程效率，同时本人也十分爱护自己的眼睛~，所以需要页面在不同设备上的缩放程度看起来让眼睛不那么累。
所以自然而然，在大屏显示器上，我们需要放大原有的比例（125% 本人比较舒服的比例），而在笔记本电脑上保持原始比例（100%）基本差不多，但是虽然是两台显示器，但是对于缩放系数，二者是统一的，所以就免不了自行调整。 虽然调节页面大小用不了什么操作，但是每次都操作一下还是有点麻烦的，所以我就像可不可以通过判断当前浏览器窗口的宽度来自行调整缩放系数呢，于是我就开始查看chrome的插件开发相关的文档，确定好可行之后，我就开始了，并且给这个插件起了一个非常炫酷的名字 Zoom
配置
首先，我们创建一个manifest.json的文件，用于配置插件相关的信息，有了这个文件，我们的插件就能安装到浏览器中了，什么？这就走起来了？没错！只需配置好这个文件，我们就可以完成第一步的安装了！
下面给出我的manifest.json,重要的地方 我用注释标注了
{
"name": "Zoom",
"version": "1.0",
"description": "Control zoom size in different device",
"permissions": [ //我们需要用到chrome的哪些api，就可以配置在这里，另外包括希望生效的网址也可以配置在这里
"tabs",
"activeTab",
"http://*/*",
"https://*/*",
"file:///*"
],
"background": {
"scripts": ["background.js"], // 插件背后运行的脚本
"persistent": false
},
"browser_action": {
"default_icon": { //插件的icon
"16": "images/zoomX16.png",
"32": "images/zoomX32.png",
"48": "images/zoomX48.png",
"64": "images/zoomX64.png"
}
},
"manifest_version": 2
}
其实 根据这个配置文件，我们的目录结构也可以梳理出来
Zoom
__images/
______zoomX16.png ...
__manifest.json
__background.js
然后我们打开 管理扩展程序
点击 加载已解压的扩展程序 将插件导入，
然后我们在background.js中写一条打印语句
console.log('I'm background.js')
刷新插件 然后点击
就会弹出一个控制台
到此，基本的目录结构流程我们就已经掌握了，下一步就是编辑具体的逻辑，以及api的调用。
利用chrome api 实现指定功能
首先要明确我们需要做什么，才能更快、更准确的找到对应的api（api不多，建议挨个看一下每个api是做什么的，文档写的很清楚）
显然，我们想通过浏览器窗口的宽高来决定缩放系数，所以我们需要找到一个能控制浏览器缩放的api，同时也要找到一个具有浏览器窗口相关宽高属性的方法
于是找啊找，就是你了 tabs
首先我们需要在manifest.json中的permission里添加指定依赖，
// ...
"permissions": [
"tabs"
],
//....
然后调用tabs相关api 的时候就通过chrome.tabs.xxx即可，其他api也是同理
它有set get两个方法分别可以设置和获取当前tab的缩放系数
另外，我们可以通过query，来获取指定tab页的相关信息，
然后我们就可以动手写相关的逻辑了，还有一个要明确的事情就是 事件逻辑触发的时机，
- 在页面被创建的时候检测窗口大小 调整缩放
- 在页面被移动的时候（从笔记本移动到显示器）
- 在页面被激活的时候
所以我们可以找到对应的三个生命周期事件
chrome.tabs.onActivated.addListener(function (selectionInfo) {
// 当前tab页被激活
});
chrome.tabs.onMoved.addListener(function (tabId, moveInfo) {
// 当前tab页被移动
});
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
// 当前tab页被创建
});
这里页面创建我们为什么不选用
onCreated而是onUpdated呢，因为onCreated事件触发的时候，tab的url可能没有被设置，所以我们如果想指定新建出来的页面，我们可以通过onUpdated事件来监听
我们可以在每个事件中打印语句，刷新插件，打开background，然后进行tab的相关操作，我们就可以看到了
另外每个回调函数会有几个参数，我们可以根据回调的这些参数获取tab窗口的宽度 或者获取当前windowid，并通过它来获取指定参数，
完整的background.js 如下
'use strict';
const XL = 'XL',
NORMAL = 'NORMAL';
let DEVICE_TYPE = NORMAL,
active_tabs = [];
chrome.tabs.onActivated.addListener(function (selectionInfo) {
const { windowId, tabId } = selectionInfo;
chrome.tabs.query({ windowId }, (tabs) => {
if (tabs[0].width > 1440) {
chrome.tabs.setZoom(tabId, 1.25);
} else {
chrome.tabs.setZoom(tabId, 1);
}
});
});
chrome.tabs.onMoved.addListener(function (tabId, moveInfo) {
const { windowId } = moveInfo;
chrome.tabs.query({ windowId }, (tabs) => {
if (tabs[0].width > 1440) {
chrome.tabs.setZoom(tabId, 1.25);
} else {
chrome.tabs.setZoom(tabId, 1);
}
});
});
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
const { width, id } = tab;
if (width > 1440) {
chrome.tabs.setZoom(id, 1.25);
} else {
chrome.tabs.setZoom(id, 1);
}
});
设备大小可以根据自己的设备来指定，当然后续我会通过options的方式，让用户自己选择，另外还可以进行优化，比如加个缓存之类的，避免每次的判断。
然后我们刷新插件，切换页面就可以看到啦~。
mac:
显示器：
