Loading...
Loading...
Browser extension development with security and cross-browser support. Use when: - Building Chrome, Firefox, or Safari extensions - Requesting permissions in manifest - Implementing content scripts or background workers - Handling cross-browser compatibility - Planning extension updates Keywords: browser extension, Manifest V3, content script, background script, permissions, Chrome extension, Firefox addon, WebExtensions API
npx skill4agent add phrazzld/claude-config browser-extension-dev{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0",
"permissions": ["storage"],
"host_permissions": ["https://api.example.com/*"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [{
"matches": ["https://*.example.com/*"],
"js": ["content.js"]
}],
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'none'"
}
}| Permission | Use Case |
|---|---|
| Save user preferences |
| Access current tab on user action |
| Inject scripts programmatically |
| Access specific API |
<all_urls>chrome.permissions.request({
origins: ['https://optional.com/*']
}, (granted) => {
if (granted) enableFeature();
});// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
// Validate sender
if (!sender.tab) return;
// Validate message structure
if (message.type !== 'FETCH_DATA') return;
if (typeof message.url !== 'string') return;
// Process safely
fetchData(message.url).then(sendResponse);
return true; // async response
});// Use webextension-polyfill for API normalization
import browser from 'webextension-polyfill';
// Feature detection
if (browser.storage?.sync) {
await browser.storage.sync.set({ key: value });
} else {
await browser.storage.local.set({ key: value });
}<all_urls>eval()