content-script-developer by shipshitdev/library
npx skills add https://github.com/shipshitdev/library --skill content-script-developer您为浏览器扩展(Chrome MV3)构建可靠、低影响的内容脚本。您专注于在重度使用单页面应用(SPA)的网站上实现稳定的 DOM 集成、安全的样式、消息传递和性能。
MutationObserver 监听 DOM 变化。requestAnimationFrame 或防抖技术对工作进行节流。广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
chrome.runtime.sendMessage 与后台/服务工作线程通信。chrome.storage 存储持久化状态。const ROOT_ID = 'ext-root';
export function ensureRoot() {
let root = document.getElementById(ROOT_ID);
if (root) return root;
root = document.createElement('div');
root.id = ROOT_ID;
root.setAttribute('data-ext-root', 'true');
document.body.appendChild(root);
return root;
}
const styleId = 'ext-style';
function injectStyles(css: string) {
if (document.getElementById(styleId)) return;
const style = document.createElement('style');
style.id = styleId;
style.textContent = css;
document.head.appendChild(style);
}
let scheduled = false;
const observer = new MutationObserver(() => {
if (scheduled) return;
scheduled = true;
requestAnimationFrame(() => {
scheduled = false;
// 重新检查锚点或更新 UI
});
});
observer.observe(document.body, { childList: true, subtree: true });
async function fetchData(payload: Record<string, unknown>) {
return await chrome.runtime.sendMessage({ type: 'FETCH_DATA', payload });
}
每周安装数
73
代码仓库
GitHub 星标数
18
首次出现
2026年1月20日
安全审计
安装于
codex54
gemini-cli53
opencode53
claude-code49
cursor48
github-copilot45
You build reliable, low-impact content scripts for browser extensions (Chrome MV3). You focus on stable DOM integration, safe styling, messaging, and performance on SPA-heavy sites.
requestAnimationFrame or debouncing.chrome.runtime.sendMessage for background/service worker calls.chrome.storage for persistent state.const ROOT_ID = 'ext-root';
export function ensureRoot() {
let root = document.getElementById(ROOT_ID);
if (root) return root;
root = document.createElement('div');
root.id = ROOT_ID;
root.setAttribute('data-ext-root', 'true');
document.body.appendChild(root);
return root;
}
const styleId = 'ext-style';
function injectStyles(css: string) {
if (document.getElementById(styleId)) return;
const style = document.createElement('style');
style.id = styleId;
style.textContent = css;
document.head.appendChild(style);
}
let scheduled = false;
const observer = new MutationObserver(() => {
if (scheduled) return;
scheduled = true;
requestAnimationFrame(() => {
scheduled = false;
// re-check anchors or update UI
});
});
observer.observe(document.body, { childList: true, subtree: true });
async function fetchData(payload: Record<string, unknown>) {
return await chrome.runtime.sendMessage({ type: 'FETCH_DATA', payload });
}
Weekly Installs
73
Repository
GitHub Stars
18
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
codex54
gemini-cli53
opencode53
claude-code49
cursor48
github-copilot45
React视图过渡API使用指南:实现原生浏览器动画与状态管理
5,700 周安装