Hey all. Anyone know how to inject styles as a .css file to some webpage?
im rewriting some extension since we are going to mv3, also i decieded to use Plasmo framework for this, all cool i like it so far but im not sure where to put my files so they get bundled in final code. I have this .css file that im trying to inject when website loads.
const insertCSSRule = async (request, sender) => {
return chrome.scripting.insertCSS({
target: { tabId: sender.tab.id },
files: [
../rules/website.css],
}). catch(console.error);
}
and but this gets me
Error: Could not load file: '../rules/website.css'.
i also tried ./rules/website.css, rules/website.css ./website.css, website.css while file is in rules folder or in assets, i even tried moving entire rules in assets but nothing seems to work.2 Replies
Do you possibly need to add
web_accessible_resources to your manifest?
I beleive that when you import static assets from ./assets plasmo does this for you. Since you're not importing the asset VIA something like import websiteCSS from 'url:~assets/website.css; it's not getting added to the manifest.
I think if you add the import like that it will get you the fully qualified URL and add the files to the web_accessible_resources.
I did this all within a CSUI file which had the PlasmoCSConfig with the matches property
Best thing to do is to dig into the build folder output. Do you see the file you expect? Is it in the manifest? If not then thats the first problem.yea it was something with paths, i moved to tilda instead of dot one and it worked, i also did bunch of things with matches