Extensibility script solution

src/commands/Dashboard.ts

@@ -238,7 +238,7 @@ export class Dashboard {
       } 'self' 'unsafe-inline' https://*`,
       `script-src ${
         isProd ? `'nonce-${nonce}'` : `http://${localServerUrl} http://0.0.0.0:${localPort}`
-      } 'unsafe-eval'`,
+      } https://* 'unsafe-eval'`,
       `style-src ${webView.cspSource} 'self' 'unsafe-inline'`,
       `font-src ${webView.cspSource}`,
       `connect-src https://o1022172.ingest.sentry.io ${
@@ -267,6 +267,9 @@ export class Dashboard {
 
         <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`dashboard-${version.installedVersion}`}" alt="Daily usage" />
 
+        <script src="${webView.asWebviewUri(
+          Uri.parse(`/Users/eliostruyf/blog/web-eliostruyf-hugo/external.js`)
+        )}" nonce="${nonce}"></script>
         <script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
       </body>
       </html>

src/dashboardWebView/components/Contents/Item.tsx

@@ -17,6 +17,10 @@ export interface IItemProps extends Page { }
 
 const PREVIEW_IMAGE_FIELD = 'fmPreviewImage';
 
+declare const fmExternal: {
+  getCardHtml: (filePath: string, data: any) => string | undefined;
+};
+
 export const Item: React.FunctionComponent<IItemProps> = ({
   fmFilePath,
   date,
@@ -77,12 +81,21 @@ export const Item: React.FunctionComponent<IItemProps> = ({
   }, [settings, pageData]);
 
   useEffect(() => {
-    messageHandler.request<string>(DashboardMessage.getCustomHtml, {
-      path: fmFilePath,
-      data: pageData,
-    }).then((html) => {
-      setCustomHtml(html || "");
-    });
+    // messageHandler.request<string>(DashboardMessage.getCustomHtml, {
+    //   path: fmFilePath,
+    //   data: pageData,
+    // }).then((html) => {
+    //   setCustomHtml(html || "");
+    // });
+
+    if (fmExternal && fmExternal.getCardHtml) {
+      const data = fmExternal.getCardHtml(fmFilePath, pageData);
+      if (data) {
+        setCustomHtml(data);
+      } else {
+        setCustomHtml(undefined);
+      }
+    }
   }, []);
 
   if (view === DashboardViewType.Grid) {