Merge pull request #4221 from brave/pr4215_twitter-inline_1.2.x

Fixes inline tip for twitter (uplift to 1.2.x)

Author: bsclifton

components/brave_rewards/resources/extension/brave_rewards/background.ts

@@ -99,6 +99,29 @@ const tipRedditMedia = (mediaMetaData: RewardsTip.MediaMetaData) => {
   })
 }
 
+const makeTwitterRequest = (url: string, credentialHeaders: {}, sendResponse: any) => {
+  fetch(url, {
+    credentials: 'include',
+    headers: {
+      ...credentialHeaders
+    },
+    referrerPolicy: 'no-referrer-when-downgrade',
+    method: 'GET',
+    redirect: 'follow'
+  })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`Twitter API request failed: ${response.statusText} (${response.status})`)
+      }
+
+      return response.json()
+    })
+    .then(data => sendResponse(data))
+    .catch(error => {
+      sendResponse(error)
+    })
+}
+
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
   const action = typeof msg === 'string' ? msg : msg.type
   switch (action) {
@@ -132,6 +155,18 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
       // Must return true for asynchronous calls to sendResponse
       return true
     }
+    case 'twitterGetTweetDetails': {
+      const url = new URL('https://api.twitter.com/1.1/statuses/show.json')
+      url.searchParams.append('id', msg.tweetId)
+      makeTwitterRequest(url.toString(), msg.credentialHeaders, sendResponse)
+      return true
+    }
+    case 'twitterGetUserDetails': {
+      const url = new URL('https://api.twitter.com/1.1/users/show.json')
+      url.searchParams.append('screen_name', msg.screenName)
+      makeTwitterRequest(url.toString(), msg.credentialHeaders, sendResponse)
+      return true
+    }
     default:
       return false
   }

components/brave_rewards/resources/extension/brave_rewards/content_scripts/twitter.ts

@@ -5,6 +5,20 @@
 // Utils
 import { getMessage } from '../background/api/locale_api'
 
+interface TweetResonse {
+  text: string,
+  user: {
+    name: string,
+    screen_name: string,
+    id_str: string
+  },
+  created_at: string
+}
+
+interface UserResonse {
+  id_str: string
+}
+
 let timeout: any = null
 let newTwitter = true
 
@@ -13,37 +27,32 @@ const getTwitterAPICredentials = () => {
   return new Promise(resolve => chrome.runtime.sendMessage(msg, resolve))
 }
 
-const makeTwitterRequest = async (url: string) => {
+const getTweetDetails = async (tweetId: string) => {
   const credentialHeaders = await getTwitterAPICredentials()
   if (Object.keys(credentialHeaders).length === 0) {
     throw new Error(`Unable to make Twitter API request: no credential headers`)
   }
-  const response = await fetch(url, {
-    credentials: 'include',
-    headers: {
-      ...credentialHeaders
-    },
-    referrerPolicy: 'no-referrer-when-downgrade',
-    method: 'GET',
-    mode: 'cors',
-    redirect: 'follow'
-  })
-  if (!response.ok) {
-    throw new Error(`Twitter API request failed: ${response.statusText} (${response.status})`)
-  }
-  return response.json()
-}
 
-const getTweetDetails = async (tweetId: string) => {
-  const url = new URL('https://api.twitter.com/1.1/statuses/show.json')
-  url.searchParams.append('id', tweetId)
-  return makeTwitterRequest(url.toString())
+  const msg = {
+    type: 'twitterGetTweetDetails',
+    tweetId,
+    credentialHeaders
+  }
+  return new Promise(resolve => chrome.runtime.sendMessage(msg, resolve))
 }
 
 const getUserDetails = async (screenName: string) => {
-  const url = new URL('https://api.twitter.com/1.1/users/show.json')
-  url.searchParams.append('screen_name', screenName)
-  return makeTwitterRequest(url.toString())
+  const credentialHeaders = await getTwitterAPICredentials()
+  if (Object.keys(credentialHeaders).length === 0) {
+    throw new Error(`Unable to make Twitter API request: no credential headers`)
+  }
+
+  const msg = {
+    type: 'twitterGetUserDetails',
+    screenName,
+    credentialHeaders
+  }
+  return new Promise(resolve => chrome.runtime.sendMessage(msg, resolve))
 }
 
 function getTweetId (tweet: Element) {
@@ -67,7 +76,7 @@ const getTweetMetaData = (tweet: Element, tweetId: string): Promise<RewardsTip.M
   }
 
   return getTweetDetails(tweetId)
-    .then(tweetDetails => {
+    .then((tweetDetails: TweetResonse) => {
       const mediaMetadata: RewardsTip.MediaMetaData = {
         mediaType: 'twitter',
         twitterName: tweetDetails.user.name,
@@ -317,7 +326,7 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
       const screenName = msg.screenName
       if (newTwitter) {
         getUserDetails(screenName)
-          .then(userDetails => {
+          .then((userDetails: UserResonse) => {
             const userId = userDetails.id_str
             const profileUrl = `https://twitter.com/intent/user?user_id=${userId}&screen_name=${screenName}`
             sendResponse({ profileUrl })

components/brave_rewards/resources/extension/brave_rewards/manifest.json

@@ -62,6 +62,6 @@
     "128": "img/bat-128.png",
     "256": "img/bat-256.png"
   },
-  "content_security_policy": "default-src 'self'; img-src 'self' chrome: data:; style-src 'self' 'unsafe-inline';font-src 'self' data:;",
+  "content_security_policy": "default-src 'self'; img-src 'self' chrome: data:; style-src 'self' 'unsafe-inline';font-src 'self' data:; connect-src https://api.twitter.com 'self';",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAmqLJHCRq1BdVqkYZuPiH3UxlEnF6ZZGq2ba8IOIuuAjGd3xFjA1yxKhuJWt17mCUonB04jG+BmxDQNj29gHhBHKwV20Zw4HNQeyXsThx6op4lfL0ypiZX727Dvcd2zn48eP+0hT/2oP3szHvsPDHrZUPwXcL6ButcJYWsO18OlIMPK4L3B/l37nOeAs2OVlSrrKFu7uiAfGj70kJYvAQdHEtCsuTsWX3ApZ6MM49XTYD5TyKvXJXHagsiDmqeAZPAgPrk32ES43deqZYWorWOCFHuRzjJUwNRJBJn59IP4DK5X1Y+Uc7VjZDk9EUft+BI8UT6M+Ok8EDaDZZI57c5QIDAQAB"
 }