1 灵感

某天看到了一个叫github1s的仓库：

基于Node.JS、Yarn、Python等技术栈，在github.com上面加上“一秒”，也就是github1s.com，就能在VSCode中打开该仓库，非常好用。

同时笔者安装有一个叫Sourcegraph的扩展，就是下面这个：

用过的同学都知道这个扩展是干嘛的，于是笔者就想类似的在这个扩展旁边加一个超链接的扩展直接打开github1s.com，效果图已经在上面了，点击那个VSCode的图标就可以直接打开。

2 动手

由于笔者并没有扩展开发的经验，因此先去看了一下Chrome扩展开发的文档并留下了一篇基础教程博客，然后就可以开始动手了，项目结构如下：

3 图标

关于图标，其实是花了一点时间的，比如，受到该仓库的影响，一开始定的图标是下面这样子的：

然后想了一下好像不太对劲，就改成了这样子的：

至于在扩展管理中显示的图片，改成了一个比较简单的：

这样图标的问题就解决了。

4 显示

下一步就是添加功能到扩展中并且让其显示在Sourcegraph的旁边，首先manifest.json如下：

{"name": "Github1s","description": "One second to read GitHub code with VS Code.(https://github.com/conwnet/github1s)","version": "1.0","manifest_version": 3,"content_scripts": [{"matches": ["https://github.com/*/*"],"js": ["/js/icon.js","/js/init.js"]}],"action": {"default_icon": {"16": "/icons/logo16.png","32": "/icons/logo32.png","48": "/icons/logo48.png","128": "/icons/logo128.png"}},"icons": {"16": "/icons/logo16.png","32": "/icons/logo32.png","48": "/icons/logo48.png","128": "/icons/logo128.png"}
}

解释一下content_scripts，当匹配到matches中的URL时，便会自动执行js里面的脚本，先来看一下init.js，这个脚本的作用就是添加把图标添加到Sourcegraph的旁边：

let list = document.getElementsByClassName("pagehead-actions")if (list.length > 0) {list = list[0]const li = document.createElement('li')const a = document.createElement('a')a.href = 'https://github1s.com/' + window.location.href.split('github.com')[1]a.target = '_black'a.className = 'btn btn-sm tooltipped tooltipped-s'a.style.height = '28px'a.style.paddingBottom = '0'a.style.paddingTop = '2px'a.innerHTML = base64Logoa.setAttribute('aria-label','Open with VSCode')li.append(a)list.insertBefore(li, list.getElementsByTagName("li")[0])
}

因为看了一下这里的代码：

就是一个<ul>包含<li>，于是就手动添加了一个<li>，里面包含一个<a>，加上样式、超链接以及一个叫ariaLabel的属性，这个属性会在光标悬浮的时候显示：

这样功能就实现了，剩下的问题就是图标的显示，因为不能直接插入图片：

a.innerHTML = '<img src="/icons/code20.png">'

因为这样会被解析成：

<img src="https://github.com/icons/code20.png">

另外也考虑到缩放的问题，因此采用了base64+svg显示：

这样扩展就开发完成了。

5 测试

测试环境：

Chrome 88.0.4324.150
Chromium 88.0.4324.150
Brave 1.19.92
FireFox 85.0.1

安装的时候开启开发者模式，选择Load unpacked即可。火狐的话打开about:debugging#/runtime/this-firefox，选择Load Temporary Add-on，接着选择manifest.json即可。

Brave测试：

Chrome测试：

Chromium测试：

FireFox测试失败，因为目前版本（85.0.1）不支持Manifest V3，只支持Manifest V2，修改为V2版本后成功：

6 关于`FireFox`

上面也说了目前FireFox不支持Manifest V3版本，因此如果需要使用Manifest V2版本，两者比较可以参考官方文档。

7 发布

发布很简单，扩展管理页面选择Pack Extension即可。

如果需要发布到Chrome Web Store，需要注册成为Chrome网上应用商店开发者，可以参考官方文档。

8 源码

Github
码云
GitCode

人生第一个扩展——Github1s相关推荐

奇瑞a3中控按键图解_5万元价位人生第一辆爱车如何选奇瑞艾瑞泽5对比吉利远景...
"To be or not to be",这是当前年轻人熟悉的话语.其实,人生总在面临这样或那样选择,很多时候难两全其美.然而,我们还了解一句成语"集大成者于一身&quo ...
24岁那年，有人除甲醛和家电清洗挣到了人生第一个一百万
一名95后创业者,21岁一个人来到合肥创业,24岁那年收入突破了百万. 首先,说下自己目前做的行业,除甲醛和家电清洗.家政服务行业 16年7 月份接触的除甲醛项目,同年9月份正式注册公司开干, 17年 ...
记录人生第一个网站，以及相对路径图片无法显示的问题
记录人生第一个网站,已发布GitHub 骆驼社徒步旅游网碎碎念上传碰到的问题网站进化史网站GitHub 骆驼社徒步旅游网碎碎念耗时大概半个多月,网页布局是仿照网上一个比较常用的模板布局来做 ...
2016年读书计划---人生第一个读书计划
时间的脚步真是越走越快,不经意间我已经从师弟,到师兄,再到从学校滚蛋,再见了亲爱的同学,再见了亲爱的母校.就这样三年的研究生时光从手指间溜走,回顾昨天的昨天,都历历在目,怎么就毕业了呢,不禁感叹时光你 ...
精选文章：人生第一辆车购车八大流程及提车注意事项之最强攻略
精选文章:人生第一辆车购车八大流程及提车注意事项之最强攻略目录人生第一辆车购车八大流程及提车注意事项之最强攻略买车注意事项
毕业半年，收获人生第一个一百万，聊聊我的四年大学
大家好,我是帅地. 双非校招拿大厂提前批 offer 在校期间从 0 到 1 摸索出一个 10 万垂直粉丝公众号毕业半年依靠工作与副业挣到人生第一个 100 万回过头来,帅地已经毕业一年多了,下面 ...
DIY组装人生第一台台式机
DIY组装人生第一台台式机前言: 或许每个喜欢打游戏的人都希望能有一台属于自己的主机,主机配置根据自己的需求因人而异,适合自己的满足自己需求的就是最好的,一千个人心中,就有一千个哈姆雷特. 自己需求 ...
对话罗永浩：锤子起死回生，我买了人生第一套房
一部新手机.一款净化器,罗永浩应该是拿出了自己的诚意.坚果Pro 2以后置LOGO融合指纹解锁功能的设计让锤粉有点惊喜:全新品牌"畅呼吸"净化器的推出则正式宣布锤子步入一个&quo ...
播种：人生第一篇博客
播种:人生第一篇博客前言一.自我介绍二.未来小目标三.学习编程计划四.致自己五.结语前言此篇为开始的见证,谨记自己的初心自我介绍高考结束后再三考虑还是加入这个很有"前景& ...

人生第一个扩展——Github1s

1 灵感

2 动手

3 图标

4 显示

5 测试

6 关于`FireFox`

7 发布

8 源码

人生第一个扩展——Github1s相关推荐

最新文章

热门文章

人生第一个扩展——Github1s

1 灵感

2 动手

3 图标

4 显示

5 测试

6 关于FireFox

7 发布

8 源码

人生第一个扩展——Github1s相关推荐

最新文章

热门文章

6 关于`FireFox`