求教～ Chrome Extension 开发框架 Plasmo 的注入 UI 的 bug， tailwindcss 高度不生效

[shaun0]

PlasmoCSUI h-full 不生效

用过 plasmo 的大佬，帮看看问题～

我在页面中，想向一串 list 的尾部（一排水平的按钮），再注入一个我自己的元素（按钮），想保持和他们一样的按钮高度，但是我发现我自己的元素使用 h-full 不生效，无法充满父节点。有了解这个问题的吗？

如下图

import cssText from "data-text:~style.css"
import type { PlasmoCSConfig, PlasmoGetInlineAnchorList } from "plasmo"

export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText.replaceAll(":root", ":host")
    return style
}
export const config: PlasmoCSConfig = {
    matches: ["*://*.x.com/*", "*://*.twitter.com/*"]
}

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
    const elements = document.querySelectorAll('[role="tablist"]:last-child')
    return Array.from(elements).map((el) => ({
        element: el,
        insertPosition: "beforeend"
    }))
}

const PlasmoCSUI = () => {
    return (
        <div className="my-auto flex items-center justify-center" style={{ height: 'var(--twitter-tab-height)' }}>
            <div className="my-auto w-9 h-full flex items-center justify-center ml-1 bg-red-500">
                tag
            </div>
        </div>
    )
}

export default PlasmoCSUI

[isa]

你得确认下 tailwind 的 css 有没有被注入到页面中

[renmu]

你注入不好说会不会修改到原来的功能，手动写写得了

[nagisaushio]

去看具体的 CSS 呀，看是不是有什么优先级更高的

[molvqingtai]

有没有可能被原网页的 CSS 样式给覆盖了

[molvqingtai]

我使用的 wxt ，不过两个框架使用方式都差不多

需要防止注入的页面继承宿主页面的一些样式，比如文字大小和颜色等，特别是使用 tailwindcss,如果宿主页面的 rem 设置比较小的话，会导致你的页面整体缩小，你需要取消继承，然后呢将 rem 全部转换为 px

https://github.com/molvqingtai/WebChat/blob/e764f334d14caaafbe17fa326d3187d3105a7304/src/assets/styles/tailwind.css#L81

https://github.com/molvqingtai/WebChat/blob/master/.postcssrc

刚新鲜踩的坑，希望对你有帮助

[axina]

@molvqingtai #5 感谢兄弟，解决了我存在很久不知道怎么解决的一个问题👍👍👍

[codehz]

扩展注入的话建议还是别用这样的框架了（
不过现在不是流行注入一个 shadow dom 进去吗，样式相互隔离

[shaun0]

感谢各位。解决了，框架是用的影子 dom ，会自动生成两层 div 容器节点，我在网页检查器里找到这两个的节点 id ，然后在 style.css 中手动添加了 height: 100% 就行了。如下：
```
#plasmo-shadow-container {
height: 100%;
}

#plasmo-inline {
height: 100%;
}
```