linking css file to chrome extension

I have found a few versions of my same question here , here, and here but when I try the suggested solutions I am still unsuccessful

I notice I am only able to apply inline css rules in my current extension. When I try bringing those rules into a separate css file I can't get the rules linked to the elements on the page. I have played around mostly with the manifest.json file assuming my problem is somewhere there. I have tried including only css, matches, and js lines of the content_scripts. I have played around with different permissions. I didn't originally have the web accessible resources section.

Here is my manifest.json file as it currently looks:

  "manifest_version": 2,
  "name": "food project",
  "version": "0.1",
  "description": "My cool extension.",
  "content_scripts": [
    {
      "css": ["./content.css"],
      "matches": ["https://www.target.com/*", "file:///*/*"],
      "js": ["./content.js"],
      "all_frames": true
    }
  ],
  "permissions": ["tabs", "*://*/*"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Demo extension",
    "default_icon": "/images/logo.png",
    "default_badge": "Media Rep"
  },
  "web_accessible_resources": ["./content.css"]

and in my content.js file:

function addButtonElement() {
  
  const newButton = document.createElement("button");
  
  newButton.textContent = "Click me";
  newButton.className = "buttonn";

  newButton.style.background = "blue"
  newButton.style.position = "relative";
  newButton.style.top = "12.5em";
  newButton.style.left = "50em";
  newButton.style.zIndex = 8000;
  newButton.style.color = "white";
  newButton.style.width = "10%";
  newButton.style.height = "30%";
  newButton.style.borderRadius = "20px";
  newButton.style.padding = "0.5em";
  newButton.style.boxSizing = "border-box";



  const currentButton = document.getElementById("headerMain");
  document.body.insertAdjacentElement("afterbegin", newButton, currentButton);

}



document.body.onload = addButtonElement;

content.css file:

.buttonn {
  border: solid 4px red !important;
}

I have other functionality in with the js file that is working, and like I said, inline css works. Not really sure why I can't seem to get rules from my CSS file to apply from that file.

one page I am trying this on is https://www.target.com/p/general-mills-cheerios-honey-nut-breakfast-cereal-19-5oz/-/A-14765766#lnk=sametab

Solution

Solved! (kind of) I think there was maybe a caching issue on my machine...? I had been working on this late into the night yesterday and added in the !important command as one of my last steps to be sure my inline rules weren't taking precedence over the CSS.

When I came back to this project in the evening today it all worked! The power of walking away did it again. I am new at posting here, so not sure if best practice is to delete the question entirely, but I am tempted to leave it to remind others in the future that taking a break is sometimes the answer :)

Some of the lines added into my manifest.json file above weren't necessary to use my .css file

This is the version I have now that it is working as hoped:

{
  "manifest_version": 2,
  "name": "food project",
  "version": "0.1",
  "description": "My cool extension.",
  "content_scripts": [
    {
      "css": ["./content.css"],
      "matches": ["https://www.target.com/*"],
      "js": ["./content.js"]
    }
  ],
  "permissions": ["tabs"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Demo extention",
    "default_icon": "/images/logo.png",
    "default_badge": "Media Rep"
  }
}