I have some simple element styles I'd like to change with a Chrome Extension.

I just want to change the width value from 10em to 20em, for example. I would also like to be able to undo the change and or be able to enter the value from the popup.

#mw-panel {
    position: absolute;
    top: 0;
    width: 10em;
    left: 0;
}

I removed the styles.css from the manifest.json file and I also added the css file to the manifest.json file in the hopes of being able to enable/disable the CSS with the popup buttons.

   "web_accessible_resources": [
    {
    "resources": ["styles.css"],
    "matches": ["https://en.wikipedia.org/*"]
    }
    ]

I have a working extension with popup HTML and js files. I tried using insertCSS in the content.js but read that it will not work from there but should from a popup or background js file. I was hoping to also use the removeCSS function.

I also read that with some of the ways you can load a CSS file, the !important modifier will not work. So this may all be for not.

I currently can't get passed this error after clicking the popup button: Error handling response: TypeError: Cannot read properties of undefined (reading 'insertCSS')

    $('.format').click(function() {
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
            chrome.scripting.insertCSS({
                target: { tabId: activeTab.id },
                file: ["styles.css"]
            });
    /*chrome.tabs.sendMessage(activeTab.id, {"buttonclicked": "wider"});*/
   });