Insert CSS from Chrome Extension

问题

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?

回答1:

The injection code is simply

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

Make sure that mystyle.css is whiletlisted in the manifest

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

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.

来源：https://stackoverflow.com/questions/19783009/insert-css-from-chrome-extension