setup initial project

Author: ste-xx

src/App.vue

@@ -2,10 +2,39 @@
   <div>
     hello world
   </div>
-  <button>login</button>
+  <button @click="login">login</button>
+  <button @click="listQuery">list</button>
 </template>
 
 <script setup lang="ts">
+import {ref, computed} from 'vue';
+import {auth} from './auth';
+import listGql from './List.gql';
+import { graphql } from '@octokit/graphql';
+
+const accessToken = ref<string | null>(null);
+
+const graphQlClient = computed(() => {
+  const headers = accessToken.value ? {authorization: `token ${accessToken.value}`}: {};
+  alert(headers);
+  return graphql.defaults({
+    headers
+  });
+});
+
+export const login = async () => {
+  const {access_token} = await auth();
+  accessToken.value = access_token;
+  alert('logged in');
+};
+
+export const listQuery = async () => {
+  if(!graphQlClient.value){
+    return;
+  }
+  const result = await graphQlClient.value(listGql);
+  alert(JSON.stringify(result, null, 2));
+};
 
 </script>
 

src/List.gql

@@ -0,0 +1,16 @@
+query List {
+  viewer {
+    gists (first: 100, privacy:ALL, orderBy: {field: CREATED_AT, direction: DESC} ) {
+      edges {
+        node {
+          description
+          name
+          files {
+            name
+            text
+          }
+        }
+      }
+    }
+   }
+}

src/auth.ts

@@ -0,0 +1,39 @@
+const client_id = "39a009625c0b1f336d94";
+const client_secret = "2e363c1a9fced7a931af9244d5abf07dfd9192ac";
+
+export const launchWebAuthFlow = (): Promise<string | undefined> => new Promise((resolve) => {
+  const redirect_uri = `https://${chrome.runtime.id}.chromiumapp.org/provider_cb`;
+  chrome.identity.launchWebAuthFlow(
+    {
+      url: `https://github.com/login/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&scope=gist`,
+      interactive: true
+    },
+    (redirect_url) => resolve(redirect_url)
+  );
+});
+
+export const auth = async (): Promise<{access_token: string}>=> {
+  const redirectUrl = await launchWebAuthFlow();
+  if (!redirectUrl) {
+    throw new Error("login failed");
+  }
+  const code = new URL(redirectUrl).searchParams.get("code");
+  if(!code){
+    throw new Error("login failed");
+  }
+  const { access_token } = await fetch(`https://github.com/login/oauth/access_token?client_id=${client_id}&client_secret=${client_secret}&code=${code}`, {
+    headers: {
+      Accept: "application/json"
+    },
+    method: "GET"
+  }).then((r) => r.json() as Promise<{access_token: string}>).catch(e => {
+    console.warn(e);
+    return Promise.reject('wtf');
+  });
+
+  return {
+    access_token: access_token
+  };
+};
+
+void auth();

src/manifest.json

@@ -12,6 +12,7 @@
   "devtools_page": "devtools.html",
   "content_security_policy": "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'",
   "permissions": [
-    "identity"
+    "identity",
+    "https://*.github.com/*"
   ]
 }

vue.config.js

@@ -14,7 +14,13 @@ module.exports = {
           const manifest = JSON.parse(content);
 
           if (process.env.INCLUDE_KEY === 'true') {
-            manifest.key = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApuOA55Y/VfUyydcI2cWcezmCtvDjZ0ANF7eyq5SCvWiVvCca+qInh91GipobJQb3iFw5GXN0as4pJKbZg6pNRKn285Fo0uyegsdGMnXy//2tZ/yOgX7QiI0LM5XBc+NUPVER+QBsE/gbflKb0g3Z5aUcSJWreHxPqs8+PD/o2v6Z8YEmnEwDhn8w/YXmOiqnDrW4+4wEo49oOQYuVvehfFpE4dm8h9W/47tQNI2lmPrN7U8FTqdZnksmaUBUXaUUzIxhCDA3krYK/h+PrQq4i1F9hGt3YPDRhvkmNrZQsclfS+BdYE3yuWoNIQTJYO2xIhsrub4vBhvyl9W9SmPdyQIDAQAB";
+            manifest.key = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAg8eYUxVzvqDLHWq3z93P"+
+              "tJ/9gOv84r7yLJ3r311VBZW9GmzMmgFsPKAF9Bfcr2dNYCwU6W72Z+stxYNnfgz8" +
+              "5HXBELbearnsDpzF56TlSJNhWqE2/6HTn32qZ6dI5Pnq7oEhUITkbWESePvw3k2j" +
+              "V0vTp6yJSFIyP+2+dP7/m6KOfcBhuJZi6RsDdfIw35XOJ+ORnfVJ3v1d5m0wAGF4" +
+              "aUlgHsN8SIn043YZb7w+upuiCrmxHjhi6a+NY80tlMZDG7Fyi25KBSsjvrsC2HWR" +
+              "lF6snolockJWWpwr+tmLIgazpXV9Z1YLZWExBKq2iiSPLKEdTjep1mngeNqYvkuZ" +
+              "nQIDAQAB";
           }
 
           manifest.version = `${version}.0`;
@@ -31,7 +37,8 @@ module.exports = {
       .plugin('reloader').use(ExtensionReloader).end()
       .plugin('monacoEditor').use(MonacoWebpackPlugin).end()
       .plugin('copy').use(CopyPlugin, [{patterns: copyPluginPatterns}]).end()
-      .optimization.delete('splitChunks').end()
+      .optimization.delete('splitChunks').end();
+
 
     // .gql files
     config.module.rule('gql')