Skip to content
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

Open
dotproto opened this issue Jan 11, 2023 · 2 comments
Open

Comments

@dotproto
Copy link
Contributor

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 the click() 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 the click() call inside a main world content script.

The user experience for this implementation is roughly as follows:

  1. The first time the user clicks the extension's action button, a new tab will open to a demo site with inline event handlers.
  2. When the user clicks the extensions' action button while the demo site is in the currently focused tab, the extension will perform a "click()" on an element with an inline event handler.

The extension will have 3 primary components: background.js; content-isolated.js, which will be injected into the extension's isolated world; and content-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 from content-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 be null.

@M-SAI-SOORYA
Copy link

It is recommended to use external scripts.
First, you need to add the "activeTab" permission to your extension's manifest.json file.
Then, create a content script (content.js) that injects a script into the active tab's DOM....
....the code selects an element with the ID "mybutton" and triggers a click event on it.
At final instance, add the element with the inline event to the HTML file bundled in your extension.

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.

tusharv01 pushed a commit to tusharv01/chrome-extensions-samples that referenced this issue Apr 4, 2023
@dotproto
Copy link
Contributor Author

dotproto commented Apr 5, 2023

@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.

tusharv01 pushed a commit to tusharv01/chrome-extensions-samples that referenced this issue Apr 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants