0

I am making a Chrome extension that needs to interact with a custom web component (a custom checkbox) on a third-party web page. I need to access the element's properties and methods from my content script, but I am unable to.

When I perform the following actions directly in the Chrome DevTools console, the custom checkbox behaves as expected:

const element = document.querySelector('#checkbox-id');
element.checked = true;
element.handleClick();

However, when I try to perform the same actions within my content script, the properties and methods of the custom element are not available.

I have tried injecting inline scripts and scripts with Blob URLs into the web page's context, in addition to using an iframe, but the page's Content Security Policy is very restrictive and blocks these approaches:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('<hash>'), or a nonce ('nonce-...') is required to enable inline execution.

How can I access and interact with the custom web component from my content script on a page with a strict Content Security Policy?

umop
  • 2,122
  • 2
  • 18
  • 22
  • Specify MAIN for world. [Inject with static declarations](https://developer.chrome.com/docs/extensions/mv3/content_scripts/#static-declarative) – Norio Yamamoto Apr 29 '23 at 23:59

0 Answers0