ParseCard.js 16 KB

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