centersl/chrome-extensions-samples
1
0
Fork 0
mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-27 13:29:34 +07:00
Code Issues Packages Projects Releases Wiki Activity

Fix #1084: quick-api-reference sample (#1099)

Browse Source 
* Add README.md

* Fix issue related to website update

Updated CSS selector and tweaked the TIP button

* Update content.js

Keeping newline

* Update CSS styles

Change padding, height and font sizes to make the button style more consistent with the navigation bar

* Update functional-samples/tutorial.quick-api-reference/content.js

* Update functional-samples/tutorial.quick-api-reference/README.md

* Update functional-samples/tutorial.quick-api-reference/README.md

---------

Co-authored-by: Oliver Dunk <oliver@oliverdunk.com>
This commit is contained in:
Pasquale Riello
2024-02-27 15:07:16 +01:00
committed by GitHub
parent 72eb0a4a7d
commit b9df791e76
2 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
functional-samples/tutorial.quick-api-reference/content.js
View File

@@ -1,23 +1,18 @@
// Popover API https://chromestatus.com/feature/5463833265045504
(async () => {
const nav = document.querySelector('.navigation-rail__links');
const nav = document.querySelector('.upper-tabs > nav');
const { tip } = await chrome.runtime.sendMessage({ greeting: 'tip' });
const tipWidget = createDomElement(`
<button class="navigation-rail__link" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0; border: none; background: none;>
<div class="navigation-rail__icon">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d='M15 16H9M14.5 9C14.5 7.61929 13.3807 6.5 12 6.5M6 9C6 11.2208 7.2066 13.1599 9 14.1973V18.5C9 19.8807 10.1193 21 11.5 21H12.5C13.8807 21 15 19.8807 15 18.5V14.1973C16.7934 13.1599 18 11.2208 18 9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9Z'"></path>
</svg>
</div>
<span>Tip</span>
<button type="button" popovertarget="tip-popover" popovertargetaction="show" style="padding: 0 12px; height: 36px;">
<span style="display: block; font: var(--devsite-link-font,500 14px/20px var(--devsite-primary-font-family));">Tip</span>
</button>
`);
const popover = createDomElement(
`<div id='tip-popover' popover>${tip}</div>`
`<div id='tip-popover' popover style="margin: auto;">${tip}</div>`
);
document.body.append(popover);