support bottom align

README.md

@@ -45,7 +45,7 @@ yarn
 
 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
 ```bash
-quasar dev -m bex
+quasar dev -m bex -T chrome
 ```
 
 ### Lint the files
@@ -55,7 +55,7 @@ yarn run lint
 
 ### Build the app for production
 ```bash
- quasar build -m bex
+ quasar build -m bex -T chrome
  ```
 
 ### Customize the configuration

index.html

@@ -9,9 +9,8 @@
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
 
-    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/icon-128x128.png">
+    <link rel="icon" type="image/png" sizes="48x48" href="icons/favicon-48x48.png">
     <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
     <link rel="icon" type="image/ico" href="favicon.ico">
   </head>

package.json

@@ -18,7 +18,7 @@
     "@quasar/extras": "^1.16.4",
     "@sentry/vue": "^9.5.0",
     "quasar": "^2.16.0",
-    "ribbon-corner": "^1.0.5",
+    "ribbon-corner": "^1.0.9",
     "vue": "^3.4.18",
     "vue-router": "^4.0.0",
     "webextension-polyfill": "^0.12.0"

src-bex/_locales/en/messages.json

@@ -55,10 +55,16 @@
     "message": "Position"
   },
   "left": {
-    "message": "Left"
+    "message": "Top Left"
+  },
+  "left_bottom": {
+    "message": "Bottom Left"
   },
   "right": {
-    "message": "Right"
+    "message": "Top Right"
+  },
+  "right_bottom": {
+    "message": "Bottom Right"
   },
   "textColor": {
     "message": "Text Color"

src-bex/_locales/zh_CN/messages.json

@@ -55,10 +55,16 @@
     "message": "位置"
   },
   "left": {
-    "message": "左侧"
+    "message": "左上角"
+  },
+  "left_bottom": {
+    "message": "左下角"
   },
   "right": {
-    "message": "右侧"
+    "message": "右上角"
+  },
+  "right_bottom": {
+    "message": "右下角"
   },
   "textColor": {
     "message": "文字颜色"

src-bex/assets/content.css

@@ -2,4 +2,3 @@
 .ribbon-corner {
     pointer-events: none;
   }
-

src-bex/my-content-script.js

@@ -143,29 +143,43 @@ bridge.warn('Hello', 'world', '!', { some: 'object' })
 
 
 function setEnv(env) {
+  let horizontalAlign = 'left'
+  let verticalAlign = 'top'
+
+  // 如果包含 right
+  if (env.position && env.position.includes('right')) {
+    horizontalAlign = 'right'
+  }
+  if (env.position && env.position.includes('bottom')) {
+    verticalAlign = 'bottom'
+  }
+
+  var element
   if (env.shape === 'triangle') {
-    ribbonCorner({
+    element = ribbonCorner({
       backgroundColor: env.envBackgroundColor,
       toCorner: 30,
       height: 60,
-      horizontalAlign: env.position,
+      horizontalAlign: horizontalAlign,
+      verticalAlign: verticalAlign,
       text: env.envName,
       textColor: env.textColor,
       position: 'fixed',
       fontSize: 14
     })
-    document.getElementsByClassName('ribbon-corner')[0].prepend(document.createElement('br'))
   } else {
-    ribbonCorner({
+    element = ribbonCorner({
       backgroundColor: env.envBackgroundColor,
       toCorner: 60,
       height: 40,
-      horizontalAlign: env.position,
+      horizontalAlign: horizontalAlign,
+      verticalAlign: verticalAlign,
       text: env.envName,
       textColor: env.textColor,
       position: 'fixed',
       fontSize: 14
     })
+    element.style.justifyContent = "center"
   }
 }
 

src/pages/IndexPage.vue

@@ -309,6 +309,14 @@ export default {
         {
           label: this.$i18n('right'),
           value: 'right'
+        },
+        {
+          label: this.$i18n('left_bottom'),
+          value: 'left_bottom'
+        },
+        {
+          label: this.$i18n('right_bottom'),
+          value: 'right_bottom'
         }
       ],
 

yarn.lock

@@ -2757,10 +2757,10 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
-ribbon-corner@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/ribbon-corner/-/ribbon-corner-1.0.5.tgz#a0015b850e9c591565f0283561476d2626eb167f"
-  integrity sha512-wYjMZAI1EhXa0XLygQHzsNiEQEATqPMZSA/3LS71gent6mabhxJr0M6z7D/qa0kxPzH+m8JB6ZA3r+VMA9yp1A==
+ribbon-corner@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/ribbon-corner/-/ribbon-corner-1.0.9.tgz#98766a840a9865e9e9a942cfc67f570163aa3284"
+  integrity sha512-qfsaBjTvX3C8KrLN5a0yNmBfkY+CGCyJqog1QoK5xUvZNIUsS9DIgzKWB18tJSHNiEeMvHyhsKeuQpZl+BHNBg==
 
 rollup-plugin-visualizer@^5.13.1:
   version "5.14.0"