本文详解如何使用 content script 在 firefox 扩展中安全、可靠地修改当前网页的字体大小，涵盖 manifest 配置、脚本注入逻辑、css 覆盖技巧及最佳实践。
本文详解如何使用 content script 在 firefox 扩展中安全、可靠地修改当前网页的字体大小，涵盖 manifest 配置、脚本注入逻辑、css 覆盖技巧及最佳实践。
在 Firefox 扩展开发中，直接修改网页字体大小的核心机制是通过 Content Script 注入并执行 DOM 操作或 CSS 注入——而非依赖后台脚本“主动联系”页面。后台脚本无法直接访问网页 DOM，必须借助 Content Script 在页面上下文中运行。
✅ 正确实现步骤
1. 配置 manifest.json（Firefox ≥ 109 推荐 v3 格式）
{
"manifest_version": 3,
"name": "Font Size Changer",
"version": "1.0",
"permissions": ["activeTab"],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"],
"run_at": "document_idle"
}],
"web_accessible_resources": [{
"resources": ["content.js"],
"matches": ["<all_urls>"]
}]
}</all_urls></all_urls>
⚠️ 注意：activeTab 权限足够（无需 <all_urls></all_urls> 声明），且 content_scripts 必须显式声明匹配规则；run_at: "document_idle" 确保 DOM 加载完成后再执行。
2. 编写 content.js —— 推荐 CSS 方式（更高效、可逆）
避免遍历所有 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/1191" title="LogoAi"><img
src="https://img.php.cn/upload/ai_manual/001/431/639/68b7ae1e908fd289.png" alt="LogoAi" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/1191" title="LogoAi" class="overflowclass">LogoAi</a>
<p class="overflowclass">LogoAI是一款用于生成 Logo、品牌视觉和营销素材的 AI 品牌设计平台。</p>
</div>
<a rel="nofollow" href="/ai/1191" title="LogoAi" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> <h1></h1> 等标签（如原回答所述，属低效兜底方案）。应统一覆盖根元素字体尺寸，再利用 CSS 继承生效：
// content.js
function setFontSize(px) {
const size = parseFloat(px);
if (isNaN(size) || size {
if (msg.action === "setFontSize" && msg.size) {
setFontSize(msg.size);
}
});
// 也可暴露给页面内 JS 调用（需谨慎）：
window.setFontSize = setFontSize;
3. 与用户交互（如 popup.html）
<!-- popup.html --> <input type="number" id="sizeInput" placeholder="e.g. 18" min="8" max="72"><button id="applyBtn">Apply</button> <script src="popup.js"></script>
// popup.js
document.getElementById("applyBtn").addEventListener("click", () => {
const size = document.getElementById("sizeInput").value;
browser.tabs.query({ active: true, currentWindow: true })
.then(tabs => browser.tabs.sendMessage(tabs[0].id, {
action: "setFontSize",
size
}))
.catch(console.error);
});
⚠️ 关键注意事项
-
不要依赖
document.write或eval：违反 CSP，且不安全； -
避免硬编码标签列表：
p, h1, ...方式易遗漏（如<article></article>、自定义组件内文本），CSS 继承更鲁棒； -
慎用
!important：仅当目标站点强样式冲突时启用，优先用更高特异性选择器； -
考虑可访问性：字体缩放应尊重用户系统设置（如
rem基于html字体），建议提供「重置为默认」按钮； -
跨域限制：Content Script 默认可访问所有匹配页面 DOM，无需额外权限（
activeTab已满足）。
✅ 总结
真正起作用的不是“扩展联系网页”，而是扩展将脚本注入网页进程，在其上下文中直接操作 DOM 或样式表。采用 CSS 变量 + 全局选择器的方式，比遍历节点更简洁、性能更好、易于维护。只要 manifest 正确声明 content_scripts 并匹配目标 URL，即可稳定生效。
