Chrome扩展自定义拦截页面CSS渲染异常问题求助

我是Chrome扩展开发新手，正在开发一款可添加低效网站黑名单并拦截对应页面的扩展。尝试在被拦截网站加载自定义页面，但样式无法正常渲染——设置了.\_404类的字体大小为220px且期望文本居中，实际效果却不符合预期。

我的代码 #

Content.js #

const generateSTYLES = () => {
  return `<style>@import url(https://fonts.googleapis.com/css?family=opensans:500);
  body {
    background: #4ADEDE;
    color: #fff;
    font-family: "Open Sans", sans-serif;
    max-height: 700px;
  .study {
    font-size: 120px;
    border: 5px solid #FFFF00;
    display: flex;
    justify-content: center;
  }
  ._404 {
  font-size: 220px;
  position: relative;
  display: inline-block;
  z-index: 2;
  height: 250px;
  letter-spacing: 15px;
    `
};

const generateHTML = (pageName) => {
  return `
  <div class='_404'>404</div>
  <p>STUDYING > ${pageName}</p>
   `;
};

switch (window.location.hostname) {
  case "www.facebook.com":
    document.head.innerHTML = generateSTYLES();
    document.body.innerHTML = generateHTML("FACEBOOK");
    break;
  case "www.netflix.com":
    document.head.innerHTML = generateSTYLES();
    document.body.innerHTML = generateHTML("NETFLIX");
    break;
}

manifest.json #

{
  "manifest_version": 2,
  "name": "Clock Hacks",
  "version": "0.0.1",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["Content.js"]
    }
  ],
  "icons": { "48": "icon48.png", "128": "icon128.png" },
  "browser_action": {
    "default_popup": "Popup.html",
    "default_title": "Website Blocker"
  }
}

你的代码存在几个关键问题，导致样式失效：

1. CSS语法错误：generateSTYLES返回的样式代码有多处大括号未闭合：

   • body的样式块没有闭合}
   • ._404的样式块没有闭合}
   • 最外层的<style>标签也没有闭合</style>

2. 缺乏居中布局：当前HTML结构没有让内容居中的容器，需要添加布局容器并设置居中样式。

修改后的代码如下：

修正后的Content.js #

const generateSTYLES = () => {
  return `<style>
@import url(https://fonts.googleapis.com/css?family=opensans:500);
body {
  background: #4ADEDE;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.study {
  font-size: 120px;
  border: 5px solid #FFFF00;
  display: flex;
  justify-content: center;
}
._404 {
  font-size: 220px;
  position: relative;
  display: inline-block;
  z-index: 2;
  height: 250px;
  letter-spacing: 15px;
  margin-bottom: 20px;
}
p {
  font-size: 30px;
  margin: 0;
}
</style>`;
};

const generateHTML = (pageName) => {
  return `
<div class='_404'>404</div>
<p>学习优先 > ${pageName}</p>
`;
};

switch (window.location.hostname) {
  case "www.facebook.com":
    document.head.innerHTML = generateSTYLES();
    document.body.innerHTML = generateHTML("FACEBOOK");
    break;
  case "www.netflix.com":
    document.head.innerHTML = generateSTYLES();
    document.body.innerHTML = generateHTML("NETFLIX");
    break;
}

关键修改点说明 #

• 补全了所有CSS块的闭合大括号和<style>标签的闭合
• 给body添加了display: flex、align-items: center、justify-content: center，让页面内容垂直水平居中
• 移除了body的max-height，改用min-height: 100vh确保占满视口高度
• 给._404添加了margin-bottom，优化和下方文本的间距
• 给<p>标签设置了字体大小，提升可读性

另外，建议在manifest.json的content_scripts里缩小匹配范围，只针对需要拦截的网站，避免不必要的执行：

"content_scripts": [
  {
    "matches": ["*://www.facebook.com/*", "*://www.netflix.com/*"],
    "js": ["Content.js"]
  }
]

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