1 灵感

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

基于Node.JSYarnPython等技术栈,在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 = '<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 源码

人生第一个扩展——Github1s的更多相关文章

  1. PHP开发第一个扩展

    首先声明:我们要构建的是扩展或者模块名为hello_module.该模块提供一个方法:hello_word. 一.PHP环境的搭建 1)一般使用源码包编译安装,而不是binary包安装.因为使用PHP ...

  2. PHP扩展开发:第一个扩展

    在上一篇文章<PHP扩展开发:安装PHP>我们已经将开发PHP扩展的PHP环境安装成功,那么接下来采用最简单直接的方式创建第一个扩展. 我们先假设业务场景,是需要有这么一个扩展,提供一个叫 ...

  3. 关于windows下基于php7.0.2下编写的第一个扩展

    网上的教程是比较多的,但是基于php7+windows的教程非常之少,通过几天的摸索及参考很多资料,终于发现如下可以运行. php7要求使用vc2015,同时安装sdk,我使用的是8.1的window ...

  4. PHP扩展开发01:第一个扩展【转】

    我们先假设业务场景,是需要有这么一个扩展,提供一个叫ccvita_string的函数,他的主要作用是返回一段字符.(这个业务场景实在太假,大家就这么看看吧)对应的PHP代码可能是这样: functio ...

  5. PHP扩展开发01:第一个扩展

    我们先假设业务场景,是需要有这么一个扩展,提供一个叫ccvita_string的函数,他的主要作用是返回一段字符.(这个业务场景实在太假,大家就这么看看吧)对应的PHP代码可能是这样: functio ...

  6. 人生第一场CTF的解题报告(部分)

    解题报告 濮元杰部分: 王者归来: 120 场景 小王入职了一段时间,最近有点无聊.Web安全项目不多,白天看着其他项目组的同事忙得热火朝天,小王有点坐不住了,这也许是新人都会有的想法,乐于助人.想到 ...

  7. 毕业两年半,入手人生第一款macbook pro

    当程序员入手第一款macbook 大家好,我是灰大狼,你们可以叫我灰狼.大狼.甚至是小灰灰. 接下来我主要跟大家分享下作为程序员的我,刚入手一款mac的使用心得. 背景 做程序员三年了,一直用的都是w ...

  8. 人生第一篇博客 , 当然是经典的 "Hello World"

    package com.cqvie.Hello; public class FirstDemo {  public static void main(String[] args) {  System. ...

  9. 人生第一场组队赛---2014.8 zju monthly

    暑期集训中段就组了队,不过一直没机会打比赛 昨天kitkat突然发现了zju要搞月赛,我想了一下题目对于我这种渣实在是有点难,于是想到干脆打一次组队赛吧,跟队友商量了一下也同意了 12点---17点  ...

随机推荐

  1. 08_MySQL数据库的字段约束

    数据库的字段约束 实战: CREATE TABLE t_teacher ( id INT UNSIGNED PRIMARY KEY AUTO_INCREMENT, name VARCHAR(20) N ...

  2. 从微信小程序到鸿蒙js开发【12】——storage缓存&自动登录

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打 ...

  3. Svelte v2 已经过时了!

    带你走马观花,细看新版变化. 注意:原文发表于2018-04-18,随着框架不断演进,部分内容可能已不适用. 大约是一年之前,我们首次在 Svelte 的 issue 跟踪器上讨论过 v2 版本,现在 ...

  4. Mysql 高可用(MHA)-读写分离(Atlas)-分布式架构(Mycat)

    Mysql 高可用(MHA)-读写分离(Atlas) 1. 搭建主从复制(一主两从) 1.1 准备环境 1 主库:10.0.0.51/db01 2 从库:10.0.0.52/db02,10.0.0.5 ...

  5. 使用gitlab构建基于docker的持续集成(二)

    使用gitlab构建基于docker的持续集成(二) gitlab docker aspnetcore Centos配置gitlab镜像并且启动 Centos配置防火墙 windows上访问gitla ...

  6. PVE更新WEB管理地址

    PVE也是一台Linux系统,如果PVE更换了网络环境,比如从家里拿到了办公室,那么就需要对其更新网络,才能让其它机器访问到它的8006管理地址. 具体做法是通过修改配置文件来更改IP. 更新网卡配置 ...

  7. Mybatis系列全解(四):全网最全!Mybatis配置文件XML全貌详解

    封面:洛小汐 作者:潘潘 做大事和做小事的难度是一样的.两者都会消耗你的时间和精力,所以如果决心做事,就要做大事,要确保你的梦想值得追求,未来的收获可以配得上你的努力. 前言 上一篇文章 <My ...

  8. go中waitGroup源码解读

    waitGroup源码刨铣 前言 WaitGroup实现 noCopy state1 Add Wait 总结 参考 waitGroup源码刨铣 前言 学习下waitGroup的实现 本文是在go ve ...

  9. [DP浅析]线性DP初步 - 2 - 单调队列优化

    目录 #0.0 前置知识 #1.0 简单介绍 #1.1 本质 & 适用范围 #1.2 适用方程 & 条件 #2.0 例题讲解 #2.1 P3572 [POI2014]PTA-Littl ...

  10. SpringBoot Shiro 权限注解不起作用

    最近在学习springboot结合shiro做权限管理时碰到一个问题. 问题如下: 我在userRealm中的doGetAuthorizationInfo方法中给用户添加了权限,然后在Controll ...