[add] content逻辑迁移到twitterjs

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@paypal/paypal-js": "^5.0.2",
+    "axios": "^0.26.1",
     "core-js": "^3.8.3",
     "element-plus": "^2.1.4",
     "node-sass": "^7.0.1",
@@ -28,6 +29,8 @@
     "eslint-plugin-vue": "^8.0.3",
     "unplugin-auto-import": "^0.6.6",
     "unplugin-vue-components": "^0.18.3",
+    "node-sass": "^7.0.1",
+    "sass-loader": "^12.6.0",
     "vue-cli-plugin-chrome-extension-cli": "~1.1.2"
   },
   "eslintConfig": {

src/entry/background.js

@@ -1 +1,19 @@
-console.log('hello world background todo something~')
+console.log('hello world background todo something~')
+
+import { backTwitterPinLoginToken ,backTwitterPinLoginCode} from '../logic/twitter.js'
+
+
+// 消息通讯
+chrome.runtime.onConnect.addListener(function (port) {
+    port.onMessage.addListener(function (res) {
+        switch (res.state) {
+            case 'CONTENT_SEND_CODE':
+                port.postMessage({ state: 'BACK_TWITTER_LOGIN_SUCCESS' })
+                backTwitterPinLoginCode(res.code)
+                break
+            case 'CONTENT_TWITTER_LOGIN':
+                backTwitterPinLoginToken()
+                break
+        }
+    })
+})

src/entry/content.js

@@ -1,153 +1,35 @@
-/* eslint-disable */
-let deBtn = document.createElement('span');
-const shadowRoot = deBtn.attachShadow({mode: 'closed'})
-const shadowDiv = document.createElement('div');
-shadowDiv.innerText = 'DeNet';
-shadowDiv.id = 'de-btn';
-shadowDiv.style.cssText = 'width:220px;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:15px;font-weight:700;border-radius:100px;cursor: pointer;';
-shadowRoot.appendChild(shadowDiv);
+var port = chrome.runtime.connect({ name: "hello" });
 
+import { contentTwitterPinLogin, renderDom, showGiveDialogHandler, showIframeHandler, hideIframeHandler,
+	showTwitterPublishDialogHandler } from '../logic/twitter.js'
 
-const deBtn1 = document.createElement('div');
-const smallDeBtnStyle = 'width:30px;height: 30px;text-align:center;line-height:30px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:12px;font-weight:500;border-radius:4px;cursor: pointer;';
-deBtn1.innerText = 'De';
-deBtn1.id = 'de-btn1';
-deBtn1.style.cssText = smallDeBtnStyle;
-
-const deBtn2 = document.createElement('div');
-deBtn2.innerText = 'De';
-deBtn2.id = 'de-btn2';
-deBtn2.style.cssText = smallDeBtnStyle;
-
-let tweetBtn;
-
-deBtn.addEventListener('click', () => {
-	showGiveDialog();
-})
-deBtn1.addEventListener('click', () => {
-	showGiveDialog();
-})
-deBtn2.addEventListener('click', () => {
-	showGiveDialog();
+port.onMessage.addListener(function (res) {
+    switch (res.state) {
+			case 'BACK_TWITTER_LOGIN_SUCCESS':
+				showGiveDialogHandler();
+				break;
+    }
 })
 
-document.addEventListener('DOMContentLoaded', function () {
-	setTimeout(() => {
-		addDeNetBtn(deBtn);
-		addIframe();
-		
-		tweetBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
-		tweetBtn.addEventListener('click', function () {
-			setTimeout(() => {
-				let dialogScheduleBtn = getScheduleDom(true);
-				addDeNetEditBtn(dialogScheduleBtn, deBtn2);
-			}, 800)
-		})
-	}, 1000)
-})
+window.onload = () => {
+    contentTwitterPinLogin(port)
+		renderDom(port);
+}
 
-window.addEventListener('message', function (event) {
-	if (event.data && event.data.actionType) {
-		let iframe = document.getElementById('iframe-test');
-		switch (event.data.actionType) {
+window.onmessage = (res) => {
+	if (res.data && res.data.actionType) {
+		switch (res.data.actionType) {
 			case "showIframe":
-				iframe.style.display = 'block';
+				showIframeHandler();
 				break;
 			case "hideIframe":
-				iframe.style.display = 'none';
+				hideIframeHandler();
 				break;
 			case "showTwitterPublishDialog":
-				// iframe.style.display = 'none';
-				tweetBtn.click();
-				publishTweetEvent();
+				showTwitterPublishDialogHandler()
 				break;
 		}
 	}
-	console.log('message',event);
-});
-
-function publishTweetEvent () {
-	let publishTweetBtn = document.querySelector('div[role="dialog"]').querySelector('div[data-testid="tweetButton"]');
-	publishTweetBtn.addEventListener('click', function () {
-		setTimeout(() => {
-			let twitterArtId = getTwitterArtId();
-		}, 1000)
-	});
-}
-
-function addDeNetEditBtn (parent, dom, isClick = false) {
-	setTimeout(() => {
-		if (parent) {
-			parent.parentNode.insertBefore(dom, parent.nextSibling);
-		} else {
-			setTimeout(() => {
-				parent = getScheduleDom(isClick);
-				parent.parentNode.insertBefore(dom, parent.nextSibling);
-			}, 1000)
-		}
-	})
-}
-
-function addDeNetBtn (dom) {
-	setTimeout(() => {
-		let node = document.querySelector('header[role="banner"]').querySelector('.r-1habvwh');
-		if (node) {
-			node.appendChild(dom);
-		}
-		
-		let dialogScheduleBtn = getScheduleDom(false);
-		addDeNetEditBtn(dialogScheduleBtn, deBtn1);
-	}, 1000)
-}
-
-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 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:100%;height:100%;z-index:0; border: medium none;display:none';
-	// shadowRoot.appendChild(iframe);
-	// document.body.appendChild(span)
-	document.getElementById('layers').appendChild(iframe)
 }
 
-function getTwitterArtId () {
-	let firstTwitterArtId = document.querySelector('article[data-testid="tweet"]').querySelector('a[dir="auto"]').getAttribute('href');
-	
-	return firstTwitterArtId;
-}
-
-function showGiveDialog() {
-	document.getElementById('iframe-test').contentWindow.postMessage({actionType : 'showGiveDialog'}, '*');
-}
 
-function setPublishContent (content) {
-	setTimeout(() => {
-		document.execCommand("insertText", false, content);
-	});
-}
-
-
-/* setInterval(() => {
-	let toolBar = document.querySelector('div[data-testid="toolBar"]');
-	let innerDeIcon = document.getElementById('de-icon');
-	if (toolBar && !innerDeIcon) {
-		// let dialogScheduleBtn = getScheduleDom(false);
-		// addDeNetEditBtn(dialogScheduleBtn, deBtn1);
-	}
-}, 800) */

src/logic/twitter.js

@@ -0,0 +1,301 @@
+/* eslint-disable */
+import { getChromeStorage, setChromeStorage } from '../uilts/chromeExtension.js'
+import { getTtwitterRequestToken, twitterLogin } from '../server/twitter.js'
+
+let tweetBtn;
+
+let deBtn, deBtn1, deBtn2;
+
+export function contentTwitterPinLogin(port) {
+    if (window.location.href == 'https://api.twitter.com/oauth/authorize') {
+        let code = document.querySelector('code')
+
+        if (code) {
+            port.postMessage({ state: 'CONTENT_SEND_CODE', code: code.innerText })
+        }
+    }
+}
+
+let authToken = ''
+export function backTwitterPinLoginToken() {
+    // 1.判断是否登陆了
+    getChromeStorage('userInfo', (res) => {
+        // 没有登陆
+        if (!res) {
+            getTtwitterRequestToken().then((res) => {
+                authToken = res.data.authToken
+                chrome.tabs.create({
+                    url: `https://api.twitter.com/oauth/authorize?oauth_token=${res.data.authToken}`
+                })
+            })
+        }
+    })
+}
+
+export function backTwitterPinLoginCode(code) {
+    // 关闭code页面
+    chrome.tabs.query({}, (tab) => {
+        for (let i in tab) {
+            console.log(tab[i])
+            if (tab[i].url == 'https://api.twitter.com/oauth/authorize') {
+                chrome.tabs.remove(tab[i].id)
+                break
+            }
+        }
+    })
+    // 发送请求
+    // token,code
+    twitterLogin(authToken, code).then(res => {
+        if (res.code == 0) {
+            setChromeStorage({ userInfo: JSON.stringify(res.data) })
+        }
+    })
+}
+
+function getUserInfo (cb) {
+    getChromeStorage('userInfo', (res) => {
+        cb && cb(res);
+    })
+}
+
+/**
+ * 渲染要插入的dom,初始化逻辑
+ * @param port
+ */
+export function renderDom (port) {
+    let {deBtn: deNet, deBtn1: deNet1, deBtn2: deNet2} = _createBtnDom(port);
+    deBtn = deNet;
+    deBtn1 = deNet1;
+    deBtn2 = deNet2;
+    setTimeout(() => {
+        _addIframe();
+        _addDeNetBtn();
+        _getSliderTwitterBtn();
+    }, 800)
+}
+
+/**
+ * 监听dialog内点击原生发布按钮事件
+ * @private
+ */
+function _publishTweetEvent (cb) {
+    let publishTweetBtn = document.querySelector('div[role="dialog"]').querySelector('div[data-testid="tweetButton"]');
+    publishTweetBtn.addEventListener('click', function () {
+        setTimeout(() => {
+            let twitterArtId = _getTwitterArtId();
+            cb && cb(twitterArtId)
+        }, 1000)
+    });
+}
+
+/**
+ * 获取插入的iframe
+ * @returns {HTMLElement}
+ */
+function getIframe () {
+    let iframe = document.getElementById('iframe-test');
+    return iframe;
+}
+
+/**
+ * 展示give弹窗
+ */
+export function showGiveDialogHandler() {
+    getIframe().contentWindow.postMessage({actionType : 'showGiveDialog'}, '*');
+}
+
+export function showIframeHandler () {
+    getIframe().style.display = 'block';
+}
+
+export function hideIframeHandler () {
+    getIframe().style.display = 'none';
+}
+
+/**
+ * 展示twitter原生发布框
+ */
+export function showTwitterPublishDialogHandler () {
+    tweetBtn.click();
+    _publishTweetEvent();
+}
+
+/**
+ * 在输入推文区插入deNet按钮
+ * @param parent
+ * @param dom
+ * @param isClick
+ * @private
+ */
+function _addDeNetEditBtn (parent, dom, isClick = false) {
+    setTimeout(() => {
+        if (parent) {
+            parent.parentNode.insertBefore(dom, parent.nextSibling);
+        } else {
+            setTimeout(() => {
+                parent = _getScheduleDom(isClick);
+                parent.parentNode.insertBefore(dom, parent.nextSibling);
+            }, 1000)
+        }
+    })
+}
+
+/**
+ * 在dialog插入deNet按钮
+ * @private
+ */
+function _addDeNetBtnToDialog () {
+    setTimeout(() => {
+        let dialogScheduleBtn = _getScheduleDom(true);
+        _addDeNetEditBtn(dialogScheduleBtn, deBtn2);
+    }, 800)
+}
+
+/**
+ * 获取左侧twitter按钮
+ * @private
+ */
+function _getSliderTwitterBtn () {
+    tweetBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
+    tweetBtn.addEventListener('click', function () {
+        _addDeNetBtnToDialog();
+    })
+}
+
+/**
+ * 添加deNet按钮
+ * @private
+ */
+function _addDeNetBtn () {
+    setTimeout(() => {
+        let node = document.querySelector('header[role="banner"]').querySelector('.r-1habvwh');
+        if (node) {
+            node.appendChild(deBtn);
+        }
+        
+        let dialogScheduleBtn = _getScheduleDom(false);
+        _addDeNetEditBtn(dialogScheduleBtn, deBtn1);
+    }, 800)
+}
+
+/**
+ * 获取推文输入框内dom,用于插入deNet
+ * @param isDialogInner
+ * @returns {Element}
+ * @private
+ */
+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;
+}
+
+/**
+ * 插入iframe到页面
+ * @private
+ */
+function _addIframe () {
+    // 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:100%;height:100%;z-index:0; border: medium none;display:none';
+    // shadowRoot.appendChild(iframe);
+    // document.body.appendChild(span)
+    document.getElementById('layers').appendChild(iframe)
+}
+
+/**
+ * 获取发布推文id
+ * @returns {string}
+ * @private
+ */
+function _getTwitterArtId () {
+    let firstTwitterArtId = document.querySelector('article[data-testid="tweet"]').querySelector('a[dir="auto"]').getAttribute('href');
+    return firstTwitterArtId;
+}
+
+/**
+ * 点击deNet按钮处理
+ * @private
+ */
+function _deNetBtnClick(port) {
+    getUserInfo((res) => {
+        if (res) {
+            showGiveDialogHandler();
+        } else {
+            port.postMessage({ state: 'CONTENT_TWITTER_LOGIN' })
+        }
+    })
+}
+
+/**
+ * 设置发布内容
+ * @param content
+ * @private
+ */
+function _setPublishContent (content) {
+    setTimeout(() => {
+        document.execCommand("insertText", false, content);
+    });
+}
+
+/**
+ * 创建deNet按钮 添加到页面
+ * @returns {{deBtn2: HTMLDivElement, deBtn1: HTMLDivElement, deBtn: HTMLSpanElement}}
+ * @private
+ */
+function _createBtnDom (port) {
+    let deBtn = document.createElement('span');
+    const shadowRoot = deBtn.attachShadow({mode: 'closed'})
+    const shadowDiv = document.createElement('div');
+    shadowDiv.innerText = 'DeNet';
+    shadowDiv.id = 'de-btn';
+    shadowDiv.style.cssText = 'width:220px;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:15px;font-weight:700;border-radius:100px;cursor: pointer;';
+    shadowRoot.appendChild(shadowDiv);
+    
+    const deBtn1 = document.createElement('div');
+    const smallDeBtnStyle = 'width:30px;height: 30px;text-align:center;line-height:30px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:12px;font-weight:500;border-radius:4px;cursor: pointer;';
+    deBtn1.innerText = 'De';
+    deBtn1.id = 'de-btn1';
+    deBtn1.style.cssText = smallDeBtnStyle;
+    
+    const deBtn2 = document.createElement('div');
+    deBtn2.innerText = 'De';
+    deBtn2.id = 'de-btn2';
+    deBtn2.style.cssText = smallDeBtnStyle;
+    
+    deBtn.addEventListener('click', () => {
+        _deNetBtnClick(port);
+    })
+    deBtn1.addEventListener('click', () => {
+        _deNetBtnClick(port);
+    })
+    deBtn2.addEventListener('click', () => {
+        _deNetBtnClick(port);
+    })
+    
+    return {
+        deBtn,
+        deBtn1,
+        deBtn2
+    }
+}
+
+/* setInterval(() => {
+	let toolBar = document.querySelector('div[data-testid="toolBar"]');
+	let innerDeIcon = document.getElementById('de-icon');
+	if (toolBar && !innerDeIcon) {
+		// let dialogScheduleBtn = _getScheduleDom(false);
+		// _addDeNetEditBtn(dialogScheduleBtn, deBtn1);
+	}
+}, 800) */

src/manifest.development.json

@@ -20,6 +20,10 @@
             ]
         }
     ],
+    "permissions":[
+        "tabs",
+        "storage"
+    ],
     "options_page": "options.html",
     "web_accessible_resources": [
         {

src/server/twitter.js

@@ -0,0 +1,58 @@
+// twitter专用api
+// import axios from 'axios'
+
+let base_url = 'http://192.168.80.44:8080/denet'
+
+export function getTtwitterRequestToken() {
+    return new Promise(function (resolve, reject) {
+        let _url = `${base_url}/user/twitterRequestToken`
+        fetch(_url, {
+            method: 'POST', // or 'PUT'
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "baseInfo": {},
+                "params": {
+                    "oauthCallback": "oob"
+                }
+            }),
+        })
+            .then(response => response.json())
+            .then(data => {
+                resolve(data);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+
+    })
+}
+
+export function twitterLogin(oauthToken, oauthVerifier) {
+    return new Promise(function (resolve, reject) {
+        let _url = `${base_url}/user/twitterLogin`
+        fetch(_url, {
+            method: 'POST', // or 'PUT'
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "baseInfo": {},
+                "params": {
+                    "oauthToken": oauthToken,
+                    "oauthVerifier": oauthVerifier
+                }
+            }),
+        })
+            .then(response => response.json())
+            .then(data => {
+                resolve(data);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+
+    })
+}
+

src/uilts/chromeExtension.js

@@ -0,0 +1,15 @@
+export function setChromeStorage(params) {
+    chrome.storage.local.set(params)
+}
+
+export function getChromeStorage(key = '',callback) {
+    let params = {}
+    params[key] = ''
+    chrome.storage.local.get(params, (item) => {
+        if (item[key]) {
+            callback(JSON.parse(item[key]))
+        }else{
+            callback(null)
+        }
+    });
+}

yarn.lock

@@ -2091,6 +2091,12 @@ aws4@^1.8.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
+axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.npmmirror.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
+  dependencies:
+    follow-redirects "^1.14.8"
 
 babel-loader@^8.2.2:
   version "8.2.3"
@@ -3595,7 +3601,7 @@ flatted@^3.1.0:
   resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.8:
   version "1.14.9"
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==