How can I contain the styles of a Chrome Extension content script?
我正在开发一个将一些 UI 反应组件注入页面的 Chrome 扩展程序。
UI 组件来自
不幸的是,一旦将
有没有办法限制
将这个作为已接受的答案发布给后人值得称赞,但如果有人发现自己处于类似的困境中,以下是对我有用的代码片段:
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// my injected code window.addEventListener(‘load’, () => { const injectDiv = document.createElement(‘div’) const shadowRoot = injectDiv.attachShadow({ mode: ‘open’ }) // note inline use of webpack raw-loader, so that the css shadowRoot.innerHTML = // just using template string |
那么,果然:
我认为你应该使用 Shadow DOM API。当您只需要将 UI 组件附加到网页时,这是一种很好的做法。
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
正如在另一篇 SO 帖子中提到的,也支持
1
2 3 4 5 6 7 |
const injectedDiv = document.createElement(‘div’);
const shadowRoot = injectedDiv.attachShadow({ mode: ‘open’ }); shadowRoot.innerHTML = `// <link rel="stylesheet" type="text/css" href="${chrome.extension.getURL("bootstrap.min.css")}"></link>// <link rel="stylesheet" type="text/css" href="${chrome.extension.getURL("whatever.css")}"></link>// `; document.body.appendChild(injectedDiv); |
注释:
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/269251.html