从Chrome扩展程序插入CSS [英] Insert CSS from Chrome Extension

问题描述

我正在开发一个chrome扩展程序，该扩展程序允许用户更改页面的CSS.我尝试在chrome.tabs api中使用insertCSS方法，并且只是尝试将样式标签附加到HTML，但是我没有成功.谁能告诉我insertCSS方法是如何工作的，或者如何从扩展名为.js的文件访问网页?

I'm working on a chrome extension that allows the user to change the CSS of a page. I've attempted using the insertCSS method in the chrome.tabs api, and simply trying to append a style tag to the HTML, but i have not been successful. Can anyone tell me how either the insertCSS method works, or how to reach the web page from a .js file in the extension?

推荐答案

注入代码很简单

chrome.tabs.insertCSS(tabId, {
 file : "mystyle.css"
});

确保清单中列出了mystyle.css

Make sure that mystyle.css is whiletlisted in the manifest

 "web_accessible_resources": [
    "mystyle.css"
  ],

使用Chrome Devtools检查注入是否成功.我有一个问题，我以为没有注入我的CSS.经调查，确实如此，但我的选择器不正确.我最终在许多样式中都添加了！important.

Use Chrome Devtools to check if the injection succeeded. I had a problem where I thought my CSS wasn't being injected. On investigating, it was, but my selectors were incorrect. I ended up adding !important to many of the styles.

这篇关于从Chrome扩展程序插入CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！