From 1e6413111f7e8afaa9f01994019f8242afbadd2e Mon Sep 17 00:00:00 2001 From: Oliver Dunk Date: Wed, 16 Oct 2024 13:29:02 +0100 Subject: [PATCH 1/2] 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. --- .../README.md | 19 ++++++++ .../background.js | 48 +++++++++++++++++++ .../manifest.json | 11 +++++ 3 files changed, 78 insertions(+) create mode 100644 functional-samples/cookbook.permissions-addsiteaccessrequest/README.md create mode 100644 functional-samples/cookbook.permissions-addsiteaccessrequest/background.js create mode 100644 functional-samples/cookbook.permissions-addsiteaccessrequest/manifest.json diff --git a/functional-samples/cookbook.permissions-addsiteaccessrequest/README.md b/functional-samples/cookbook.permissions-addsiteaccessrequest/README.md new file mode 100644 index 0000000000..19e3f927e6 --- /dev/null +++ b/functional-samples/cookbook.permissions-addsiteaccessrequest/README.md @@ -0,0 +1,19 @@ +# 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?" diff --git a/functional-samples/cookbook.permissions-addsiteaccessrequest/background.js b/functional-samples/cookbook.permissions-addsiteaccessrequest/background.js new file mode 100644 index 0000000000..7f222a878e --- /dev/null +++ b/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. + } +}); diff --git a/functional-samples/cookbook.permissions-addsiteaccessrequest/manifest.json b/functional-samples/cookbook.permissions-addsiteaccessrequest/manifest.json new file mode 100644 index 0000000000..ead47d9bd1 --- /dev/null +++ b/functional-samples/cookbook.permissions-addsiteaccessrequest/manifest.json @@ -0,0 +1,11 @@ +{ + "name": "permissions.addSiteAccessRequest()", + "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"], + "manifest_version": 3 +} From 274805ae9bf936a9fb002218b5d11d4d0eb7950b Mon Sep 17 00:00:00 2001 From: Oliver Dunk Date: Thu, 17 Oct 2024 13:39:52 +0100 Subject: [PATCH 2/2] Add banner to show that the extension has access. --- .../README.md | 2 ++ .../banner.js | 14 ++++++++++++++ .../manifest.json | 10 ++++++++-- 3 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 functional-samples/cookbook.permissions-addsiteaccessrequest/banner.js diff --git a/functional-samples/cookbook.permissions-addsiteaccessrequest/README.md b/functional-samples/cookbook.permissions-addsiteaccessrequest/README.md index 19e3f927e6..9c15c399aa 100644 --- a/functional-samples/cookbook.permissions-addsiteaccessrequest/README.md +++ b/functional-samples/cookbook.permissions-addsiteaccessrequest/README.md @@ -17,3 +17,5 @@ This API allows you to request access to an origin listed in `optional_host_perm 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. diff --git a/functional-samples/cookbook.permissions-addsiteaccessrequest/banner.js b/functional-samples/cookbook.permissions-addsiteaccessrequest/banner.js new file mode 100644 index 0000000000..c469830d87 --- /dev/null +++ b/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); diff --git a/functional-samples/cookbook.permissions-addsiteaccessrequest/manifest.json b/functional-samples/cookbook.permissions-addsiteaccessrequest/manifest.json index ead47d9bd1..9495542628 100644 --- a/functional-samples/cookbook.permissions-addsiteaccessrequest/manifest.json +++ b/functional-samples/cookbook.permissions-addsiteaccessrequest/manifest.json @@ -1,11 +1,17 @@ { - "name": "permissions.addSiteAccessRequest()", + "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"], + "permissions": ["tabs", "scripting"], + "content_scripts": [ + { + "matches": ["https://example.com/*"], + "js": ["banner.js"] + } + ], "manifest_version": 3 }