0

This question is about a Chrome Extension for the Apps Script code editor.

I've tried getting the scrollbar elements by className, but without success. When I use the developer tools, to inspect the HTML in the Apps Script editor, I'm finding a name of scrollbar-thumb. I assumed it was a className, but when I use getElementsByClassName() the code returns zero elements.

Apps Script Scroll Bar

I changed the color of the scroll bars from the developer tools to a magenta color, and it worked.

MagentaScrollBars

manifest.json

{
  "name": "Apps Script Scrollbar Color",
  "description": "This extension changes the scrollbar color",
  "version": "1.0",

  "browser_action": {
   "default_icon": "myIcon.png",
   "default_popup": "pop_up.html"
  },

  "content_scripts": [
    {
      "matches": ["https://script.google.com/*"],
      "all_frames": true,
      "js": ["pop_up.js"]
    }
  ],

  "permissions": [
   "activeTab"
   ],

  "manifest_version": 2
}

Pop-up.js

document.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('checkPage');
  checkPageButton.addEventListener('click', function(e) {
   //console.log('it ran');

    var scrollBarElements = document.getElementsByClassName('scrollbar-thumb');
    console.log('scrollBarElements.length: ' + scrollBarElements.length);

}, false);

});

Dev Tools Screen:

PopUpDevTools

How can I get the scrollbar elements?

I can get the elements of the pop_up.html file, but I can't reference any HTML in the window itself.

Alan Wells
  • 30,746
  • 15
  • 104
  • 152

1 Answers1

1

Can't select those pseudo-elements directly with JS or in the dev console. No document.getPseudoElementByName() exists, so a function needs called to ultimately control the styling.

in dev console: function changeColor() { document.styleSheets[1].addRule("::-webkit-scrollbar-thumb", "background-color: pink;") }; >> enter

taken from this post

then run with changeColor() >> enter

Maybe include the [html] and [css] tags to see if anything different is offered from those groups

Community
  • 1
  • 1
Bryan P
  • 5,031
  • 3
  • 30
  • 44
  • I don't understand the `styleSheets[1]` part. What does that do? – Alan Wells Apr 13 '16 at 19:20
  • references the css file in a script.google.com app, but not exactly sure how an extension can point to it – Bryan P Apr 13 '16 at 19:49
  • `document.styleSheets.length` returns zero. The `styleSheets` property returns an object, but it looks like it's empty. So, it looks like I'm at a "dead end" with that strategy. So, I'm not sure where to go from here. – Alan Wells Apr 13 '16 at 20:28
  • I can get elements by class name that show up in the dev console for the Apps Script editor, but they are all empty. If I use: `document.getElementsByClassName('code-area');`, it finds and returns an object, but it's empty. I get `[object HTMLCollection]`, but the length is zero. – Alan Wells Apr 13 '16 at 20:40
  • You're trying to select `.code-area` now or `::webkit-scrollbar-thumb`? Why marked as answer? – Bryan P Apr 13 '16 at 21:43
  • I'm trying different things, trying to understand what is going on. The answer did help. No-one else has tried to answer. I still want to change the scrollbar color, but I want to be able to change the color of the background in the code editor also. There's a broader issue. I marked as correct, because it helped, and it is a legitimate answer. I suppose marking it as correct might cause someone else to not review the question. But anyone can answer, and I *could* change the correct answer to someone else's answer if I wanted/needed to. – Alan Wells Apr 13 '16 at 22:09
  • ok, your extension changed the styling with that function though? if not, still may want to expose the question to the JS, html or css tags. I did see a length in regards to the `code-area` selection in dev console – Bryan P Apr 13 '16 at 22:44
  • Thanks. I added the tags. I have not been able to change any styling. Removed the correct answer in case someone new takes a look. – Alan Wells Apr 13 '16 at 23:13