Add a sample of clicking an anchor element with the javascript: scheme

functional-samples/sample.inline-script-anchor-clicker/README.md

@@ -0,0 +1,27 @@
+# Clicker Example for Element with Inline Script
+
+## Overview
+
+Manifest V3's CSP for content scripts prevents extensions from executing inline JavaScript. Typically inline script execution would occur when an element has inline event handlers bound or when an anchor's href attribute contains a `javascript:` scheme. As a result, if an extension tries to call `.click()` on such an element inside an isolated world content script, Chrome will throw a CSP error.
+
+This sample shows how to solve this issue.
+
+Relevant issues: [#807](https://github.com/GoogleChrome/chrome-extensions-samples/issues/807) [#769](https://github.com/GoogleChrome/chrome-extensions-samples/issues/769)
+
+## Try this sample
+
+1. Clone this repository.
+2. Load this directory in Chrome as an unpacked extension.
+3. Find the extension named "Anchor Element Clicker" and drag the file `inline-script-demo.html` into your browser. (This extension requires an HTML file opened with the file protocol to inject content script.)
+
+You will find the link `Link Text` will be clicked automatically, and a alert dialog with the text `Clicked` will be shown.
+
+## Implementation Notes
+
+To achieve clicking on a element with an inline event handler or a link with a javascript: scheme in an isolated script and bypassing CSP, the following steps should be taken:
+
+1. Inject a main world script where scripts are not subject to extension CSP restrictions. This script needs to listen for an event named `proxy-click`.
+
+2. In the isolated script, dispatch a `proxy-click` event and pass the element to be clicked to the main world script through the `relatedTarget` field of the `MouseEvent`.
+
+3. Once the main world script receives the event, it clicks on the corresponding element.

functional-samples/sample.inline-script-anchor-clicker/content.js

@@ -0,0 +1,5 @@
+// get the anchor element with javascript: scheme in demo page
+const el = document.getElementById('demo-anchor-with-js-scheme');
+
+// dispatch a mouse event to trigger the click event
+window.dispatchEvent(new MouseEvent('proxy-click', { relatedTarget: el }));

functional-samples/sample.inline-script-anchor-clicker/inline-script-demo.html

@@ -0,0 +1,5 @@
+<div>
+  <a id="demo-anchor-with-js-scheme" href="javascript:alert('Clicked')"
+    >Link Text</a
+  >
+</div>

functional-samples/sample.inline-script-anchor-clicker/manifest.json

@@ -0,0 +1,25 @@
+{
+  "name": "Anchor Element Clicker",
+  "version": "1.0",
+  "manifest_version": 3,
+  "description": "A sample of clicking on an anchor element with javascript: scheme",
+  "content_scripts": [
+    {
+      "matches": [
+        "file:///*/sample.inline-script-anchor-clicker/inline-script-demo.html"
+      ],
+      "js": [
+        "proxy-click.js"
+      ],
+      "world": "MAIN"
+    },
+    {
+      "matches": [
+        "file:///*/sample.inline-script-anchor-clicker/inline-script-demo.html"
+      ],
+      "js": [
+        "content.js"
+      ]
+    }
+  ]
+}

functional-samples/sample.inline-script-anchor-clicker/proxy-click.js

@@ -0,0 +1,7 @@
+// add a custom event listener to handle click event
+window.addEventListener('proxy-click', function ({ relatedTarget: element }) {
+  console.log('proxy-click event received, element: ', element);
+  if (element) {
+    element.click();
+  }
+});