load carbonads from the server side

Author: medyo

public/carbon.js

@@ -1,26 +1,22 @@
 {
   "name": "Hackertab.dev",
   "description": "The Developer’s Homepage",
-  "version": "1.12.1",
+  "version": "1.12.2",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"
   },
   "background": {
-    "scripts": [
-      "background.js"
-    ]
+    "scripts": ["background.js"]
   },
-  "permissions": [
-    "https://*.hackertab.dev/*"
-  ],
+  "permissions": ["https://*.hackertab.dev/*"],
   "icons": {
     "16": "/logos/logo16.png",
     "32": "/logos/logo32.png",
     "48": "/logos/logo48.png",
     "128": "/logos/logo128.png"
   },
-  "content_security_policy": "script-src 'self' https://*.carbonads.com https://*.buysellads.net https://*.buysellads.com https://*.servedby-buysellads.com https://*.carbonads.net; object-src 'self'",
+  "content_security_policy": "script-src 'self' object-src 'self'",
   "applications": {
     "gecko": {
       "id": "{f8793186-e9da-4332-aa1e-dc3d9f7bb04c}"

public/manifest.json

@@ -1,20 +1,64 @@
-import React, { Component } from 'react';
-import './CarbonAd.css';
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+import './CarbonAd.css'
 
-class CarbonAd extends Component {
-  componentDidMount() {
-    const carbon_wrapper = document.querySelector('.carbon-ad-wrapper')
-    const script = document.createElement('script')
-    script.src = process.env.PUBLIC_URL + '/carbon.js?serve=CESDP23I&placement=hackertabdev'
-    script.async = true
-    script.id = '_carbonads_js'
+export default function CarbonAd() {
+  const [ad, setAd] = useState()
+  const packageFile = require('../../package.json')
 
-    carbon_wrapper.appendChild(script)
-  }
+  useEffect(() => {
+    const setup = async () => {
+      const userAgent = new URLSearchParams(navigator.userAgent).toString()
+      var baseUrl = process.env.NODE_ENV === 'production' ? packageFile.proxy : ''
+      const request = await axios.get(`${baseUrl}/monetization/?useragent=${userAgent}`)
+      if (request.data) {
+        setAd(request.data.ads[0])
+      }
+    }
+    setup()
+  }, [])
 
-  render() {
-    return <div className="carbon-ad-wrapper blockRow" />
-  }
-}
+  return (
+    <div className="carbon-ad-wrapper blockRow">
+      {ad && (
+        <div id="carbonads">
+          <span>
+            <span className="carbon-wrap">
+              <a
+                href={ad.statlink}
+                className="carbon-img"
+                target="_blank"
+                rel="noopener sponsored"
+                title={ad.company + ' ' + ad.companyTagline}>
+                <img
+                  src={ad.smallImage}
+                  alt="ads via Carbon"
+                  border="0"
+                  height="100"
+                  width="130"
+                  style={{ background: ad.backgroundColor }}
+                />
+              </a>
+
+              <a
+                href={ad.statlink}
+                className="carbon-text"
+                target="_blank"
+                rel="noopener sponsored">
+                {ad.description}
+              </a>
+            </span>
 
-export default CarbonAd;
+            <a
+              href={ad.ad_via_link}
+              className="carbon-poweredby"
+              target="_blank"
+              rel="noopener sponsored">
+              ads via Carbon
+            </a>
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}