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

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

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

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

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


    我建议用 shadow-dom
    kkocdko
        9
    kkocdko  
       2022-08-29 19:53:28 +08:00   ❤️ 1
    shadow dom ,例如我这个在网页中插入悬浮按钮的代码片段:
    https://github.com/kkocdko/user-scripts/blob/master/scripts/snippets/snippets.js#L15-L28
    lisongeee
        10
    lisongeee  
       2022-08-29 19:54:25 +08:00   ❤️ 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  
       2022-08-29 19:58:29 +08:00
    我发的代码你们没有高亮和缩进看起来不方便,评论 markdown 渲染及代码高亮可以用 /t/873825
    duan602728596
        12
    duan602728596  
       2022-08-29 21:27:27 +08:00
    可以修改 class 的前缀啊
    beastk
        13
    beastk  
       2022-08-30 08:31:27 +08:00 via iPhone
    important 或者 hook
    firhome
        14
    firhome  
    OP
       2022-08-30 10:17:57 +08:00
    @kkocdko
    @DiamondYuan
    @muzuiget

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

    shadow.appendChild(style)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1506 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 23:53 · PVG 07:53 · LAX 16:53 · JFK 19:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.