HTMLButtonElement.click() in content script doesn't work in second screen

34 Views Asked by At

Bonjour, I've created an extension that's in production and working well. However, I've come up against a major problem that I don't know how to solve.

The purpose of my extension is to click on a button that appears when a series is introduced (for example) to skip it.

If I focus on my browser (full-screen mode or not), it clicks on the button.

But if I put the browser on my second screen and do something else on my main screen, my content script reaches the skipButtons.click(); for example, with a valid button that is not disabled, but the click no longer works..

Do you know if it's because the browser prevents us from clicking on elements if we're not on the window? However, I know an extension called Netflix extended that does this very well..

Here are all my content.js

main function

main() {
    enablePlexSkipper.watch((newValue, oldValue) => {
      if (!newValue) {
        observer.disconnect();
      } else if (newValue) {
        observer.observe(document, observerOptions);
      }
    });

    function tryClickingButtons(
      records: MutationRecord[],
      observer: MutationObserver,
    ) {
      for (let record of records) {
        if (record.addedNodes.length) {
          tryClickingSkipButton();
          tryClickingNextButton();
          break;
        }
      }
    }

    const observerOptions = {
      childList: true,
      subtree: true,
    };

    const observer = new MutationObserver(tryClickingButtons);

    startMutationObserver(observer, observerOptions);
  }

start mutation and try click on buttons

const startMutationObserver = async (
  observer: MutationObserver,
  observerOptions: observerOptions,
) => {
  const plexSkipper = await enablePlexSkipper.getValue();
  if (plexSkipper) {
    observer.observe(document, observerOptions);
  }
};

const tryClickingSkipButton = async () => {
  const skipIntroCredit = await enableSkipIntroCredit.getValue();
  const skipButtons = document.querySelector(
    "[class*=AudioVideoFullPlayer-overlayButton]",
  ) as HTMLButtonElement;
  if (skipIntroCredit && skipButtons) {
    skipButtons.click();
  }
};

const tryClickingNextButton = async () => {
  const skipIntroCredit = await enablePlayNext.getValue();
  const checkBox = document.getElementById("autoPlayCheck") as HTMLInputElement;
  if (skipIntroCredit && checkBox && checkBox.checked) {
    const nextButton = document.querySelector(
      "[class*=AudioVideoUpNext-playButton]",
    ) as HTMLButtonElement;
    if (nextButton) {
      nextButton.focus();
      nextButton.click();
    }
  }
};

manifest.json

{
  "manifest_version": 3,
  "name": "Plex skipper",
  "description": "__MSG_extDescription__",
  "version": "2.1.0",
  "icons": {
    "16": "icon/16.png",
    "32": "icon/32.png",
    "48": "icon/48.png",
    "64": "icon/64.png",
    "128": "icon/128.png",
    "256": "icon/256.png"
  },
  "permissions": [
    "storage"
  ],
  "default_locale": "en",
  "action": {
    "default_title": "Plex skipper",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "*://app.plex.tv/*",
        "http://*/web/*"
      ],
      "js": [
        "content-scripts/content.js"
      ]
    }
  ]
}
0

There are 0 best solutions below