ParseCard.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546
  1. import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'
  2. import ToolBox from '@/view/content/tool-box/index.vue'
  3. import { createApp } from 'vue'
  4. // 解析卡片类
  5. // 1.dom匹配
  6. // 2.找出网页匹配 获取twitterid
  7. // 3.获取短链接postid
  8. // 4.渲染iframe twitterid
  9. // 5.获取红包状态页面
  10. // 6.查询twitterid状态
  11. // 7.绑定twitterid
  12. class ParseCard {
  13. constructor() {
  14. }
  15. parseFaceBookCard() {
  16. let de_net_card = []
  17. let arr_article = document.querySelectorAll('div[role="article"]') || []
  18. let _html
  19. for (let i in arr_article) {
  20. _html = arr_article[i].innerHTML || ''
  21. if (_html.includes('denetme.net') && !this.isHasIframeByFacebook(arr_article[i])) {
  22. de_net_card.push({
  23. time: new Date().getTime(),
  24. dom: arr_article[i]
  25. })
  26. }
  27. }
  28. return de_net_card
  29. }
  30. // 兼容mask
  31. compatibleMask(article) {
  32. let has_denet = false
  33. try {
  34. let arr_span = article.querySelectorAll('span') || []
  35. let arr_shadow = []
  36. arr_span.forEach((item) => {
  37. if (item.shadowRoot) {
  38. arr_shadow.push(item.shadowRoot)
  39. }
  40. })
  41. let item
  42. for (let i in arr_shadow) {
  43. item = arr_shadow[i].childNodes
  44. if (has_denet) {
  45. break
  46. }
  47. if (item) {
  48. for (let j in item) {
  49. if (item[j].innerText && (item[j].innerText.includes('#DeNet') || item[j].innerText.includes('#DNFT'))) {
  50. has_denet = true
  51. break
  52. }
  53. }
  54. }
  55. }
  56. } catch (error) {
  57. }
  58. // 是否有#DeNet
  59. return has_denet
  60. }
  61. parseAllDeNetCard() {
  62. let de_net_card = []
  63. try {
  64. let arr_article = document.querySelectorAll('article') || []
  65. let _txt
  66. for (let i in arr_article) {
  67. _txt = arr_article[i].innerText || ''
  68. if ((_txt.includes('#DeNet') || _txt.includes('#DNFT') || this.compatibleMask(arr_article[i])) && !this.isHasIframeByArticle(arr_article[i])) {
  69. de_net_card.push({
  70. time: new Date().getTime(),
  71. dom: arr_article[i]
  72. })
  73. }
  74. }
  75. } catch (error) {
  76. }
  77. return de_net_card
  78. }
  79. parseCardParmas(dom_card) {
  80. let tweet_Id = ''
  81. let short_url = ''
  82. let a_arr = dom_card.querySelectorAll('a') || []
  83. a_arr = Array.from(a_arr).reverse()
  84. for (let i in a_arr) {
  85. // 获取推特id
  86. if (a_arr[i].href && a_arr[i].href.indexOf('/status/') > 0 && !tweet_Id) {
  87. tweet_Id = a_arr[i].href.split('/status/')[1] || ''
  88. tweet_Id = tweet_Id.split('/')[0]
  89. }
  90. if (a_arr[i].href && a_arr[i].href.includes('https://t.co') && !short_url) {
  91. short_url = a_arr[i].href
  92. }
  93. if (tweet_Id && short_url) {
  94. break
  95. }
  96. }
  97. return { tweet_Id, short_url, dom_card }
  98. }
  99. parseFaceBookParmas(dom_card) {
  100. let tweet_Id = ''
  101. let short_url = ''
  102. let tweet_author = '';
  103. let a_arr = dom_card.querySelectorAll('a[role="link"]') || []
  104. a_arr = Array.from(a_arr).reverse()
  105. for (let i in a_arr) {
  106. // 获取推特id
  107. if (a_arr[i].href.indexOf('facebook.com') > 0 && a_arr[i].href.indexOf('denetme') > 0 && a_arr[i].href.indexOf('nft') == -1) {
  108. let faceUrl = new URL(a_arr[i].href);
  109. let faceSearch = new URLSearchParams(faceUrl.search);
  110. let faceJumpUrl = decodeURIComponent(faceSearch.get('u'));
  111. if (faceJumpUrl !== 'null') {
  112. let urlArr = new URL(faceJumpUrl);
  113. let searchArr = new URLSearchParams(urlArr.search);
  114. let deUrlParams = searchArr.get('deUrlParams') || '{}';
  115. deUrlParams = JSON.parse(deUrlParams);
  116. if (!tweet_Id) {
  117. tweet_Id = deUrlParams.tweetId;
  118. }
  119. if (!short_url) {
  120. short_url = faceJumpUrl
  121. }
  122. if (!tweet_author) {
  123. tweet_author = deUrlParams.fullName;
  124. }
  125. }
  126. } else {
  127. if (a_arr[i].href.indexOf('denetme.net') > 0 && a_arr[i].href.indexOf('nft') == -1) {
  128. let urlArr = new URL(a_arr[i].href);
  129. let searchArr = new URLSearchParams(urlArr.search);
  130. let deUrlParams = searchArr.get('deUrlParams') || '{}';
  131. deUrlParams = JSON.parse(deUrlParams);
  132. if (!tweet_Id) {
  133. tweet_Id = deUrlParams.tweetId;
  134. }
  135. if (!short_url) {
  136. short_url = a_arr[i].href
  137. }
  138. if (!tweet_author) {
  139. tweet_author = deUrlParams.fullName;
  140. }
  141. }
  142. }
  143. if (tweet_Id && short_url) {
  144. break
  145. }
  146. }
  147. return { tweet_Id, short_url, dom_card, tweet_author }
  148. }
  149. hideCard() {
  150. if (dom.querySelector('iframe')) {
  151. return
  152. }
  153. }
  154. parseAllDeNetCardParmas() {
  155. let json_data = []
  156. this.parseAllDeNetCard().forEach((item) => {
  157. let _obj = this.parseCardParmas(item.dom)
  158. if (_obj.tweet_Id && _obj.short_url && _obj.dom_card) {
  159. _obj.time = item.time
  160. json_data.push(_obj)
  161. }
  162. })
  163. return json_data
  164. }
  165. parseFacebookCardParmas() {
  166. let json_data = []
  167. this.parseFaceBookCard().forEach((item) => {
  168. let _obj = this.parseFaceBookParmas(item.dom)
  169. if (_obj.short_url && _obj.dom_card) {
  170. _obj.time = item.time
  171. json_data.push(_obj)
  172. }
  173. })
  174. return json_data
  175. }
  176. // 获取短链接和渲染卡片数据
  177. async getCardParmas(card_json_data) {
  178. let sort_link_data = await getChromeStorage('cardData') || []
  179. let has_post_Id_card_data = this.getLocalHasPostIdData(sort_link_data, card_json_data)
  180. let need_net_short_url = this.filterShortUrl(sort_link_data, card_json_data)
  181. // 校验存储大小
  182. let new_item = this.checkShortUrlArraySize(sort_link_data)
  183. if (sort_link_data.length != new_item.length) {
  184. setChromeStorage({ cardData: JSON.stringify(new_item) })
  185. }
  186. return {
  187. has_post_Id_card_data,
  188. need_net_short_url
  189. }
  190. }
  191. filterShortUrl(sort_link_data, card_json_data) {
  192. let has = false
  193. let need_net_short_url = []
  194. card_json_data.forEach((card_item) => {
  195. has = false
  196. sort_link_data.forEach((local_item) => {
  197. if (card_item.short_url == local_item.short_url && local_item.post_Id) {
  198. has = true
  199. }
  200. })
  201. if (!has) {
  202. need_net_short_url.push(card_item.short_url)
  203. }
  204. })
  205. // 返回的是没有postid的
  206. return need_net_short_url
  207. }
  208. getLocalHasPostIdData(sort_link_data = [], card_json_data = []) {
  209. //
  210. let has_post_Id_card_data = []
  211. card_json_data.forEach((item) => {
  212. let filter_item = sort_link_data.filter((filter) => {
  213. return filter.short_url == item.short_url && filter.post_Id
  214. })
  215. if (filter_item.length > 0) {
  216. item.post_Id = filter_item[0].post_Id
  217. has_post_Id_card_data.push(item)
  218. }
  219. })
  220. return has_post_Id_card_data
  221. }
  222. checkShortUrlArraySize(_array) {
  223. if (new Blob(_array).size >= 1024 * 1024) {
  224. _array.splice(0, parseInt(_array.length / 2))
  225. }
  226. return _array
  227. }
  228. createToolBoxIframe({ post_Id = '', tweet_Id = '' }, if_center = false) {
  229. let _iframe = document.createElement('iframe')
  230. let _iframe_url = ''
  231. let tweet_str = ''
  232. if (tweet_Id) {
  233. tweet_str = `&tweetId=${tweet_Id}`
  234. }
  235. _iframe.id = post_Id
  236. _iframe_url = chrome.runtime.getURL('/iframe/tool-box.html') + `?page_type=${'card'}&postId=${post_Id}&tweetId=${tweet_Id}`;
  237. _iframe.allow = "camera *;microphone *"
  238. // debugger mode
  239. if (window.location.href.includes('denet_debugger')) {
  240. _iframe_url = _iframe_url + '&denet_debugger=1'
  241. }
  242. _iframe.src = _iframe_url
  243. _iframe.scrolling = 'no'
  244. _iframe.style.cssText = 'border:medium none; width:505px; height:545px; max-height:545px; filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);'
  245. return _iframe
  246. }
  247. createIframe({ post_Id = '', tweet_Id = '', tweet_author = '', page_type = '' }, if_center = false) {
  248. let _iframe = document.createElement('iframe')
  249. let _iframe_url = ''
  250. let tweet_str = ''
  251. if (tweet_Id) {
  252. tweet_str = `&tweetId=${tweet_Id}`
  253. }
  254. _iframe.id = post_Id
  255. _iframe_url = chrome.runtime.getURL('/iframe/red-packet.html') + `?postId=${post_Id}${tweet_str}&tweet_author=${tweet_author}&window_origin=${window.location.origin}&page_type=${page_type}`;
  256. // debugger mode
  257. if (window.location.href.includes('denet_debugger')) {
  258. _iframe_url = _iframe_url + '&denet_debugger=1'
  259. }
  260. _iframe.src = _iframe_url
  261. _iframe.style.cssText = 'border:medium none; width:375px; min-height:500px;'
  262. if (if_center) {
  263. _iframe.style.cssText = 'border:medium none; width:375px; min-height:500px; display:block; margin:auto;'
  264. }
  265. return _iframe
  266. }
  267. createNftIframe({ project_Id }) {
  268. let project_arr = project_Id.split('/');
  269. let projectId = project_arr[0]
  270. let _iframe = document.createElement('iframe')
  271. _iframe.id = project_Id
  272. _iframe.src = chrome.runtime.getURL('/iframe/nft-card.html') + `?projectId=${projectId}&twitterAccount=${project_arr[1]}`;
  273. _iframe.style.cssText = 'border:medium none; width:375px; min-height:300px;'
  274. return _iframe
  275. }
  276. createNftGroupIframe({ project_Id, tweet_Id }) {
  277. let _iframe = document.createElement('iframe')
  278. _iframe.id = project_Id
  279. _iframe.src = chrome.runtime.getURL('/iframe/nft-group-card.html') + `?projectId=${project_Id}&tweet_Id=${tweet_Id}`;
  280. _iframe.style.cssText = 'border:medium none; width:505px; min-height:180px;'
  281. return _iframe
  282. }
  283. isHasIframeByArticle(dom_card) {
  284. if (!dom_card || !dom_card.parentElement) {
  285. return
  286. }
  287. if (dom_card.querySelector('iframe')) {
  288. let type = 'parnet'
  289. let dom = dom_card.querySelector('div[aria-labelledby]')
  290. if (dom) {
  291. type = 'card'
  292. } else {
  293. type = 'txt'
  294. dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
  295. }
  296. if (type == 'card') {
  297. let _iframe = dom.querySelectorAll('iframe') || []
  298. if (_iframe.length == 0) {
  299. dom.style.display = 'none'
  300. }
  301. if (_iframe.length == 1) {
  302. for (let i = 0; i < dom.childNodes.length; i++) {
  303. if (dom.childNodes[i].dataset && dom.childNodes[i].dataset.testid && dom.childNodes[i].dataset.testid == 'card.wrapper') {
  304. dom.children[i].style.display = 'none'
  305. }
  306. }
  307. }
  308. if (_iframe.length > 1) {
  309. for (let i = 0; i < _iframe.length; i++) {
  310. if (i > 0) {
  311. _iframe[i].remove()
  312. }
  313. }
  314. }
  315. } else {
  316. let arr_iframe = dom.closest('article').querySelectorAll('iframe') || []
  317. if (arr_iframe.length > 1) {
  318. for (let i = 0; i < arr_iframe.length; i++) {
  319. if (i > 0) {
  320. arr_iframe[i].remove()
  321. }
  322. }
  323. }
  324. }
  325. return true
  326. }
  327. return false
  328. }
  329. isHasIframeByFacebook(dom_card) {
  330. if (!dom_card || !dom_card.parentElement) {
  331. return
  332. }
  333. let arr_iframe = dom_card.querySelectorAll('iframe') || []
  334. if (arr_iframe.length > 0) {
  335. if (arr_iframe.length > 1) {
  336. for (let i = 0; i < arr_iframe.length; i++) {
  337. if (i > 0) {
  338. arr_iframe[i].remove()
  339. }
  340. }
  341. }
  342. return true
  343. }
  344. return false
  345. }
  346. addDomView({ tweet_Id, element, parentElement, post_Id }) {
  347. const div = document.createElement('div')
  348. div.id = 'denet-' + tweet_Id
  349. div.style.cssText = `
  350. width: 505px;
  351. height: 545px;`
  352. div.dataset.tweetId = tweet_Id || ''
  353. div.dataset.postId = post_Id || ''
  354. parentElement.appendChild(div)
  355. createApp(element).mount(`#${div.id}`)
  356. }
  357. replaceDomView({ dom_card, tweet_Id, post_Id, time, short_url, page_type = '' }) {
  358. if (!dom_card || !dom_card.parentElement) {
  359. return
  360. }
  361. // class == denet-toolbox
  362. let type
  363. let dom = dom_card.querySelector('div[aria-labelledby]')
  364. if (dom) {
  365. type = 'card'
  366. for (let i = 0; i < dom.childNodes.length; i++) {
  367. if (dom.childNodes[i].dataset && dom.childNodes[i].dataset.testid && dom.childNodes[i].dataset.testid == 'card.wrapper') {
  368. dom.children[i].style.display = 'none'
  369. }
  370. }
  371. } else {
  372. type = 'txt'
  373. dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
  374. }
  375. dom.style = 'min-height:500px'
  376. if (dom) {
  377. // debugger mode
  378. if (window.location.href.includes('denet_debugger')) {
  379. let div = document.createElement('div')
  380. div.style.color = 'red'
  381. div.innerText = `
  382. tweet_Id:${tweet_Id} ,
  383. post_Id:${post_Id}
  384. 获取dom时间:${time}
  385. 短链接:${short_url}
  386. 渲染时长:${(new Date().getTime() - time) / 1000}s
  387. `
  388. dom.parentElement.appendChild(div)
  389. }
  390. // this.createIframe({ post_Id, tweet_Id, page_type })
  391. this.addDomView({ tweet_Id, post_Id, element: ToolBox, parentElement: dom })
  392. }
  393. }
  394. replaceIframeToolBox({ dom_card, tweet_Id, post_Id, time, short_url, page_type = '' }) {
  395. if (!dom_card || !dom_card.parentElement) {
  396. return
  397. }
  398. let type
  399. let dom = dom_card.querySelector('div[aria-labelledby]')
  400. if (dom) {
  401. type = 'card'
  402. for (let i = 0; i < dom.childNodes.length; i++) {
  403. if (dom.childNodes[i].dataset && dom.childNodes[i].dataset.testid && dom.childNodes[i].dataset.testid == 'card.wrapper') {
  404. dom.children[i].style.display = 'none'
  405. }
  406. }
  407. } else {
  408. type = 'txt'
  409. dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
  410. }
  411. dom.style = 'min-height:545px'
  412. if (dom) {
  413. // debugger mode
  414. if (window.location.href.includes('denet_debugger')) {
  415. let div = document.createElement('div')
  416. div.style.color = 'red'
  417. div.innerText = `
  418. tweet_Id:${tweet_Id} ,
  419. post_Id:${post_Id}
  420. 获取dom时间:${time}
  421. 短链接:${short_url}
  422. 渲染时长:${(new Date().getTime() - time) / 1000}s
  423. `
  424. dom.parentElement.appendChild(div)
  425. }
  426. dom.appendChild(this.createToolBoxIframe({ post_Id, tweet_Id, page_type }))
  427. }
  428. }
  429. replaceDOMRedPacket({ dom_card, tweet_Id, post_Id, time, short_url, page_type = '' }) {
  430. if (!dom_card || !dom_card.parentElement) {
  431. return
  432. }
  433. let type
  434. let dom = dom_card.querySelector('div[aria-labelledby]')
  435. if (dom) {
  436. type = 'card'
  437. for (let i = 0; i < dom.childNodes.length; i++) {
  438. if (dom.childNodes[i].dataset && dom.childNodes[i].dataset.testid && dom.childNodes[i].dataset.testid == 'card.wrapper') {
  439. dom.children[i].style.display = 'none'
  440. }
  441. }
  442. } else {
  443. type = 'txt'
  444. dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
  445. }
  446. dom.style = 'min-height:500px'
  447. if (dom) {
  448. // debugger mode
  449. if (window.location.href.includes('denet_debugger')) {
  450. let div = document.createElement('div')
  451. div.style.color = 'red'
  452. div.innerText = `
  453. tweet_Id:${tweet_Id} ,
  454. post_Id:${post_Id}
  455. 获取dom时间:${time}
  456. 短链接:${short_url}
  457. 渲染时长:${(new Date().getTime() - time) / 1000}s
  458. `
  459. dom.parentElement.appendChild(div)
  460. }
  461. dom.appendChild(this.createIframe({ post_Id, tweet_Id, page_type }))
  462. }
  463. }
  464. replaceNftDomRedPacket({ dom_card, tweet_Id, post_Id, time, short_url }) {
  465. if (!dom_card || !dom_card.parentElement) {
  466. return
  467. }
  468. let dom = dom_card.querySelector('div[aria-labelledby]')
  469. if (dom) {
  470. for (let i = 0; i < dom.childNodes.length; i++) {
  471. if (dom.childNodes[i].dataset && dom.childNodes[i].dataset.testid && dom.childNodes[i].dataset.testid == 'card.wrapper') {
  472. dom.children[i].style.display = 'none'
  473. }
  474. }
  475. } else {
  476. dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
  477. }
  478. dom.style = 'min-height:300px'
  479. if (dom) {
  480. let project_Id = post_Id.replace('nft/', '');
  481. dom.appendChild(this.createNftIframe({ project_Id }))
  482. }
  483. }
  484. replaceFacebookPacket({ dom_card, tweet_Id, short_url, tweet_author }) {
  485. if (!dom_card || !dom_card.parentElement) {
  486. return
  487. }
  488. let dom = dom_card.querySelector('div[id^=jsc_c_]').parentElement
  489. dom.style = 'min-height:500px'
  490. if (dom) {
  491. for (let i = 0; i < dom.childNodes.length; i++) {
  492. if (dom.childNodes[i].dataset && dom.childNodes[i].dataset.testid && dom.childNodes[i].dataset.testid == 'card.wrapper') {
  493. dom.children[i].style.display = 'none'
  494. }
  495. }
  496. if (dom.nextElementSibling && dom.nextElementSibling.id && dom.nextElementSibling.id.indexOf('jsc_c_') >= 0) {
  497. dom.nextElementSibling.style.display = 'none'
  498. }
  499. let originUrl = new URL(short_url);
  500. let post_Id = originUrl.pathname.slice(1);
  501. if (post_Id.indexOf('luckdraw/') >= 0) {
  502. post_Id = post_Id.replace('luckdraw/', '');
  503. dom.appendChild(this.createIframe({ post_Id, tweet_author, page_type: '抽奖' }, true))
  504. } else {
  505. dom.appendChild(this.createIframe({ post_Id, tweet_author }, true))
  506. }
  507. }
  508. }
  509. replaceNftGroupDomRedPacket({ dom_card, tweet_Id, post_Id, time, short_url }) {
  510. if (!dom_card || !dom_card.parentElement) {
  511. return
  512. }
  513. let dom = dom_card.querySelector('div[aria-labelledby]')
  514. if (dom) {
  515. for (let i = 0; i < dom.childNodes.length; i++) {
  516. if (dom.childNodes[i].dataset && dom.childNodes[i].dataset.testid && dom.childNodes[i].dataset.testid == 'card.wrapper') {
  517. dom.children[i].style.display = 'none'
  518. }
  519. }
  520. } else {
  521. dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
  522. }
  523. dom.style = 'min-height:180px'
  524. if (dom) {
  525. let project_Id = post_Id.replace('nft_group/', '');
  526. dom.appendChild(this.createNftGroupIframe({ project_Id, tweet_Id }))
  527. }
  528. }
  529. }
  530. export default new ParseCard()