[edit] publish tips

src/assets/svg/icon-bells.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 0C6.69231 0 0 6.69231 0 15C0 23.3077 6.69231 30 15 30C23.3077 30 30 23.3077 30 15C30 6.69231 23.3077 0 15 0ZM15 23.1923C14.1923 23.1923 13.5 22.6154 13.5 21.8077C13.5 21.6923 13.6154 21.5769 13.7308 21.5769H16.3846C16.5 21.5769 16.6154 21.6923 16.6154 21.8077C16.5 22.6154 15.8077 23.3077 15 23.1923ZM21.6923 20.4231C21.6923 20.5385 21.5769 20.6538 21.4615 20.6538H8.53846C8.42308 20.6538 8.30769 20.5385 8.30769 20.4231V19.1538C8.30769 18.3462 9.23077 17.7692 10.5 17.6538C10.3846 17.1923 10.2692 16.7308 10.2692 16.2692V12.5769C10.2692 10.6154 11.6538 9 13.5 8.53846V8.19231C13.6154 7.38462 14.3077 6.69231 15.1154 6.80769C15.8077 6.92308 16.5 7.5 16.5 8.19231V8.53846C18.3462 9 19.6154 10.7308 19.7308 12.5769V16.2692C19.7308 16.7308 19.6154 17.1923 19.5 17.6538C20.7692 17.7692 21.6923 18.3462 21.6923 19.1538V20.4231Z" fill="#FFA800"/>
+</svg>

src/iframe/publish-tips.js

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/publish-tips/publish-tips.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+
+const app = createApp(App);
+
+app.use(ElementPlus);
+app.mount('#app');

src/logic/content/twitter.js

@@ -72,6 +72,7 @@ export function hideIframeHandler() {
 /**
  * 展示twitter原生发布框
  */
+
 export function showTwitterPublishDialogHandler(publishRes) {
     let bigBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
     if(bigBtn) {
@@ -81,6 +82,11 @@ export function showTwitterPublishDialogHandler(publishRes) {
         smallBtn && smallBtn.click();
     }
 
+    setChromeStorage({ publishData: JSON.stringify(publishRes) })
+
+    addPublishTipsIframe({
+        srcContent: publishRes.srcContent
+    })
     _setPublishContent(publishRes.srcContent);
     _publishTweetEvent(publishRes.postId, bindTwitterArtMethod);
 }
@@ -282,6 +288,25 @@ function _addIframe() {
     }
 }
 
+function addPublishTipsIframe({srcContent}) {
+    setTimeout(() => {
+        let dialog = document.querySelector('div[role="dialog"]').querySelector('div[role="dialog"]')
+
+        if(dialog) {
+            let right = dialog.offsetLeft - 15 - 266, top = window.innerHeight * 0.05 + dialog.offsetHeight - 60 - 160;
+
+            let iframe = document.createElement('iframe');
+            iframe.id = 'de-publish-tips'
+            iframe.src = chrome.runtime.getURL('/iframe/publish-tips.html');
+            iframe.style.cssText = `border: medium none; width:266px;min-height:178px;position: fixed; right: ${right}px; top: ${top}px;`
+            let iframeContent = document.getElementById('de-publish-tips');
+            if(!iframeContent) {
+                dialog.appendChild(iframe)
+            }
+        }
+    }, 1000)
+}
+
 /**
  * 点击deNet按钮处理
  * @private
@@ -623,7 +648,8 @@ export function init() {
         }
     }, 1000);
     renderDom();
-    checkTwitterTaskState()
+    checkTwitterTaskState();
+
     getChromeStorage("popupShowPublishDialog", (res) => {
         console.log("popupShowPublishDialog", res);
         if (res && res.show) {

src/manifest.json

@@ -54,7 +54,8 @@
             "resources": [
                 "/iframe/publish.html",
                 "/iframe/red-packet.html",
-                "/iframe/home.html"
+                "/iframe/home.html",
+                "/iframe/publish-tips.html"
             ],
             "matches": [
                 "<all_urls>"

src/view/iframe/publish-tips/publish-tips.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="tips-wrapper">
+        <div class="top">
+            <img src="@/assets/svg/icon-bells.svg" class="icon-bells">
+            <div class="text-wrapper">
+                <div>
+                    Do not delete the
+                </div>
+                <div>
+                    <span>#DeNet</span>and<span> Giveaway link</span>
+                    otherwise the giveaway will not be available
+                </div>
+            </div>
+        </div>
+        <div class="copy-btn" 
+            :data-clipboard-text="strContent" 
+            @click="copyToken">Copy giveaways link</div>
+    </div>
+</template>
+
+<script setup>
+/* eslint-disable */
+import { onMounted, ref } from "vue";
+import { ElMessage } from 'element-plus'
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
+
+let ClipboardJS = require('clipboard');
+
+let strContent = ref('');
+
+const copyToken = async () => {
+    let publishData = await getChromeStorage('publishData');
+    strContent.value = publishData.srcContent;
+    var clipboard = new ClipboardJS('.copy-btn');
+    clipboard.on('success', function (e) {
+        // ElMessage({
+        //     message: 'copy success',
+        //     grouping: true,
+        //     type: 'success',
+        //     offset: -16,
+        //     appendTo: document.body
+
+        // })
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
+
+        e.clearSelection();
+    });
+
+    clipboard.on('error', function (e) {
+        // ElMessage({
+        //     message: 'copy error',
+        //     grouping: true,
+        //     type: 'error',
+        //     offset: -16
+        // })
+        console.error('Action:', e.action);
+        console.error('Trigger:', e.trigger);
+    });
+}
+
+
+onMounted(() => {
+}) 
+
+</script>
+
+<style scoped lang="scss">
+.tips-wrapper {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    border-radius: 12px;
+    padding: 15px;
+    .top {
+        display: flex;
+
+        .icon-bells {
+            width: 30px;
+            height: 30px;
+            margin-right: 8px;
+        }
+
+        .text-wrapper {
+            font-weight: 500;
+            font-size: 14px;
+
+            span {
+                color: red;
+            }
+        }
+    }
+
+    .copy-btn {
+        margin-top: 20px;
+        background: rgba(56, 154, 255, 0.01);
+        border: 1px solid #000000;
+        border-radius: 100px;
+        font-weight: 500;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 33px;
+        cursor: pointer;
+    }
+}
+</style>