Extensions

Enable Solana Blinks on Twitter with Wallet Support for Phantom, Backpack, and SolFlare

---

BARK | Blinks transforms the way you interact with the Solana ecosystem. This Chrome extension detects Action-compatible URLs and unfurls them into interactive buttons, allowing you to engage directly with the content.

Key Features

• Seamless Integration: Automatically detects Action-compatible URLs and converts them into user-friendly, actionable Blinks on supported websites.

• Wallet Support: Compatible with Solana wallets including Phantom, Backpack, and Solflare, ensuring secure and streamlined transactions.

• Enhanced Interactivity: Blinks provide a standardized interface for executing actions on the blockchain, making it easier than ever to participate in the Solana ecosystem.

With Blinks, engaging and interacting with web3 is as simple as sharing a link.

Implementation

---

1. Chrome Extension Setup

Manifest File (manifest.json)

{
  "manifest_version": 3,
  "name": "BARK | Blinks",
  "version": "1.0",
  "description": "Detects Action-compatible URLs and converts them into actionable Blinks.",
  "permissions": ["activeTab", "storage"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["*://*.x.com/*"],
      "js": ["content.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Background Script (background.js)

chrome.runtime.onInstalled.addListener(() => {
  console.log('BARK | Blinks extension installed');
});

Content Script (content.js)

// Content script to detect Action-compatible URLs on X and convert them into Blinks

const detectActionURLs = () => {
  const tweets = document.querySelectorAll('article div[data-testid="tweetText"]');
  tweets.forEach(tweet => {
    const links = tweet.querySelectorAll('a');
    links.forEach(link => {
      const url = link.href;
      if (isActionCompatibleURL(url)) {
        const blinkButtons = createBlinkButtons(url);
        link.parentNode.insertBefore(blinkButtons, link.nextSibling);
      }
    });
  });
};

const isActionCompatibleURL = (url) => {
  // Logic to determine if the URL is Action-compatible
  return /action-compatible/.test(url);
};

const createBlinkButtons = (url) => {
  const actions = ['Donate', 'Swap', 'Payment'];
  const container = document.createElement('div');
  container.className = 'blink-button-container';
  actions.forEach(action => {
    const button = document.createElement('button');
    button.textContent = action;
    button.className = 'blink-button';
    button.onclick = () => handleBlink(url, action);
    container.appendChild(button);
  });
  return container;
};

const handleBlink = async (url, action) => {
  console.log(`Blinking URL: ${url} with action: ${action}`);
  alert(`Blink action '${action}' initiated for URL: ${url}`);

  // Logic to interact with Solana blockchain using connected wallet
  const wallet = await connectWallet();
  if (wallet) {
    switch (action) {
      case 'Donate':
        await donate(wallet, url);
        break;
      case 'Swap':
        await swap(wallet, url);
        break;
      case 'Payment':
        await makePayment(wallet, url);
        break;
      default:
        console.log('Unknown action');
    }
  }
};

const connectWallet = async () => {
  const { useWallet } = require('@solana/wallet-adapter-react');
  const wallet = useWallet();
  if (!wallet.connected) {
    await wallet.connect();
  }
  return wallet;
};

const donate = async (wallet, url) => {
  // Logic for donating
  console.log(`Donating to: ${url} with wallet: ${wallet.name}`);
};

const swap = async (wallet, url) => {
  // Logic for swapping
  console.log(`Swapping via: ${url} with wallet: ${wallet.name}`);
};

const makePayment = async (wallet, url) => {
  // Logic for making a payment
  console.log(`Making payment to: ${url} with wallet: ${wallet.name}`);
};

// Observe changes to detect new tweets loaded dynamically
const observer = new MutationObserver(detectActionURLs);
observer.observe(document.body, { childList: true, subtree: true });

// Initial detection
detectActionURLs();

Styles (styles.css)

.blink-button-container {
  display: flex;
  gap: 5px;
}

.blink-button {
  background-color: #1da1f2;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

.blink-button:hover {
  background-color: #0d8ddc;
}

2. Wallet Integration

Integrate wallet support using libraries provided by the respective wallet providers (Phantom, Backpack, and Solflare).

Install Wallet Libraries

npm install @solana/wallet-adapter-react @solana/wallet-adapter-wallets
npm install @solana/wallet-adapter-phantom @solana/wallet-adapter-backpack @solana/wallet-adapter-solflare

Wallet Integration Logic

import { useWallet, WalletProvider } from '@solana/wallet-adapter-react';
import { PhantomWalletAdapter } from '@solana/wallet-adapter-phantom';
import { BackpackWalletAdapter } from '@solana/wallet-adapter-backpack';
import { SolflareWalletAdapter } from '@solana/wallet-adapter-solflare';
import { ConnectionProvider } from '@solana/wallet-adapter-react';

const wallets = [
  new PhantomWalletAdapter(),
  new BackpackWalletAdapter(),
  new SolflareWalletAdapter()
];

const App = () => (
  <ConnectionProvider endpoint="https://api.mainnet-beta.solana.com">
    <WalletProvider wallets={wallets} autoConnect>
      <YourComponent />
    </WalletProvider>
  </ConnectionProvider>
);

const YourComponent = () => {
  const { wallet, connect, disconnect } = useWallet();

  const handleBlink = async (url, action) => {
    if (!wallet.connected) {
      await connect();
    }

    // Handle the transaction logic with the connected wallet
    console.log(`Blinking URL: ${url} with action: ${action} using wallet: ${wallet.name}`);
    switch (action) {
      case 'Donate':
        await donate(wallet, url);
        break;
      case 'Swap':
        await swap(wallet, url);
        break;
      case 'Payment':
        await makePayment(wallet, url);
        break;
      default:
        console.log('Unknown action');
    }
  };

  return (
    <div>
      {/* BARK Blink Button Logic */}
    </div>
  );
};

3. Improvements

1. Enhanced URL Detection:

   • Implement more sophisticated logic to detect a broader range of Action-compatible URLs.

   • Example:

     const isActionCompatibleURL = (url) => {
       // Logic to determine if the URL is Action-compatible
       return /action-compatible/.test(url);
     };

2. User-Friendly Notifications:

   • Provide feedback to users when a Blink action is performed.

   • Example:

     const handleBlink = (url, action) => {
       // Logic to interact with Solana blockchain using connected wallet
       console.log(`Blinking URL: ${url} with action: ${action}`);
       alert(`Blink action '${action}' initiated for URL: ${url}`);
     };

3. Customization Options:

   • Allow users to customize Blink button appearance and behavior.

   • Example:

     // Fetch user preferences from storage
     chrome.storage.sync.get(['buttonColor', 'buttonText'], (prefs) => {
       button.style.backgroundColor = prefs.buttonColor || '#1da1f2';
       button.textContent = prefs.buttonText || 'Blink';
     });

4. Improved Wallet Integration:

   • Ensure seamless connection and transaction handling with supported wallets.

   • Example:

     const handleBlink = async (url, action) => {
       if (!wallet.connected) {
         await connect();
       }
     
       // Perform transaction logic
       console.log(`Blinking URL: ${url} with action: ${action} using wallet: ${wallet.name}`);
     };

5. Analytics and Reporting:

   • Track Blink actions for user insights and improvement.

   • Example:

     const trackBlinkAction = (url, action) => {
       fetch('https://analytics.example.com/track', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ url, action, timestamp: Date.now() })
       });
     };
     
     const handleBlink = (url, action) => {
       console.log(`Blinking URL: ${url} with action: ${action}`);
       trackBlinkAction(url, action);
       alert(`Blink action '${action}' initiated for URL: ${url}`);
     };

Conclusion

With these improvements, BARK | Blinks transforms the interaction with the Solana ecosystem by detecting Action-compatible URLs on X (Formerly Twitter) and converting them

into interactive buttons. The extension supports major Solana wallets such as Phantom, Backpack, and Solflare, ensuring secure and streamlined transactions. Enhanced detection, user-friendly notifications, customization options, improved wallet integration, and analytics tracking make engaging with web3 as simple as sharing a link.