Chrome Extension to change Style Elements, insertCSS not working. is there a better option?

[Tanquen]

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"});*/ });

[wOxxOm]

1. Remove web_accessible_resources, it's not needed for insertCSS
2. Add "scripting" and "activeTab" permissions in manifest.json e.g. "permissions": ["scripting", "activeTab"] and reload the extension
3. !important modifier always works and it does so according to the CSS specification so depending on how the element is styled by the original site you may need to raise the selector specificity or use 'user' origin in insertCSS along with !important for each property.

[Tanquen]

1. Removed  web_accessible_resources

2. Add "scripting" and "activeTab" permissions.

I now get a new error:

Error handling response: TypeError: Error in invocation of scripting.insertCSS(scripting.CSSInjection injection, optional function callback): Error at parameter 'injection': Unexpected property: 'file'.

[wOxxOm]

The documentation says the parameter is `files`, not `file`.

[Tanquen]

Thanks, sorry I missed that.

In the content.js I had "files: ["styles.css"]" but not in the popup.js file. :(

Now the styles.css seems to not work.

#mw-panel {

background: #4285f4;

    left: 20px !important;

Is there an easy way to see if it was read? I've used the "*alert("Hello");" function to see if JS files run but not sure if it would work in a CSS file.

Also, it seems like the page has changed as I can no longer find the "mw-panel" object and its "left" style element used to widen a tables column. ???

[wOxxOm]

If the CSS is added you will see it in devtools, in the Styles panel, when the matching element is selected in the inspector's elements tree. Also check the console of the script that injects the styles, e.g. open the popup and right-click inside, then click "inspect".

[Tanquen]

Thanks Woxxom,

Now when I use the popup button I get this error:

Error in event handler: TypeError: Cannot read properties of undefined (reading 'insertCSS')
    at chrome-extension://eigihmdmjgpeijaibiaeknpfmljgaafl/content.js:18:24

I think it is because I can't get the syntax right for the style I want to change.

If I copy the selector of the element I get this:

#view > div > div > div.qx-page-header

I've tried to add it into the styles.css a few different ways but nothing works so far.

#view.div.div.div.qx-page-header {
background-color: #f1c7c7
}

#view > div > div > div.qx-page-header

#view.div.div.div.qx-page-header

div.qx-page-header

___________________________________

I already did that as you suggested before. That got passed this error that was shown from the moment the extension was loaded:

Error handling response: TypeError: Cannot read properties of undefined (reading 'insertCSS')

Now once I use the button on the popup I get this error:

Error in event handler: TypeError: Cannot read properties of undefined (reading 'insertCSS')
    at chrome-extension://eigihmdmjgpeijaibiaeknpfmljgaafl/content.js:18:24

manifest.json

  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
"scripting",
"activeTab"
  ],

Do I need to add it in the content.js and or popup.js?

[hrg...@gmail.com]

insertCSS  was replaced by scripting.insertCSS in Manifest V3.

https://developer.chrome.com/docs/extensions/reference/tabs/#method-insertCSS

[Tanquen]

wOxxOM, " Content scripts are only for web pages and they can't use chrome.scripting API. You don't need a content script for the popup. In the popup.html you should load popup.js via the standard <script> tag with src attribute. This popup.js will run inside the popup page and use chrome.scripting API."

I was using the content.js for the "chrome.runtime.onMessage.addListener" and that part seems to work.

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

if( request.buttonclicked === "reset" ) {

$('body').html($(copy))

}

if( request.buttonclicked === "wider" ) {

    chrome.scripting.insertCSS({

        target: { tabId: tabId },

        files: ["styles.css"]

});

}

})

hrg, I'll give the new scripting.insertCSS function a try.

[Tanquen]

@ hrg...@gmail.com

You got me. I'm already using "scripting.insertCSS"???

[Tanquen]

@Os

and or 

@ wOxxOm

These Google Groups posts and emails are confusing.  :)

"Content scripts are only for web pages and they can't use chrome.scripting API. You don't need a content script for the popup. In the popup.html you should load popup.js via the standard <script> tag with src attribute. This popup.js will run inside the popup page and use chrome.scripting API."

Ok, so I'm not sure where I got that from but it seems odd to have the scripting.insertCSS in the popup.js and a sendMessage line to run the same script in the contect.js, from one of many guides I've been trying to use.

    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){

    var activeTab = tabs[0];

            chrome.scripting.insertCSS({

                target: { tabId: activeTab.id },

                files: ["styles.css"]

            });

    /*chrome.tabs.sendMessage(activeTab.id, {"buttonclicked": "wider"});*/

   });

Now there is no error that I can see but the stlyes.css is not doing anything and I'm sure I have the syntax wrong.

.qx-page-header {

    background-color: #f1c7c7

}

[Tanquen]

I found a simple example on stackoverflow.com that I can't even get to work. No popups or anything still don't work. It seems like the  #h-top-questions ID is not there I had the same thing happen to the site I was working on. Did I change a setting to remove them all or was there a Chrome update that removed them? I was using the ID #mw-panel on the site I'm working on a few weeks ago and now it's also gone and when I right click and inspect I can't find any style parameter to change the column width. Seems like this should be so simple but I can't find the right ID or class and get the CSS file to change anything. :(

https://stackoverflow.com/questions/20583514/chrome-extension-to-change-text-style-of-specific-website

manifest.json:

{

  "name": "Top Questions redder",

  "description": "Make the world red",

  "version": "1.0",

  "content_scripts": [

    {

      "matches": ["https://stackoverflow.com/"],

      "css": ["sheet.css"]

    }

  ],

  "manifest_version": 2

}

sheet.css:

#h-top-questions {

  color: red;

}

[Tanquen]

I was able to get the  stackoverflow.com example working by right clicking and inspecting the text. I did not see the  #h-top-questions ID or any color. I used the New Style Rule button and it created a rule in the same area, I guess. It works and when added to the styles.css file I can add it with "chrome.scripting.insertCSS" and remove it with "chrome.scripting.removeCSS" from two different popup buttons.

h1.flex--item.fl1.fs-headline1 {

    color: red !important;

  }

But the table column width on the other site I'm working on is still not working. Again the #mw-panel is now gone and I found a different style rule that could work but when I add it as is to the styles.css it is ignored. 

.quixote .qx-grid .editor_grid tbody tr td input, .quixote .qx-grid .editor_grid tbody tr td .input-group {

    max-width: 305px !important;

}

When I try the add rule trick it also is ignored and I don't see anything added to the style rules.

input#_obj__TIMESHEETITEMS_1_-_obj__TASKID {

    max-width: 305px !important;

}

[Tanquen]

I did add a new question to Stack Overflow but no one seems to know. I'm now able to change some CSS rules but not the one I need to. Is there a better place to seek help?

https://stackoverflow.com/questions/69831917/change-css-of-a-website-with-chrome-extension-some-styles-cant-be-changed