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-solflareWallet 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
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); };
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}`); };
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'; });
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}`); };
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.
Last updated