[add] 先行版发布器流程

src/entry/content.js

@@ -1,18 +1,22 @@
-let deIcon = document.createElement('span');
-const shadowRoot = deIcon.attachShadow({mode: 'closed'})
+/* eslint-disable */
+let deBtn = document.createElement('span');
+const shadowRoot = deBtn.attachShadow({mode: 'closed'})
 const shadowDiv = document.createElement('div');
 shadowDiv.innerText = 'Test Btn';
-shadowDiv.id = 'de-icon';
+shadowDiv.id = 'de-btn';
+shadowDiv.style.cssText = 'width:220px;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background-color: rgb(29, 155, 240);color:#fff;font-size:15px;font-weight:700;border-radius:30px';
 shadowRoot.appendChild(shadowDiv);
 let tweetBtn;
 
-deIcon.addEventListener('click', () => {
+deBtn.addEventListener('click', () => {
 	document.getElementById('iframe-test').contentWindow.postMessage({actionType : 'showGiveDialog'}, '*');
 })
 
 document.addEventListener('DOMContentLoaded', function () {
-	addIframe();
 	setTimeout(() => {
+		addDeNetBtn(deBtn);
+		addIframe();
+		
 		tweetBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
 		tweetBtn.addEventListener('click', function () {
 		})
@@ -30,7 +34,7 @@ window.addEventListener('message', function (event) {
 				iframe.style.display = 'none';
 				break;
 			case "showTwitterPublishDialog":
-				iframe.style.display = 'none';
+				// iframe.style.display = 'none';
 				tweetBtn.click();
 				break;
 		}
@@ -38,7 +42,7 @@ window.addEventListener('message', function (event) {
 	console.log('message',event);
 });
 
-function addDeNetBtn (parent, dom, isClick = false) {
+function addDeNetEditBtn (parent, dom, isClick = false) {
 	setTimeout(() => {
 		if (parent) {
 			parent.parentNode.insertBefore(dom, parent.nextSibling);
@@ -51,6 +55,15 @@ function addDeNetBtn (parent, dom, isClick = false) {
 	})
 }
 
+function addDeNetBtn (dom) {
+	setTimeout(() => {
+		let node = document.querySelector('.r-1habvwh');
+		if (node) {
+			node.appendChild(dom);
+		}
+	}, 1000)
+}
+
 function getScheduleDom (isDialogInner = false) {
 	let scheduleBtn;
 	if (isDialogInner) {
@@ -71,17 +84,17 @@ function addIframe () {
 	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:100%;height:100%;z-index:1000; border: medium none;display:none';
+	iframe.style.cssText = 'position:fixed;top:0px;right:0;display:block; width:100%;height:100%;z-index:0; border: medium none;display:none';
 	// shadowRoot.appendChild(iframe);
 	// document.body.appendChild(span)
-	document.body.appendChild(iframe)
+	document.getElementById('layers').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);
+	let innerDeIcon = document.getElementById('de-icon');
+	if (toolBar && !innerDeIcon) {
+		// let dialogScheduleBtn = getScheduleDom(false);
+		// addDeNetEditBtn(dialogScheduleBtn, deBtn);
 	}
 }, 800)

src/view/components/give-dialog.vue

@@ -1,14 +1,14 @@
 <template>
   <el-dialog
     v-model="visible"
-    title="Tips"
+    title="give Dialog"
     width="30%"
     @close="close">
-    <span>Dialog</span>
+    <span></span>
     <template #footer>
       <span class="dialog-footer">
 <!--    <el-button @click="close">Cancel</el-button>-->
-        <el-button type="primary" @click="confirm">Confirm</el-button>
+        <el-button type="primary" @click="confirm">next</el-button>
       </span>
     </template>
   </el-dialog>

src/view/components/pay-dialog.vue

@@ -5,7 +5,9 @@
     width="30%"
     @close="close">
     <div ref="content">
-      <iframe class="iframe-pay" src="https://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/testScript1.html"></iframe>
+      <iframe class="iframe-pay"
+              ref="iframe"
+              src="https://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/testScript.html"></iframe>
     </div>
     <template #footer>
       <span class="dialog-footer">
@@ -17,8 +19,10 @@
 </template>
 <script setup>
 /* eslint-disable */
-  import {ref, watch, onMounted, getCurrentInstance, nextTick} from "vue";
+  import {ref, watch, nextTick, onMounted, getCurrentInstance, } from "vue";
   let visible = ref(false);
+  let iframe = ref(null);
+  let amount = ref(5);
   const { proxy } = getCurrentInstance();
 
   const props = defineProps({
@@ -29,12 +33,24 @@
   })
 
   onMounted(() => {
-  });
+		window.addEventListener("message", function (event) {
+			if (event.data && event.data.actionType) {
+				switch (event.data.actionType) {
+					case 'payCallBack':
+						let {orderData, transaction} = event.data;
+						console.log('payCallBack',orderData, transaction)
+						break;
+					case "iframeLoaded":
+						iframe.value.contentWindow.postMessage({actionType : 'setAmount', amount: amount.value}, '*');
+						break;
+				}
+			}
+		});
+	});
 
   watch(
     () => props.dialogVisible,
     (newVal, oldVal) => {
-    	console.log('watch', newVal)
       visible.value = newVal;
     	if (newVal) {
 				nextTick(() => {
@@ -59,5 +75,6 @@
     width: 400px;
     height: 200px;
     border: medium none;
+    display: block;
   }
 </style>

src/view/options.vue

@@ -18,11 +18,5 @@ export default {
 
 <style>
 .main_app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/view/paypal.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+        <style>
+            html,
+            body,
+            iframe,
+            h2 {
+                margin: 0;
+                border: 0;
+                padding: 0;
+                display: block;
+                height: 100%;
+                width: 100%;
+                background: white;
+                color: black;
+            }
+
+            h2 {
+                height: 50px;
+                font-size: 20px;
+            }
+        </style>
+    </head>
+
+    <body>
+        <!-- Include the PayPal JavaScript SDK; replace "test" with your own sandbox Business account app client ID -->
+        <script src="https://www.paypal.com/sdk/js?client-id=ASn7k0zqyS5AWYikVSfmamR-RFpjyU_QFJWSxOHHoWE04-RgHNO6nahn0GyHUaUAEBxj-aKgtSrq4O4G&currency=USD"></script>
+        <!-- Set up a container element for the button -->
+        <div id="paypal-button-container"></div>
+        <script>
+            // let amount = window.location.search.split('=')[1];
+            let amount = 0;
+            document.addEventListener("DOMContentLoaded", function () {
+                window.parent.postMessage({ actionType: "iframeLoaded" }, "*");
+
+                window.addEventListener("message", function (event) {
+                    if (event.data && event.data.actionType) {
+                        switch (event.data.actionType) {
+                            case "setAmount":
+                                amount = event.data.amount;
+                                initPaypal(amount);
+                                break;
+                        }
+                    }
+                });
+            });
+
+            function initPaypal(amount) {
+                let dom = document.getElementById('paypal-button-container');
+                if(dom.children && dom.children.length) {
+                  empty(dom)
+                }
+                paypal
+                    .Buttons({
+                        // Sets up the transaction when a payment button is clicked
+                        createOrder: function (data, actions) {
+                            return actions.order.create({
+                                purchase_units: [
+                                    {
+                                        amount: {
+                                            value: amount, // Can reference variables or functions. Example: `value: document.getElementById('...').value`
+                                        },
+                                    },
+                                ],
+                            });
+                        },
+
+                        // Finalize the transaction after payer approval
+                        onApprove: function (data, actions) {
+                            return actions.order
+                                .capture()
+                                .then(function (orderData) {
+                                    // Successful capture! For dev/demo purposes:
+                                    console.log(
+                                        "Capture result",
+                                        orderData,
+                                        JSON.stringify(orderData, null, 2)
+                                    );
+                                    var transaction =
+                                        orderData.purchase_units[0].payments
+                                            .captures[0];
+                                    alert(
+                                        "Transaction " +
+                                            transaction.status +
+                                            ": " +
+                                            transaction.id +
+                                            "\n\nSee console for all available details"
+                                    );
+                                    amount = 0;
+                                    window.parent.postMessage(
+                                        {
+                                            actionType: "payCallBack",
+                                            orderData: orderData,
+                                            transaction: transaction,
+                                        },
+                                        "*"
+                                    );
+                                    // When ready to go live, remove the alert and show a success message within this page. For example:
+                                    // var element = document.getElementById('paypal-button-container');
+                                    // element.innerHTML = '';
+                                    // element.innerHTML = '<h3>Thank you for your payment!</h3>';
+                                    // Or go to another URL:  actions.redirect('thank_you.html');
+                                });
+                        },
+                    })
+                    .render("#paypal-button-container");
+            }
+            function empty (e) {
+              while (e.firstChild) {
+                  e.removeChild (e.firstChild);
+              }
+            }
+        </script>
+    </body>
+</html>

src/view/popup.vue

@@ -5,13 +5,9 @@
 </template>
 
 <script setup>
-  import {ref, reactive, getCurrentInstance} from 'vue';
+  import {ref, reactive} from 'vue';
   let count = ref(0);
   const user = reactive({ name: "test"  });
-  const internalInstance = getCurrentInstance()
-
-
-  console.log(internalInstance)
 </script>
 
 <script>
@@ -20,11 +16,5 @@
 
 <style>
 .main_app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/view/test.vue

@@ -56,11 +56,5 @@
 
 <style>
 .main_app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>