Agent skill
chrome-extension
Build Chrome Extensions with Manifest V3, background service workers, content scripts, and message passing. Use when developing TikTok Uploader extension or any browser extensions.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/chrome-extension
SKILL.md
đ Chrome Extension Skill
Use Cases
- TikTok auto-uploader
- Web automation tools
- Content modification
- Data extraction
Manifest V3 Structure
{
"manifest_version": 3,
"name": "Extension Name",
"version": "1.0.0",
"permissions": ["activeTab", "storage", "tabs"],
"host_permissions": ["https://*.tiktok.com/*"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [{
"matches": ["https://*.tiktok.com/*"],
"js": ["content.js"]
}],
"action": {
"default_popup": "popup.html"
},
"side_panel": {
"default_path": "sidepanel.html"
}
}
Message Passing
Content â Background
// content.js
chrome.runtime.sendMessage({ type: 'UPLOAD_COMPLETE', data: result });
// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === 'UPLOAD_COMPLETE') {
console.log('Upload done:', message.data);
sendResponse({ success: true });
}
return true; // Keep channel open for async
});
Background â Content
// background.js
chrome.tabs.sendMessage(tabId, { type: 'START_UPLOAD', file: fileData });
// content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === 'START_UPLOAD') {
handleUpload(message.file);
}
});
Storage Patterns
Local Storage
// Save
await chrome.storage.local.set({ uploadQueue: files });
// Load
const { uploadQueue } = await chrome.storage.local.get('uploadQueue');
// Listen for changes
chrome.storage.onChanged.addListener((changes, area) => {
if (area === 'local' && changes.uploadQueue) {
console.log('Queue updated:', changes.uploadQueue.newValue);
}
});
Side Panel
Enable in manifest
"side_panel": {
"default_path": "sidepanel.html"
}
Open programmatically
chrome.sidePanel.open({ windowId: window.id });
Trusted Types (CSP Fix)
// Create policy
const trustedPolicy = trustedTypes.createPolicy('my-policy', {
createHTML: (input) => input
});
// Use for innerHTML
element.innerHTML = trustedPolicy.createHTML(htmlString);
Service Worker Persistence
// Keep alive with alarm
chrome.alarms.create('keepAlive', { periodInMinutes: 1 });
chrome.alarms.onAlarm.addListener((alarm) => {
if (alarm.name === 'keepAlive') {
// Do minimal work to stay alive
}
});
Decision Tree
Extension task?
âââ Background work? â Service Worker
âââ Page modification? â Content Script
âââ User UI? â Popup or Side Panel
âââ Cross-script data? â Message passing
âââ Persist data? â chrome.storage
TikTok Uploader Patterns
1. Round-Robin Folders
async function getNextFile() {
const { folders, lastIndex } = await chrome.storage.local.get();
const nextIndex = (lastIndex + 1) % folders.length;
const folder = folders[nextIndex];
const files = await fetchFilesFromFolder(folder);
await chrome.storage.local.set({ lastIndex: nextIndex });
return files[0];
}
2. Upload Queue Management
// Add to queue
await addToQueue(file);
// Process queue
async function processQueue() {
const { queue } = await chrome.storage.local.get('queue');
if (queue.length > 0) {
const file = queue.shift();
await uploadFile(file);
await chrome.storage.local.set({ queue });
processQueue(); // Continue
}
}
Common Issues
| ā¸ā¸ąā¸ā¸Ģ⏞ | ā¸Ē⏞āšā¸Ģā¸ā¸¸ | āšā¸āšāšā¸ |
|---|---|---|
| Service worker dies | Idle timeout | Use alarms to keep alive |
| CSP error | innerHTML blocked | Use Trusted Types |
| Message not received | Channel closed | Return true in listener |
| Content script not running | Wrong match pattern | Check host_permissions |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?