关于chrome:人生第一个扩展Github1s

51次阅读

共计 2257 个字符,预计需要花费 6 分钟才能阅读完成。

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 = '![](/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

正文完
 0