New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sample: Calling element.click() on an element with an inline event handler #807
Comments
It is recommended to use external scripts. With these steps, you should be able to click an element with an inline event while still complying with the Chrome Web Store's policies forbidding remotely hosted code. |
@M-SAI-SOORYA, it IS NOT recommended to use external scripts. Doing so in a Manifest V3 extension is a violation of the Chrome Web Store developer program policies. |
Overview
Starting with Manifest V3, Chrome introduced a strict content security policy (CSP) for content scripts run in the extension's isolated world (default behavior). This CSP does not allow the use of
unsafe-inline
. This prevents extensions from appending<script>
tags with arbitrary payloads to a document, but it also prevents other extensions from calling theclick()
method on elements that have click handlers.This issue request the creation of an extension sample that demonstrates how to click an element that has an inline event while still complying with the Chrome Web Store's policies forbidding "remotely hosted code" (executing code that is not bundled in the extension's package).
Proposed implementation
If a website contains inline event handlers, the page's CSP must allow
unsafe-inline
or those event handlers won't work. As such, we can work around extension CSP restrictions by performing theclick()
call inside a main world content script.The user experience for this implementation is roughly as follows:
The extension will have 3 primary components:
background.js
;content-isolated.js
, which will be injected into the extension's isolated world; andcontent-main.js
(or equivalent function in background.js), which will be injected into the page's main world.content-main.js
will perform the click on behalf of the extension. It will receive a message fromcontent-isolated.js
In order to communicate between the main world and isolated world content scripts, the extension will dispatch a custom event that uses a nonce name known to both the main and isolated worlds. This pattern helps ensure that the event's cross-world communication does not interfere with normal page operations.
Additional considerations
The README for this sample should highlight that the use of custom events with nonce names does not guarantee that a hostile page will not intercept the message, as the page could monkeypatch the JavaScript environment in a way that allows it to intercept object constructors or event listener registrations.
CustomElements can pass data across the world boundary by setting the
detail
property when instantiating a new custom element, but only if that data is cloneable with the structuredClone algorithm. If it cannot be cloned, the custom element's event.detail property in the receiving world will benull
.The text was updated successfully, but these errors were encountered: