Add the script-on-click example

examples.json

@@ -471,6 +471,14 @@
     ],
     "name": "runtime-examples"
   },
+  {
+    "description": "Adds a toolbar button. Click the button to execute a script in the active tab.",
+    "javascript_apis": [
+      "action.onClicked",
+      "scripting.executeScript"
+    ],
+    "name": "script-on-click"
+  },
   {
     "description": "Demonstrates how to write to the clipboard from a content script",
     "javascript_apis": [],

script-on-click/README.md

@@ -0,0 +1,23 @@
+# script-on-click
+
+This extension runs a script in the active tab when the toolbar button is clicked, without requiring any install-time host permissions.
+
+## What it does
+
+When the user clicks the extension's toolbar button, a script is executed in the active tab that displays an alert showing the page's URL.
+
+The extension uses a background script compatible with Firefox and Chrome. To achieve this compatibility, `background.scripts` and `background.service_worker` are declared in `manifest.json` so that:
+
+- In Firefox, the scripts in `background.scripts` are executed in the context of a document with access to DOM APIs, a so-called "event page".
+- In Chrome, `background.service_worker` is executed as a Service Worker, which does not have access to DOM APIs.
+
+This cross-browser approach requires Chrome 121 and Firefox 121 or later.
+
+## What it shows
+
+From this example, you see how to:
+
+- Use `action.onClicked` to respond to a toolbar button click without a popup.
+- Use `scripting.executeScript` to run a function in the active tab on demand.
+- Declare a background script compatible with Firefox and Chrome using `background.scripts` and `background.service_worker`.
+- Use the `activeTab` and `scripting` permissions to execute scripts without requiring install-time host permissions.

script-on-click/background.js

@@ -0,0 +1,10 @@
+browser.action.onClicked.addListener((tab) => {
+  browser.scripting.executeScript({
+    target: { tabId: tab.id },
+    func: () => {
+      // func is serialized and executed in the context of the web page.
+      alert("Clicked extension button and ran script at " + document.URL);
+    },
+    injectImmediately: true,
+  });
+});

script-on-click/manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "Script on click",
+  "version": "1",
+  "manifest_version": 3,
+  "permissions": ["activeTab", "scripting"],
+  "action": {
+    "default_title": "Execute script on click"
+  },
+  "background": {
+    "scripts": ["background.js"],
+    "service_worker": "background.js"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "script-on-click@mozilla.org",
+      "strict_min_version": "121.0a1"
+    },
+    "gecko_android": {
+      "strict_min_version": "121.0a1"
+    },
+    "data_collection_permissions": {
+      "required": ["none"]
+    }
+  },
+  "minimum_chrome_version": "121"
+}