人生第一个扩展——Github1s
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 = '<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的更多相关文章
- PHP开发第一个扩展
首先声明:我们要构建的是扩展或者模块名为hello_module.该模块提供一个方法:hello_word. 一.PHP环境的搭建 1)一般使用源码包编译安装,而不是binary包安装.因为使用PHP ...
- PHP扩展开发:第一个扩展
在上一篇文章<PHP扩展开发:安装PHP>我们已经将开发PHP扩展的PHP环境安装成功,那么接下来采用最简单直接的方式创建第一个扩展. 我们先假设业务场景,是需要有这么一个扩展,提供一个叫 ...
- 关于windows下基于php7.0.2下编写的第一个扩展
网上的教程是比较多的,但是基于php7+windows的教程非常之少,通过几天的摸索及参考很多资料,终于发现如下可以运行. php7要求使用vc2015,同时安装sdk,我使用的是8.1的window ...
- PHP扩展开发01:第一个扩展【转】
我们先假设业务场景,是需要有这么一个扩展,提供一个叫ccvita_string的函数,他的主要作用是返回一段字符.(这个业务场景实在太假,大家就这么看看吧)对应的PHP代码可能是这样: functio ...
- PHP扩展开发01:第一个扩展
我们先假设业务场景,是需要有这么一个扩展,提供一个叫ccvita_string的函数,他的主要作用是返回一段字符.(这个业务场景实在太假,大家就这么看看吧)对应的PHP代码可能是这样: functio ...
- 人生第一场CTF的解题报告(部分)
解题报告 濮元杰部分: 王者归来: 120 场景 小王入职了一段时间,最近有点无聊.Web安全项目不多,白天看着其他项目组的同事忙得热火朝天,小王有点坐不住了,这也许是新人都会有的想法,乐于助人.想到 ...
- 毕业两年半,入手人生第一款macbook pro
当程序员入手第一款macbook 大家好,我是灰大狼,你们可以叫我灰狼.大狼.甚至是小灰灰. 接下来我主要跟大家分享下作为程序员的我,刚入手一款mac的使用心得. 背景 做程序员三年了,一直用的都是w ...
- 人生第一篇博客 , 当然是经典的 "Hello World"
package com.cqvie.Hello; public class FirstDemo { public static void main(String[] args) { System. ...
- 人生第一场组队赛---2014.8 zju monthly
暑期集训中段就组了队,不过一直没机会打比赛 昨天kitkat突然发现了zju要搞月赛,我想了一下题目对于我这种渣实在是有点难,于是想到干脆打一次组队赛吧,跟队友商量了一下也同意了 12点---17点 ...
随机推荐
- [转]Linux 线程实现机制分析 Linux 线程实现机制分析 Linux 线程模型的比较:LinuxThreads 和 NPTL
转载地址:https://www.cnblogs.com/MYSQLZOUQI/p/4233630.html 自从多线程编程的概念出现在 Linux 中以来,Linux 多线应用的发展总是与两个问题脱 ...
- Win32Api -- 关闭当前应用
本文介绍Windows系统下使用Win32API获取当前应用并关闭的方法. 思路 使用EnumWindows接口枚举当前窗口; 过滤掉不可用.隐藏.最小化的窗口: 过滤掉子窗口: 通过标题.类名过滤掉 ...
- ubuntu系统共享桌面的使用和配置
内容转载自我的博客 目录 1. ubuntu共享桌面 2. 局域网登录远程桌面 2.1 ubuntu使用remmina登录远程桌面 2.2 在windows登录远程桌面 2.3 Android使用RD ...
- this指针、引用、顶层和底层const关系
1.首先顶层const和底层const是围绕指针*p的说法.底层:const int *p,const不是修饰指针p,指针所指的值不能改变:顶层:int *const p,const修饰指针p,指针本 ...
- 快速查找未打补丁的exp
在windows DOS窗口下输入以下内容,输出为未打的补丁信息列表 systeminfo>vul.txt&(for %i in (KB977165 KB2160329 KB250366 ...
- RPC基础以及造一个RPC的轮子需要注意些什么
RPC基础以及造一个RPC的轮子需要注意些什么 前言 rpc即远程过程调用,是分布式系统常用的通信方法.远程可以是在一台机器上的不同进程或在不同一个机器上的不同进程.rpc更看重速度,像调用本地方法一 ...
- Codeforces Round #684 (Div. 2)
A 讨论三种情况,不换/全换成0/全换成1 ,取一个花费最小值 #include <bits/stdc++.h> using namespace std; const int N = 10 ...
- js 判断 是否在当前页面
1.使用visibilitychange 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件. document.addEventListener("visibilit ...
- yolo训练数据集
最近了解了下yolov3的训练数据集部分,总结了以下操作步骤:(基于pytorch框架,请预先装好pytorch的相关组件) 1.下载ImageLabel软件对图片进行兴趣区域标记,每张图片对应一个x ...
- java知识汇总
文章目录 Java基础知识 基本类型 类别及其对应包装类 1. byte---Byte 2. char---Character 3. short---Short 4. int---Integer 5. ...