V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
firhome
V2EX  ›  程序员

有没有开发过浏览器插件的大佬,样式被覆盖有什么方案解决?

  •  
  •   firhome · 99 天前 · 1348 次点击
    这是一个创建于 99 天前的主题,其中的信息可能已经有所发展或是发生改变。
    是这样的,ui 框架用习惯了。懒得手写。 一个按钮 弹框什么的也想用 element ui 之类的框架解决。

    这样就会导致一个问题。 网页面插入一些东西的时候(content ui),如果对方网站有同样用 element ui 的话,对方如果写了全局的样式 会对我插件 ui 有影响(毕竟 append 到对方的 body 里了)。

    请问这种情况该怎么解决呢?
    15 条回复    2022-08-30 10:50:15 +08:00
    shintendo
        1
    shintendo  
       99 天前
    important 一把梭
    HikariLan
        2
    HikariLan  
       99 天前
    太真实了兄弟,我这几天写的一个浏览器插件项目也有这个问题。
    我的解决方案就很蠢蛋了:按需加载,需要用的时候 insertCSS 进去,用不着的时候直接 removeCSS (
    thinkershare
        3
    thinkershare  
       99 天前
    直接使用 frame 做隔离
    iwh718
        4
    iwh718  
       99 天前 via Android
    我都是手写 ui
    dtdths1
        5
    dtdths1  
       99 天前
    shadow
    muzuiget
        6
    muzuiget  
       99 天前
    自己解决:shadow DOM
    和框架合作解决:CSS 实验性功能 @layer
    codespots
        7
    codespots  
       99 天前
    iframe 做隔离
    DiamondYuan
        8
    DiamondYuan  
       99 天前 via iPhone
    1. shadow-dom
    2. iframe


    我建议用 shadow-dom
    kkocdko
        9
    kkocdko  
       99 天前   ❤️ 1
    shadow dom ,例如我这个在网页中插入悬浮按钮的代码片段:
    https://github.com/kkocdko/user-scripts/blob/master/scripts/snippets/snippets.js#L15-L28
    lisongeee
        10
    lisongeee  
       99 天前   ❤️ 1
    根据 css 优先级规则,你可以使用 scss 二次编译一遍 element-ui 提高你的样式的优先级权重

    ```scss
    .custom-affix {
    @import 'element-ui/lib/theme-chalk/index';
    }
    ```

    ```js
    document.body.classList.add('custom-affix')
    ```
    lisongeee
        11
    lisongeee  
       99 天前
    我发的代码你们没有高亮和缩进看起来不方便,评论 markdown 渲染及代码高亮可以用 /t/873825
    duan602728596
        12
    duan602728596  
       99 天前
    可以修改 class 的前缀啊
    beastk
        13
    beastk  
       98 天前 via iPhone
    important 或者 hook
    firhome
        14
    firhome  
    OP
       98 天前
    @kkocdko
    @DiamondYuan
    @muzuiget

    感谢大佬们的回复,决定采用 shadow dom 的方式,
    但是现在又有个小问题。 我的 vue 组件插入到对方 body 上后,发现样式(<style>)标签还在对方的 head 里,这样导致样式不生效了,如果能让<style>到我的 shadow dom 里呢
    zhuweiyou
        15
    zhuweiyou  
       98 天前
    @firhome

    shadow.appendChild(style)
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1983 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 16:58 · PVG 00:58 · LAX 08:58 · JFK 11:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.