Add permissions.addSiteAccessRequest() sample (#1322)

* Add permissions.addSiteAccessRequest() demo

Adds an example of using the permissions.addSiteAccessRequest() API to
request access to a checkout page. This matches the example used in our
upcoming blog post.

* Add banner to show that the extension has access.

Author: oliverdunk

functional-samples/cookbook.permissions-addsiteaccessrequest/README.md

@@ -0,0 +1,21 @@
+# permissions.addSiteAccessRequest() Demo
+
+This sample demonstrates using the `permissions.addSiteAccessRequest` API to request access to a site.
+
+## Overview
+
+This API allows you to request access to an origin listed in `optional_host_permissions` (or withheld by the user) at runtime.
+
+## Running this extension
+
+1. Clone this repository.
+2. Make sure you have the latest version of Chrome Canary installed.
+3. At chrome://flags, enable the "Extensions Menu Access Control" flag.
+4. Close Chrome Canary.
+5. Start Chrome Canary with the `--enable-features=ApiPermissionsSiteAccessRequests` flag.
+6. Load this directory as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+7. At chrome://extensions, click on "Details" for the extension and unselect "Automatically allow access on the following sites".
+8. Visit https://example.com/checkout.
+9. Click "Allow 1?"
+
+You will see a banner injected on the page to show that the extension has run.

functional-samples/cookbook.permissions-addsiteaccessrequest/background.js

@@ -0,0 +1,48 @@
+// Copyright 2024 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * Adds a site access request if the user visits https://example.com/checkout.
+ * This could be useful for an extension that wishes to offer users coupons or
+ * order tracking but needs access to the site to do so.
+ */
+chrome.tabs.onUpdated.addListener(async (tabId, changes) => {
+  if (typeof changes.url !== 'string') return;
+
+  const url = new URL(changes.url);
+
+  // If we are on the /checkout page of example.com.
+  if (url.origin === 'https://example.com' && url.pathname === '/checkout') {
+    const hasPermission = await chrome.permissions.contains({
+      origins: ['https://example.com/*']
+    });
+
+    // We already have host permissions.
+    if (hasPermission) {
+      return;
+    }
+
+    // Add a site access request if the API is available.
+    if (chrome.permissions.addSiteAccessRequest) {
+      chrome.permissions.addSiteAccessRequest({ tabId });
+    }
+  }
+});
+
+chrome.permissions.onAdded.addListener((permissions) => {
+  if (permissions.origins?.includes('https://example.com/*')) {
+    console.log('Permission granted.');
+    // FIXME: Run any code you wanted to run here.
+  }
+});

functional-samples/cookbook.permissions-addsiteaccessrequest/banner.js

@@ -0,0 +1,14 @@
+const banner = document.createElement('div');
+banner.innerText = 'Extension has access to page.';
+
+banner.style.width = '100vw';
+banner.style.position = 'fixed';
+banner.style.top = '0';
+banner.style.left = '0';
+banner.style.margin = '0';
+banner.style.borderRadius = '0';
+banner.style.padding = '20px';
+banner.style.background = '#4CAF50';
+banner.style.color = 'white';
+
+document.body.prepend(banner);

functional-samples/cookbook.permissions-addsiteaccessrequest/manifest.json

@@ -0,0 +1,17 @@
+{
+  "name": "Permissions (Add Site Access Request)",
+  "description": "Uses the `permissions.addSiteAccessRequest()` API to request access to a site.",
+  "version": "0.3",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "host_permissions": ["https://example.com/*"],
+  "permissions": ["tabs", "scripting"],
+  "content_scripts": [
+    {
+      "matches": ["https://example.com/*"],
+      "js": ["banner.js"]
+    }
+  ],
+  "manifest_version": 3
+}