mirror of
https://github.com/GoogleChrome/chrome-extensions-samples.git
synced 2026-03-26 13:19:49 +07:00
d2296fac85
Updates a nunber of dependencies in a single PR. These were suggested by dependabot but updating them individually would mean the reposistory would be in a broken state until everything had merged. I'm not personally a huge fan of lowercasing doctype, but Prettier has taken an opinionated stance here and there is not a way to disable it: https://github.com/prettier/prettier/issues/15096
251 lines
7.6 KiB
HTML
251 lines
7.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Document</title>
|
|
<script defer src="index.js"></script>
|
|
<link rel="stylesheet" href="../third-party/awsm/awsm.css" />
|
|
<link rel="stylesheet" href="index.css" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section>
|
|
<h1>Action API Demo</h1>
|
|
<p>
|
|
Before experimenting with these APIs, we recommend you pin the
|
|
extension's action button to your toolbar in order to make it easier
|
|
to see the changes.
|
|
</p>
|
|
<img src="../images/pin-action.png" />
|
|
</section>
|
|
|
|
<section id="toggle-state">
|
|
<h2>enable / disable</h2>
|
|
|
|
<p>
|
|
Clicking the below <em>toggle enabled state</em> button will enable or
|
|
disable the extensions' action button in Chrome's toolbar and
|
|
extensions menu.
|
|
</p>
|
|
|
|
<p>
|
|
When disabled, clicking the action will not open a popup or trigger
|
|
<a
|
|
href="https://developer.chrome.com/docs/extensions/reference/action/#event-onClicked"
|
|
><code>action.onClicked</code></a
|
|
>
|
|
events.
|
|
</p>
|
|
|
|
<button id="toggle-state-button">toggle enabled state</button>
|
|
|
|
<div class="flex">
|
|
<figure>
|
|
<img src="../images/action-enabled.png" />
|
|
<figcaption>Action enabled</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="../images/action-disabled.png" />
|
|
<figcaption>Action disabled</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="popup">
|
|
<h2>Popup</h2>
|
|
|
|
<p>
|
|
This demo's <a href="manifest.json">manifest.json</a> file sets the
|
|
value of <code>action.default_popup</code> to
|
|
<code>popups/popup.html</code>. We can change that behavior at runtime
|
|
using
|
|
<a
|
|
href="https://developer.chrome.com/docs/extensions/reference/action/#method-setPopup"
|
|
><code>action.setPopup</code></a
|
|
>.
|
|
</p>
|
|
|
|
<label>
|
|
Change popup page<br />
|
|
<select id="popup-options">
|
|
<option value="/popups/popup.html">Hello world (default)</option>
|
|
<option value="/popups/a.html">A</option>
|
|
<option value="/popups/b.html">B</option>
|
|
<option value="">onClicked handler</option>
|
|
</select>
|
|
</label>
|
|
|
|
<div class="spaced">
|
|
<label>
|
|
Current popup value
|
|
<input type="text" id="current-popup-value" disabled />
|
|
</label>
|
|
</div>
|
|
|
|
<p>
|
|
Register a handler to change how the action button behaves. Once
|
|
changed, clicking the action will open your new favorite website.
|
|
</p>
|
|
<button id="onclicked-button">Change action click behavior</button>
|
|
<button id="onclicked-reset-button">reset</button>
|
|
</section>
|
|
|
|
<!-- badge -->
|
|
|
|
<section id="badge-text">
|
|
<h2>Badge Text</h2>
|
|
|
|
<p>
|
|
The action's badge text is a text overlay with a solid background
|
|
color. This provides a passive UI surface to share information with
|
|
the user. It is most commonly used to show a notification count or
|
|
number of actions taken on the current page.
|
|
</p>
|
|
|
|
<div class="spaced">
|
|
<label>
|
|
Enter badge text (live update)<br />
|
|
<input type="text" id="badge-text-input" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<label class="full-width">
|
|
Current badge text
|
|
<input type="text" id="current-badge-text" disabled />
|
|
</label>
|
|
<button id="clear-badge-button">clear badge text</button>
|
|
</div>
|
|
|
|
<div class="spaced">
|
|
<button id="set-badge-background-color-button">
|
|
Randomize badge background color
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<label class="full-width">
|
|
Current badge color
|
|
<input type="text" id="current-badge-bg-color" disabled />
|
|
</label>
|
|
<button id="reset-badge-background-color-button">
|
|
Reset badge color
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- Badge Text Color !-->
|
|
<section>
|
|
<h2>Badge Text Color</h2>
|
|
<p>
|
|
The
|
|
<a
|
|
href="https://developer.chrome.com/docs/extensions/reference/action/#method-setBadgeTextColor"
|
|
><code>action.setBadgeTextColor</code></a
|
|
>
|
|
method allows you to change the color of the badge text.
|
|
</p>
|
|
|
|
<div class="spaced">
|
|
<button id="set-badge-txt-color-button">
|
|
Randomize badge text color
|
|
</button>
|
|
</div>
|
|
|
|
<p>
|
|
The
|
|
<a
|
|
href="https://developer.chrome.com/docs/extensions/reference/action/#method-getBadgeTextColor"
|
|
><code>action.getBadgeTextColor</code></a
|
|
>
|
|
method allows you to read the current color of the badge text.
|
|
</p>
|
|
|
|
<div class="flex">
|
|
<label class="full-width">
|
|
Current badge text color
|
|
<input type="text" id="current-badge-txt-color" disabled />
|
|
</label>
|
|
<button id="reset-badge-txt-color-button">
|
|
Reset badge text color
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- badge - icon -->
|
|
|
|
<section id="setIcon">
|
|
<h2>Icon</h2>
|
|
|
|
<p>
|
|
The
|
|
<a
|
|
href="https://developer.chrome.com/docs/extensions/reference/action/#method-setIcon"
|
|
><code>action.setIcon</code></a
|
|
>
|
|
method allows you to change the action button's icon by either
|
|
providing the path of an image or the raw
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData"
|
|
>ImageData</a
|
|
>.
|
|
</p>
|
|
|
|
<button id="set-icon-button">set a new action icon</button>
|
|
<button id="reset-icon-button">reset action icon</button>
|
|
</section>
|
|
|
|
<!-- badge - hover text (title) -->
|
|
|
|
<section id="title">
|
|
<h2>Hover Text</h2>
|
|
|
|
<p>
|
|
The action's title is visible when mousing over the extension's action
|
|
button.
|
|
</p>
|
|
|
|
<p>
|
|
This value can be read and changed at runtime using the
|
|
<a
|
|
href="https://developer.chrome.com/docs/extensions/reference/action/#method-getTitle"
|
|
><code>action.getTitle</code></a
|
|
>
|
|
and
|
|
<a
|
|
href="https://developer.chrome.com/docs/extensions/reference/action/#method-setTitle"
|
|
><code>action.setTitle</code></a
|
|
>
|
|
methods, respectively.
|
|
</p>
|
|
|
|
<div class="spaced">
|
|
<label>
|
|
Enter a new title (debounced)<br />
|
|
<input type="text" id="title-input" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<label class="full-width">
|
|
Current title
|
|
<input type="text" id="current-title" disabled />
|
|
</label>
|
|
<button id="reset-title-button">reset title</button>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<figure>
|
|
<img src="../images/title-no-hover.png" />
|
|
<figcaption>Default appearance</figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="../images/title-hover.png" />
|
|
<figcaption>Title appears on hover</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|