diff --git a/functional-samples/tutorial.getting-started/README.md b/functional-samples/tutorial.getting-started/README.md new file mode 100644 index 0000000000..1a59aee730 --- /dev/null +++ b/functional-samples/tutorial.getting-started/README.md @@ -0,0 +1,16 @@ +# Getting Started With Google Chrome Extensions + +This is an extension used in the [Debug extensions][1] tutorial. It changes the HTML body background color of the active tab. +The purpose of this extension is to demonstrate how to create a simple Chrome Extension that uses the `default_popup`, `options_page` and `service_worker` manifest keys and `storage` and `tabs` APIs. + + ## Running This Extension + +1. Clone this repository. +2. Load this directory in Chrome as an [unpacked extension][2]. +3. Go to https://developer.chrome.com/docs/extensions/get-started/tutorial/debug or any web page. +4. Click the extension icon in the Chrome toolbar, then click the three dots next to the "Getting Started Example" extension and select "Options". +5. On the Options page, choose a color. +6. Afterward, click the extension icon again, and the page's background color will change when you click the button in the extension popup. + +[1]: https://developer.chrome.com/docs/extensions/get-started/tutorial/debug +[2]: https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked \ No newline at end of file diff --git a/functional-samples/tutorial.hello-world/README.md b/functional-samples/tutorial.hello-world/README.md new file mode 100644 index 0000000000..39fa7157a2 --- /dev/null +++ b/functional-samples/tutorial.hello-world/README.md @@ -0,0 +1,10 @@ +# Getting Started With Google Chrome Extensions (Hello World) + +This example demonstrates how to create a simple "Hello World" Chrome Extension. +For more details, visit the [official tutorial](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world). + +## Running This Extension + +1. Clone this repository. +2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked). +3. Click the extension icon in the Chrome toolbar, then select the "Hello Extensions" extension. A popup will appear displaying the text "Hello Extensions". \ No newline at end of file diff --git a/functional-samples/tutorial.tabs-manager/README.md b/functional-samples/tutorial.tabs-manager/README.md new file mode 100644 index 0000000000..e4d44ea1e9 --- /dev/null +++ b/functional-samples/tutorial.tabs-manager/README.md @@ -0,0 +1,14 @@ +# Tab Manager For Chrome Dev Docs + +This Chrome extension helps you manage and group your tabs related to Google Chrome Developer documentation. It organizes tabs into a group titled "DOCS" for easier navigation and enhanced productivity. + +Purpose of this extension is to demonstrate [chrome.tabGroups](https://developer.chrome.com/docs/extensions/reference/api/tabGroups) API to interact with the browser's tab grouping system. + + ## Running This Extension + +1. Clone this repository. +2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked). +3. Open these two URLs in separate tabs: + - [https://developer.chrome.com/docs/extensions](https://developer.chrome.com/docs/extensions) + - [https://developer.chrome.com/docs/extensions/reference/api](https://developer.chrome.com/docs/extensions/reference/api) +4. Click the extension icon in the Chrome toolbar, then select the "Tab Manager for Chrome Dev Docs" extension. A popup will appear having title "Google Dev Docs" and button named "Group Tabs". Click on the button to group the two tabs.