[add]发布器

package.json

@@ -9,6 +9,7 @@
     "build-watch": "vue-cli-service  --env.NODE_ENV=development build-watch --mode development"
   },
   "dependencies": {
+    "@paypal/paypal-js": "^5.0.2",
     "core-js": "^3.8.3",
     "element-plus": "^2.1.4",
     "postcss-import": "^14.0.2",

src/entry/content.js

@@ -1,49 +1,87 @@
-console.log('123 world content todo something~')
-let span = document.createElement('span');
-
-const shadowRoot = span.attachShadow({mode: 'closed'})
+let deIcon = document.createElement('span');
+const shadowRoot = deIcon.attachShadow({mode: 'closed'})
 const shadowDiv = document.createElement('div');
-shadowDiv.innerText = 'Test Btn'
-shadowRoot.appendChild(shadowDiv)
-let tweet;
+shadowDiv.innerText = 'Test Btn';
+shadowDiv.id = 'de-icon';
+shadowRoot.appendChild(shadowDiv);
+let tweetBtn;
 
+deIcon.addEventListener('click', () => {
+	document.getElementById('iframe-test').contentWindow.postMessage({actionType : 'showGiveDialog'}, '*');
+})
 
 document.addEventListener('DOMContentLoaded', function () {
 	addIframe();
-	
 	setTimeout(() => {
-		addDeNetBtn(span);
-		tweet = document.querySelectorAll('[aria-label="Tweet"]')[0];
-		tweet.addEventListener('click', function () {
-			addDeNetBtn(span);
+		tweetBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
+		tweetBtn.addEventListener('click', function () {
 		})
 	}, 1000)
 })
 
-function addDeNetBtn (dom) {
+window.addEventListener('message', function (event) {
+	if (event.data && event.data.actionType) {
+		let iframe = document.getElementById('iframe-test');
+		switch (event.data.actionType) {
+			case "showIframe":
+				iframe.style.display = 'block';
+				break;
+			case "hideIframe":
+				iframe.style.display = 'none';
+				break;
+			case "showTwitterPublishDialog":
+				iframe.style.display = 'none';
+				tweetBtn.click();
+				break;
+		}
+	}
+	console.log('message',event);
+});
+
+function addDeNetBtn (parent, dom, isClick = false) {
 	setTimeout(() => {
-		let scheduleTweet = document.querySelectorAll('[aria-label="Schedule Tweet"]')[0];
-		if (scheduleTweet) {
-			scheduleTweet.parentNode.insertBefore(dom, scheduleTweet.nextSibling);
+		if (parent) {
+			parent.parentNode.insertBefore(dom, parent.nextSibling);
 		} else {
 			setTimeout(() => {
-				scheduleTweet = document.querySelectorAll('[aria-label="Schedule Tweet"]')[0];
-				scheduleTweet.parentNode.insertBefore(dom, scheduleTweet.nextSibling);
-				
+				parent = getScheduleDom(isClick);
+				parent.parentNode.insertBefore(dom, parent.nextSibling);
 			}, 1000)
 		}
-		
-		dom.addEventListener('click', () => {
-			console.log('click', 8888, )
-			document.getElementById('iframe-test').contentWindow.postMessage({a : 1}, '*');
-		})
 	})
 }
 
+function getScheduleDom (isDialogInner = false) {
+	let scheduleBtn;
+	if (isDialogInner) {
+		scheduleBtn = document.querySelector('div[role="dialog"]').querySelector('[data-testid="createPollButton"]');
+	} else {
+		// eslint-disable-next-line no-unused-vars
+		let toolBar = document.querySelector('div[data-testid="toolBar"]');
+		if (toolBar) {
+			scheduleBtn = toolBar.querySelector('div[data-testid="createPollButton"]');
+		}
+	}
+	return scheduleBtn;
+}
+
 function addIframe () {
-	let iframe = document.createElement('iframe')
+	// let span = document.createElement('span');
+	// const shadowRoot = span.attachShadow({mode: 'closed'})
+	let iframe = document.createElement('iframe');
 	iframe.src = chrome.runtime.getURL('/iframe/test.html')
 	iframe.id = 'iframe-test'
-	iframe.style.cssText = 'position:fixed;top:0px;right:0;display:block; width:500px;height:500px;z-index:1000; border: medium none;';
+	iframe.style.cssText = 'position:fixed;top:0px;right:0;display:block; width:100%;height:100%;z-index:1000; border: medium none;display:none';
+	// shadowRoot.appendChild(iframe);
+	// document.body.appendChild(span)
 	document.body.appendChild(iframe)
 }
+
+setInterval(() => {
+	let toolBar = document.querySelector('div[data-testid="toolBar"]');
+	let innerdeIcon = document.getElementById('de-icon');
+	if (toolBar && !innerdeIcon) {
+		let dialogScheduleBtn = getScheduleDom(false);
+		addDeNetBtn(dialogScheduleBtn, deIcon);
+	}
+}, 800)

src/view/components/give-dialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    title="Tips"
+    width="30%"
+    @close="close">
+    <span>Dialog</span>
+    <template #footer>
+      <span class="dialog-footer">
+<!--    <el-button @click="close">Cancel</el-button>-->
+        <el-button type="primary" @click="confirm">Confirm</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+/* eslint-disable */
+  import {ref, watch} from "vue";
+  let visible = ref(false);
+
+  const props = defineProps({
+		dialogVisible: {
+			type: Boolean,
+      default: false
+    }
+  })
+
+  watch(
+    () => props.dialogVisible,
+    (newVal, oldVal) => {
+    	console.log('watch', newVal)
+      visible.value = newVal
+    }
+  );
+
+	const emits = defineEmits(['close', 'confirm'])
+
+	const close = () => {
+  	emits('close', false)
+	}
+
+	const confirm = () => {
+		emits('confirm', false)
+	}
+</script>
+
+<style scoped>
+
+</style>

src/view/components/pay-dialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    title="Tips"
+    width="30%"
+    @close="close">
+    <div ref="content">
+      <iframe class="iframe-pay" src="https://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/testScript1.html"></iframe>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+<!--    <el-button @click="close">Cancel</el-button>-->
+        <el-button type="primary" @click="confirm">Confirm</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+/* eslint-disable */
+  import {ref, watch, onMounted, getCurrentInstance, nextTick} from "vue";
+  let visible = ref(false);
+  const { proxy } = getCurrentInstance();
+
+  const props = defineProps({
+		dialogVisible: {
+			type: Boolean,
+      default: false
+    }
+  })
+
+  onMounted(() => {
+  });
+
+  watch(
+    () => props.dialogVisible,
+    (newVal, oldVal) => {
+    	console.log('watch', newVal)
+      visible.value = newVal;
+    	if (newVal) {
+				nextTick(() => {
+				})
+			}
+    }
+  );
+
+	const emits = defineEmits(['close', 'confirm'])
+
+	const close = () => {
+  	emits('close', false)
+	}
+
+	const confirm = () => {
+		emits('confirm', false)
+	}
+</script>
+
+<style scoped>
+  .iframe-pay {
+    width: 400px;
+    height: 200px;
+    border: medium none;
+  }
+</style>

src/view/test.vue

@@ -1,49 +1,57 @@
 <template>
   <div class="main_app">
-    <el-button type="text" @click="dialogVisible = true"
-    >click to open the Dialog</el-button
-    >
-
-    <el-dialog
-      v-model="dialogVisible"
-      title="Tips"
-      width="30%"
-      :before-close="handleClose"
-    >
-      <span>This is a message</span>
-      <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="dialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogVisible = false"
-        >Confirm</el-button
-        >
-      </span>
-      </template>
-    </el-dialog>
+    <el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
+
+    <give-dialog :dialogVisible="dialogVisible"
+                 @close="close"
+                 @confirm="confirm"></give-dialog>
+    <pay-dialog :dialogVisible="payDialogVisible"
+                 @close="closePay"
+                 @confirm="confirmPay"></pay-dialog>
+
   </div>
 </template>
 
 <script setup>
   import { ref } from 'vue'
-  import { ElMessageBox } from 'element-plus'
+	import giveDialog from './components/give-dialog.vue'
+	import payDialog from './components/pay-dialog.vue'
+
+  let dialogVisible = ref(false);
+  let payDialogVisible = ref(false);
 
-  const dialogVisible = ref(false)
+	const close = () => {
+		dialogVisible.value = false
+		hideIframe();
+	}
 
-  const handleClose = ( done => {
-    ElMessageBox.confirm('Are you sure to close this dialog?')
-      .then(() => {
-        done()
-      })
-      .catch(() => {
-        // catch error
-      })
-  });
+  const confirm = () => {
+		// dialogVisible.value = false;
+		payDialogVisible.value = true;
+	}
 
+	const closePay = () => {
+		payDialogVisible.value = false;
+	}
+
+	const confirmPay = () => {
+		payDialogVisible.value = false;
+		window.parent.postMessage({actionType: 'showTwitterPublishDialog'},'*')
+		// window.parent.postMessage({actionType: 'hideIframe'},'*')
+	}
+
+	const hideIframe = () => {
+		window.parent.postMessage({actionType: 'hideIframe'},'*')
+	}
 
 	window.addEventListener('message', function (event) {
 		console.log('addEventListener',event)
-    if (event.data) {handleClose();}
+    if (event.data && event.data.actionType == 'showGiveDialog') {
+			window.parent.postMessage({actionType: 'showIframe'},'*')
+			dialogVisible.value = true
+    }
 	});
+
 </script>
 
 <style>

yarn.lock

@@ -1043,6 +1043,13 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@paypal/paypal-js@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-5.0.2.tgz#bf07d7ae3f397070f67b4727982365a44faa836e"
+  integrity sha512-bRQ6P0sftCkunQXKjujDjxCbfCdIZpn29JoQU5HTW50lV1yFGKf8q9DJIAnzHPgDDc0CTJ27dlkLD94oKEd6Jg==
+  dependencies:
+    promise-polyfill "^8.2.1"
+
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.21"
   resolved "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
@@ -5098,6 +5105,11 @@ progress@^2.0.0:
   resolved "https://registry.npmmirror.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
+promise-polyfill@^8.2.1:
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.2.3.tgz#2edc7e4b81aff781c88a0d577e5fe9da822107c6"
+  integrity sha512-Og0+jCRQetV84U8wVjMNccfGCnMQ9mGs9Hv78QFe+pSDD3gWTpz0y+1QCuxy5d/vBFuZ3iwP2eycAkvqIMPmWg==
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"