首页 > web前端 > css教程 > 正文

为什么我无法使用扩展内容脚本将 CSS 注入网页?

DDD
发布: 2024-11-11 05:02:03
原创
608 人浏览过

Why Am I Unable to Inject CSS into Webpages Using Content Scripts for Extensions?

扩展内容脚本中的 CSS 注入问题

尽管在清单中定义了 CSS 注入,但您的 CSS 文件在网页中仍然不存在。以下是可能的原因和解决方案:

原因: CSS 规则冲突

样式表已注入,但由于其他样式覆盖其规则而未应用。

解决方案:

  • 增加 CSS 特异性: 在 CSS 规则中添加更多特定选择器。
  • 使用 " !important": 在每个规则后添加“!important”以覆盖现有样式。

原因: 内容脚本注入限制

清单版本 3限制内容脚本直接注入 CSS。

解决方案: 通过内容脚本注入 CSS,如下所示:

myScript.js:

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);
登录后复制

manifest.json:

"web_accessible_resources": ["myStyles.css"]
登录后复制

注意:使用 Manifest 版本 2 时,需要“web_accessible_resources”密钥才能允许访问来自非扩展页面的 CSS 文件。

以上是为什么我无法使用扩展内容脚本将 CSS 注入网页?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板