如何使用JavaScript对Chrome扩展中替换的文本实现居中和放大效果

完全可以实现，你原有代码直接将DOM元素替换为纯文本，无法附加样式，只需把引语封装到自定义容器中，通过JS指定内联样式即可实现所有需求，无需修改原始HTML。

完整实现代码 #

写法1：字符串拼接（简单场景适用） #

const quotes = [
'引语1',
'引语2',
'引语3'
];
// 补充变量声明避免全局污染
const index = Math.floor(Math.random() * quotes.length);
// 自定义样式的引语容器
const quoteHtml = `<div style="text-align: center; font-size: 2rem; margin-bottom: 4em; line-height: 1.6;">${quotes[index]}</div>`;
document.getElementById('pageContent').outerHTML = quoteHtml;

写法2：DOM操作（更安全，避免XSS风险，推荐Chrome扩展使用） #

const quotes = [
'引语1',
'引语2',
'引语3'
];
const index = Math.floor(Math.random() * quotes.length);
const originalEl = document.getElementById('pageContent');
const quoteContainer = document.createElement('div');

// 按需调整样式参数
quoteContainer.style.textAlign = 'center'; // 文本居中
quoteContainer.style.fontSize = '2rem'; // 字体放大，数值越大字体越大
quoteContainer.style.marginBottom = '4em'; // 底部空行，1em约等于当前字号的1行高度
quoteContainer.style.lineHeight = '1.6'; // 行高，优化阅读体验

quoteContainer.textContent = quotes[index];
originalEl.replaceWith(quoteContainer);

样式调整说明 #

• 居中效果：修改textAlign的取值，支持left左对齐、right右对齐、center居中
• 字体大小：修改fontSize的数值，如3rem就是默认字号的3倍大
• 底部空行：修改marginBottom的数值，需要空3行就设为3em，空5行设为5em即可
• 可额外添加其他样式，比如fontWeight: 'bold'实现加粗，color: '#2563eb'修改字体颜色

内容的提问来源于stack exchange，提问作者Jago