Merge pull request #86 from terwer/dev

feat:#85 Google插件扩展-多页面支持

.gitignore

@@ -28,3 +28,4 @@ dist-ssr
 *.private.env.json
 __snapshots__
 test/data/
+extension/

deploy.ps1

@@ -1,5 +1,8 @@
 pwd
 yarn build
+# 删除Chrome插件专属文件
+Remove-Item ./dist/background.js
+Remove-Item ./dist/manifest.json
 
 Remove-Item ../my-note-docker/workspace/SiYuan/data/widgets/sy-post-publisher -Recurse -Force -Confirm:$false
 mkdir ../my-note-docker/workspace/SiYuan/data/widgets/sy-post-publisher

deploy.sh

@@ -1,5 +1,8 @@
 pwd
 yarn build
+# 删除Chrome插件专属文件
+rm ./dist/background.js
+rm ./dist/manifest.json
 
 rm -rf ../my-note-docker/workspace/SiYuan/data/widgets/sy-post-publisher/
 mkdir ../my-note-docker/workspace/SiYuan/data/widgets/sy-post-publisher

ext.sh

@@ -0,0 +1,9 @@
+pwd
+yarn build
+# 删除siyuan挂件专属文件
+rm ./dist/widget.json
+
+rm -rf ./extension/*
+mkdir extension
+cp -r ./dist/* ./extension/
+echo "Chrome插件发布完毕."

package.json

@@ -16,9 +16,11 @@
     "deploy-win": "pwsh deploy.ps1",
     "wd": "yarn deploy-win",
     "vdev": "vercel dev --listen 5005",
-    "vbuild": "vercel build"
+    "vbuild": "vercel build",
+    "ext": "bash ext.sh"
   },
   "dependencies": {
+    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@octokit/core": "^4.0.4",
     "copy-to-clipboard": "^3.3.1",
     "cross-fetch": "^3.1.5",
@@ -30,7 +32,7 @@
     "transliteration": "^2.3.5",
     "uuid": "^8.3.2",
     "vue": "^3.2.37",
-    "vue-i18n": "9",
+    "vue-i18n": "^9.2.2",
     "xmlrpc": "^1.3.2"
   },
   "devDependencies": {
@@ -42,6 +44,7 @@
     "node-localstorage": "^2.2.1",
     "typescript": "^4.6.4",
     "vite": "^3.0.0",
+    "vite-plugin-mpa": "^1.1.4",
     "vite-plugin-require-transform": "^1.0.3",
     "vitest": "^0.22.1",
     "vue-tsc": "^0.38.4"

public/READNE.md

@@ -0,0 +1,7 @@
+# todo
+
+## doc
+
+https://developer.chrome.com/docs/extensions/
+
+https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/examples

public/background.js

@@ -0,0 +1,30 @@
+// Extension event listeners are a little different from the patterns you may have seen in DOM or
+// Node.js APIs. The below event listener registration can be broken in to 4 distinct parts:
+//
+// * chrome      - the global namespace for Chrome's extension APIs
+// * runtime     – the namespace of the specific API we want to use
+// * onInstalled - the event we want to subscribe to
+// * addListener - what we want to do with this event
+//
+// See https://developer.chrome.com/docs/extensions/reference/events/ for additional details.
+chrome.runtime.onInstalled.addListener(async () => {
+    console.log("Installed")
+});
+
+// function createPage() {
+//     // While we could have used `let url = "index.html"`, using runtime.getURL is a bit more robust as
+//     // it returns a full URL rather than just a path that Chrome needs to be resolved contextually at
+//     // runtime.
+//     let url = chrome.runtime.getURL("index.html");
+//     window.open(url)
+//     console.log(`Created tab`);
+// }
+
+// chrome.action.onClicked.addListener((tab) => {
+//     if (!tab.url.includes("chrome://")) {
+//         chrome.scripting.executeScript({
+//             target: {tabId: tab.id},
+//             function: createPage
+//         });
+//     }
+// });

public/manifest.json

@@ -0,0 +1,28 @@
+{
+  "name": "思源笔记辅助工具",
+  "version": "1.1.3",
+  "manifest_version": 3,
+  "author": "terwer",
+  "description": "思源笔记辅助工具，支持博客式制度浏览，文章发布。",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "permissions": [
+    "activeTab",
+    "scripting"
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "index/index.html",
+        "service/index.html"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
+    }
+  ],
+  "action": {
+    "default_popup": "index/index.html"
+  }
+}

src/components/Index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Index</h1>
+    <a href="./index.html?pwd=123456&id=20220917154709-4aqccxm"></a>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "Index.vue"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/tab/main/MetaweblogMain.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container>
-    <el-main class="blog-main">
+    <el-main class="blog-main" v-if="!isInitLoadding">
       <el-alert class="top-version-tip" :title="apiTypeInfo + blogName" type="info"
                 :closable="false"/>
       <el-alert class="top-version-tip" :title="$t('setting.blog.vali.tip.metaweblog')" type="error" :closable="false"
@@ -149,6 +149,7 @@
         </el-form-item>
       </el-form>
     </el-main>
+    <el-skeleton :loading="isInitLoadding" :rows="5" animated />
   </el-container>
 </template>
 
@@ -214,6 +215,7 @@ const isTagLoading = ref(false)
 const isGenLoading = ref(false)
 const isPublishLoading = ref(false)
 const isCancelLoading = ref(false)
+const isInitLoadding = ref(false)
 
 const editMode = ref(false)
 const forceRefresh = ref(false)
@@ -256,6 +258,8 @@ const complexMode = () => {
 }
 
 const initPage = async () => {
+  isInitLoadding.value = true
+
   const pageId = await getPageId(true);
   if (!pageId || pageId === "") {
     return
@@ -350,6 +354,8 @@ const initPage = async () => {
   // ===========================
 
   apiStatus.value = conf.apiStatus
+
+  isInitLoadding.value = false
 }
 
 onMounted(async () => {

src/pages/index/App.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <Index/>
+    <button @click="createPage">服务</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted} from "vue";
+import logUtil from "../../lib/logUtil";
+import Index from "../../components/Index.vue"
+
+function createPage() {
+  // While we could have used `let url = "index.html"`, using runtime.getURL is a bit more robust as
+  // it returns a full URL rather than just a path that Chrome needs to be resolved contextually at
+  // runtime.
+  // let url = chrome.runtime.getURL("index/index.html");
+  let url = "/service/index.html?pwd=123456";
+  // @ts-ignore
+  if (typeof chrome.runtime != "undefined") {
+    // @ts-ignore
+    url = chrome.runtime.getURL("/service/index.html?pwd=123456");
+  }
+  window.open(url)
+  console.log(`Created tab`);
+}
+
+onMounted(async () => {
+  logUtil.logWarn("MODE=>", import.meta.env.MODE)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'App'
+}
+</script>

index.html → src/pages/index/index.html

@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>sy-post-publisher</title>
+    <title>思源笔记辅助工具 - 支持博客式制度浏览，文章发布</title>
   </head>
   <body>
     <div id="app"></div>
     <script src="/lute.min.js"></script>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/pages/index/main.ts"></script>
   </body>
 </html>

src/main.ts → src/pages/index/main.ts

@@ -2,7 +2,7 @@ import {createApp} from 'vue'
 import App from './App.vue'
 import './style.css'
 // 国际化
-import i18n from "./locales";
+import i18n from "../../locales";
 
 // Element-Plus
 import ElementPlus from 'element-plus'

src/App.vue → src/pages/service/App.vue

@@ -4,11 +4,13 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted} from "vue";
-import {getBooleanEnv, getEnv} from "./lib/envUtil";
-import logUtil from "./lib/logUtil";
-import {getQueryString} from "./lib/util";
-import {getWidgetId} from "./lib/platform/siyuan/siyuanUtil";
+import {onMounted, ref} from "vue";
+import {getEnv} from "../../lib/envUtil";
+import logUtil from "../../lib/logUtil";
+import {getQueryString} from "../../lib/util";
+import {getWidgetId} from "../../lib/platform/siyuan/siyuanUtil";
+import PublishService from "../../components/PublishService.vue";
+import NoAuth from "../../components/NoAuth.vue";
 
 const isAuth = ref(false)
 
@@ -40,11 +42,7 @@ onMounted(async () => {
 </script>
 
 <script lang="ts">
-import PublishService from "./components/PublishService.vue";
-import NoAuth from "./components/NoAuth.vue";
-
 export default {
-  name: 'App',
-  components: {PublishService, NoAuth}
+  name: 'App'
 }
 </script>

src/pages/service/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>思源笔记辅助工具 - 支持博客式制度浏览，文章发布</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/lute.min.js"></script>
+    <script type="module" src="/src/pages/service/main.ts"></script>
+  </body>
+</html>

src/pages/service/main.ts

@@ -0,0 +1,30 @@
+import {createApp} from 'vue'
+import App from './App.vue'
+import './style.css'
+// 国际化
+import i18n from "../../locales";
+
+// Element-Plus
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+// Vue初始化
+const app = createApp(App)
+
+// 组件注册
+// 国际化
+app.use(i18n)
+// Element-Plus
+app.use(ElementPlus)
+
+// Register a global custom directive called `v-focus`
+app.directive('focus', {
+    // When the bound element is mounted into the DOM...
+    mounted(el) {
+        // Focus the element
+        el.focus()
+    }
+})
+
+// 挂载Vue
+app.mount('#app')

src/pages/service/style.css

@@ -0,0 +1,50 @@
+:root {
+  font-family: "-apple-system", "Wenquanyi Micro Hei", "Wenquanyi Micro Hei Mono", "Microsoft YaHei", "LXGW WenKai", "PT Sans", "Liberation Mono", monospace, dejavu sans mono, Fira Code, Microsoft Yahei, Consolas, Courier New, monospace, Menlo, Monaco !important;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+}
+
+#app {
+  padding: 10px;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}
+
+.el-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+.top-version-tip {
+  margin: 10px 0 !important;
+}
+
+.el-alert {
+  margin-top: 10px !important;
+}