Add banner to show that the extension has access.

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.

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

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