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 = base64Logo    a.setAttribute('aria-label','Open with VSCode')    li.append(a)    list.insertBefore(li, list.getElementsByTagName("li")[0])}

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

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

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

a.innerHTML = '![](/icons/code20.png)'

因为这样会被解析成：

![](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
  • 码云
  • CODECHINA