The first extension of life — github1s

Time:2021-8-24

1 inspiration

One day I saw a man namedgithub1sWarehouse:

The first extension of life -- github1s

be based onNode.JSYarnPythonSuch technology stack, ingithub.comAdd “one second” to it, that isgithub1s.com, you canVSCodeOpen the warehouse in, very easy to use.

At the same time, the author installed a calledSourcegraphThe extension of is as follows:

The first extension of life -- github1s

The students who have used this extension know what it is, so the author wants to add a hyperlink extension next to this extension to open it directlygithub1s.com, the effect picture is already on it. Click thatVSCodeThe icon can be opened directly.

2 do it

Since I have no experience in extended development, I went to have a look firstChromeExtended the development documentation and left an articleBasic tutorial blog, and then you can start. The project structure is as follows:

The first extension of life -- github1s

3 Icon

As for icons, it actually took a little time, for example, byThe warehouseThe initial icon is as follows:

The first extension of life -- github1s

Then I thought something was wrong and changed it to this:

The first extension of life -- github1s

The picture displayed in the extension management is changed to a relatively simple one:

The first extension of life -- github1s

In this way, the problem of icons is solved.

4 display

The next step is to add functionality to the extension and display it in theSourcegraphNext to, firstmanifest.jsonAs follows:

{
    "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"
    }
}

Explaincontent_scripts, when matched tomatchesMediumURLIt will be executed automaticallyjsLet’s take a look at the scriptinit.js, the role of this script is to add icons toSourcegraphNext to:

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])
}

Because after looking at the code here:

The first extension of life -- github1s

Just one<ul>contain<li>, so you add one manually<li>, which contains a<a>, plus styles, hyperlinks, and aariaLabelWhen the cursor hovers, this property will be displayed:

The first extension of life -- github1s

The first extension of life -- github1s

In this way, the function is realized. The remaining problem is the display of icons, because pictures cannot be directly inserted:

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

Because it will be resolved as:

![](https://github.com/icons/code20.png)

In addition, the problem of scaling is also considered, so it is adoptedbase64+svgDisplay:

The first extension of life -- github1s

In this way, the development of the extension is completed.

5 test

Test environment:

  • Chrome 88.0.4324.150
  • Chromium 88.0.4324.150
  • Brave 1.19.92
  • FireFox 85.0.1

Open developer mode during installation and selectLoad unpackedJust. If Firefox opensabout:debugging#/runtime/this-firefox, selectLoad Temporary Add-on, then selectmanifest.jsonJust.

BraveTest:

The first extension of life -- github1s

ChromeTest:

The first extension of life -- github1s

ChromiumTest:

The first extension of life -- github1s

FireFoxThe test failed because of the current version(85.0.1)Not supportedManifest V3, only supportedManifest V2, amend toV2Success after version:

The first extension of life -- github1s

6 aboutFireFox

It also says that at presentFireFoxI won’t support itManifest V3Version, so if you need to useManifest V2Version, the comparison of the two can be referred toOfficial documents

7 release

Publishing is very simple. Expand the management page selectionPack ExtensionJust.

If necessary, publish toChrome Web Store, need to register asChromeOnline app store developers can refer toOfficial documents

8 source code