Recently, a Chrome plug-in for graphics bed was developed based on Github API.Picee, which is now open source and on the Chrome App Store. The process involved some interesting knowledge points, so it was recorded.

Github address:https://github.com/jrainlau/p …

Chrome store download address:Picee

Inspiration

At ordinary times I have the habit of writing something, but I can’t find a suitable picture bed all the time. Some people recommend microblogs or seven cows as picture beds, but they always give me the feeling of being “controlled by others”. I don’t know when I will be restricted by various restrictions, such as banning picture chains, etc. Later, it was discovered that Github is actually very suitable for making picture beds, because all the documents in the warehouse can pass through.https://raw.githubusercontent.comThis link is directly linked for download. But if you need a Git operation every time you add pictures to write an article, then the writing experience must be very bad. if only there was a more convenient way-that is Github API.

Github API

Github provides a complete set of API for operation, covering almost all the functions of developing a complete Github client. API is divided into REST v3 version and GraphQL v4 version. For ease of use, I chose v3 version. Specific API details can be found inOfficial documentsCheck.

To make a map bed application, we only need to use the API to upload files. However, before calling this API, it is preferred to require the user to authorize the application, which is the so-called login operation.

Authorization

For general “view” operations, authorization is not required, such as obtaining public information of users, obtaining issues of public warehouses, etc. However, there are two scenarios that require authorization. One is any “add, delete, change and check” operation on the warehouse (including submitting issue, comments, etc.); The second is that there is a limit on the number of API calls for an IP. If this IP calls Github API too many times, authorization is required.

So how should authorization be done? Officials have provided three methods, namelyBasic,oAuth2 tokenAndoAuth2 key/secret.

Basic authorization

This is the most traditional account password authorization method, which we can use on the command line.curlTo test it:

Curl -u "Account: Password" https://api.github.com

If it is the correct account password, a series of contents will be returned, otherwise an error message will be returned.

For development, I prefer to use Postman to test API:

Click on the code on the right to see JS code:

among themxhr.setRequestHeader("Authorization", "Basic xxxxxx");Is the authorization header that we need to set up, of whichxxxxxxHere’s how it came about:

btoa(username + ':' + password)

OAuth2 token authorization

It is not so safe for an account password to be easily entered on a third-party platform. Is there any way to ensure the security of the account and meet the requirements of authorization? The answer is oAuth token.

In short, oAuth token is equivalent to an authorization token provided by the user to a third party. Through this token, the third party can obtain a series of permissions that the user is allowed to use, but it does not know the user’s account and password, so it can effectively protect the security of the user’s account and authorize the third party application conveniently.

In Github, you can useThis placeSet to generate token with certain permissions:

Finally, select OAuth 2.0 or BearToken in Postman, and then paste this string of token into it.

The authorized header isBearer token.

OAuth 2 key/secret authorization

This authorization method allows the third party to obtain the user by generating a pair of key/secret.Public information, which is a read-only authorization method, cannot rewrite the warehouse and is mainly used for third-party login, so it is not applicable here. More information about key/secret can be found in Ruan Yifeng’sGitHub OAuth Third Party Login Sample Tutorial, write very vivid and detailed.

After understanding the three authorization methods, we can proceed to the next step and upload the pictures.

Picture upload API

Pictures uploaded using content APIcreate-a-fileInterface to send a request with base64 file content to the specified warehouse directory through PUT.

Here is the emphasis.The file must be base64 encoded.Otherwise, the interface call will fail.

viabtoa('hello world)Methodshello worldTurn it into base64 and put it in Postman to test it:

It seems that the effect is OK, and the next step is to develop the plug-in for the map bed.

Chrome plug-in development

Apart from watchingOfficial documentsApart from studying plug-in development, you can also refer to what was written by @ xiaoming“Chrome Plug-in [Dry Goods] Development Strategy”, which has a detailed description of the development of Chrome plug-ins, is very worth reading.

After reading the articles recommended above, I chose to use VueJS for development. Because the project is relatively simple, I did not use any packaging tools and directly introduced VueJS through script. It is worth noting that Chrome plug-in does not allow inline script and inline style, so any css and js files must be linked through local files. In addition, since our JS runs in Chrome environment, we can safely use es module and advanced syntax such as async/await without any building tools.

But in the first step of using VueJS, I encountered a problem, bindingnew Vue()The DOM element of cannot be displayed. After verification, the original Chrome plug-in includesContent Security Policy (CSP)Limitations, which are not supported by defaulteval(),new Function()And the full version of VueJS does exactly that (The official website said), so there is a problem. So how to solve it? Very simple, inmanifest.jsonJust make a statement inside:

// manifest.json
 
 {
 //   ...
 "content_security_policy": "script-src 'self' 'unsafe-eval';  object-src 'self'"
 }

Here I use a plug-in in the form of popup. The pop-up window is the index.html defined by the project. If you want to debug the plug-in page, you can directly right-click on the pop-up window of the plug-in and click “Check” to pop up the familiar developer tools. If there are changes to the plug-in file, besides reopening the plug-in, we can also use the developer toolcmd + rTo refresh directly saves the trouble of clicking many times.

Function realization

After the previous preparation, we have mastered how to authorize Github API and upload pictures. The next step is to implement them in business logic. I encapsulated the native fetch method to make it easier to call:

const $fetch = (options) => {
 return window.fetch(options.url, {
 method: options.method || 'GET',
 headers: {
 "Content-Type": "application/json",
 "Authorization": localStorage.getItem('picee_token')
 },
 body: JSON.stringify(options.body) || null,
 mode: 'cors'
 })
 .then(async res => {
 if (res.status >= 200 && res.status < 400) {
 return {
 status: res.status,
 data: await res.json()
 }
 } else {
 return {
 status: res.status,
 data: null
 }
 }
 })
 .catch(e => e)
 }
 
 export default $fetch

Token required by the authorized header when requesting the interface are stored in the localStorage of the plug-in for easy calling.

After having the method of requesting the interface, the next step is to complete the work of selecting the picture and converting the picture into base64. I reuse it hereAnother workFrom insidechooseImg.jsAndpaste.jsMethod, finally can support to choose, paste, drag and drop the way to upload pictures.

The rest of the functional details will not be repeated, the code is very simple, and readers are advised to check it by themselves.

Application publishing

After the logo and description are prepared, the application can be officially submitted and released. We can do it atDeveloper Information CenterInside, submit the plug-in, fill in the necessary information and click publish, waiting for the review to be completed. However, before that, you must pay a developer registration fee of US$ 5. Domestic developers may encounter great difficulties in completing this step. This issue is also discussed in Zhihu:How can I use my credit card to pay the developer registration fee for Chrome Online App Store in China?. I did it through universal Taobao.

After registering and publishing, you can see the plug-in’s home page:

It is worth noting that the newly released plug-in cannot be searched out for the time being, and it will take some time before it can be searched out.

At this point, the entire plug-in development-release process has been completed.