How do I get a checkbox value from popup to make it change page's CSS?

Question

everyone. Basically, this streaming website displays 4:3 videos in 16:9, ignoring the aspect ratio and making them all stretched. I checked and the videos were pre-streched, since their resolution is 1024x576.

Nevertheless, I found a way to make them 4:3, which is adding transform: scaleX(0.75) to the class playkit-container.

To make things more easier, I'm trying to make a simple Chrome extension with a popup that has a checkbox. If the checkbox is checked, the javascript should add transform: scaleX(0.75) to playkit-container. If is not checked, it should, either reset the CSS or set it to transform: scaleX(1.0).

Here's what I have:

extension.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Opto AR Fixer</h1>
    <p>Fixes the AR of 4:3 episodes streaming on Opto.</p>

    <input type="checkbox" name="forcear" id="forcear">
    <label for="forcear">Force 4:3</label>
    <script src="extension.js"></script>
</body>
</html>

extension.js

var popup = chrome.extension.getViews({type:"popup"})[0];
var checkBox = popup.document.getElementById("forcear").addEventListener("click", myFunction);

function myFunction() {  
    if (checkBox.checked == true){
        document.getElementsByClassName("playkit-container")[0].style.transform = "scaleX(0.75)"
    } else {
        document.getElementsByClassName("playkit-container")[0].style.transform = "scaleX(1.0)"
    }
  }

However, nothing happens. If I inspect the popup and check the logs, whenever I click the button it throws me these errors: Uncaught TypeError: Cannot read property 'checked' of undefined

Uncaught TypeError: chrome.extension.getViews is not a function

What am I missing here?

UnfocusedDrive · Answer 1 · 2021-01-04T02:51:53.657

0

It is saying the owner of the property 'checked' is undefined. When you defined your checkBox, you assigned it to the .addEventListener() which is returning nothing. So this is means checkBox is assignd as 'undefined'.

You will want to split up your variable assignment to just the element itself, and then assign the even listener separately in this case.

e.g.

var popup = chrome.extension.getViews({type:"popup"})[0];
var checkBox = popup.document.getElementById("forcear");

checkBox.addEventListener("click", myFunction);

function myFunction() {  
    if (checkBox.checked == true){
        document.getElementsByClassName("playkit-container")[0].style.transform = "scaleX(0.75)"
    } else {
        document.getElementsByClassName("playkit-container")[0].style.transform = "scaleX(1.0)"
    }
  }

Find el on page loop:

function findEl() {
  setTimeout((){ 
    const el = document.getElementsByClassName("playkit-container")[0];
    if (el.length > 0) {
      // do other logic once el is found if needed
    } else {
      findEl();
    }
  }, 1000);
}

edited Jan 04 '21 at 02:51

answered Dec 27 '20 at 17:40

UnfocusedDrive

166
4

Ok, that makes sense. I rewrote the code like you suggested, but now it throws me `Uncaught TypeError: Cannot read property 'style' of undefined`. I doubled checked, and the class name is correct. Should I wait for the DOM to load? – O Tal Antiquado Dec 27 '20 at 17:55
Since the example does not show where 'playkit-container' is defined it's hard to tell. I'm assuming that's where the error is coming from. If you are hitting this error after `myFunction` is called, the only thing I can say is add a debugger or console log and check for `document.getElementsByClassName("playkit-container")`. Or if you can create a code example we can work off that. – UnfocusedDrive Dec 28 '20 at 17:01
I've been trying a lot of different things, since yesterday. Fortunately, I did what you suggested, the `console.log()` thing, and I understood what was the problem. It was throwing me that error, because he was searching in the extension's DOM, for some reason. I still didn't fix it, but I managed to simplify things. Now I have a `popup.js` that gets the popups checkbox, listens to it and calls a function called `forceAR()` which is in `content.js`. Now my problem is that it won't find that function. The website is geo-blocked and needs a login. What's the best way to show you the DOM? – O Tal Antiquado Dec 28 '20 at 18:55
Ok sorry for getting back to you. Check this reference: https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom . Another possible option, we could try applying a loop on your extension say every 1 second. If it finds the element when the page is loaded, then run the script. Updated above ^ – UnfocusedDrive Jan 04 '21 at 02:48

How do I get a checkbox value from popup to make it change page's CSS?

1 Answers1